首页 > 代码库 > 前端样式脚本本地化开发

前端样式脚本本地化开发

前端样式脚本本地化开发

这里分享两个本地化方案(自整理):

  1. 本地服务器(仅内网调试)

    在本地架设临时服务器进行样式脚本调试

  2. 有道云笔记(外网调试)

    利用有道云笔记在本地调试脚本

1.本地服务器方案

有很多经历过前端开发的朋友们肯定知道,前端代码一般并不是在本地进行调试的。大多数都是在本地写好预测试的代码之后,然后复制粘贴到服务器代码库中再来执行的,但是这种方式确实不适合前端的调试, 最麻烦的不是因为要复制粘贴着来进行代码调试,而是因为当有好几个人都在同时改一个样式脚本时复制粘贴着调试,就有可能会出现问题。

调试代码时。代码存储库不断被修改?同一个脚本样式文件n多人操作?移动端调试时需要各种清理缓存……

这些问题将会带来各种各样对前端开发的不便。因此需要有一种本地化开发的方法:本地直接进行修改调试代码,然后直接在PC端或移动端测试运行。如此这般,那调试代码就简单快捷多了。有助于“选择性的”提高工作效率哦。(为什么是有选择性呢?比如下面说的方法。因为这个方法肯定也是有局限性的。比如:非该局域网下的ip访问该页面便加载不了样式与脚本,除非你的本地服务器是支持广域网的。所以你在本地调试完之后肯定还是要上传到服务器上去的,因此一般只新的需求,新的代码比较适合使用此方法,老的需求代码都是修改的,就不好使用本地化来调试了)

好,现在我们就来说说如何使用这种样式脚本本地化来调试前端代码吧。

1下载本地服务器

(这里提供一个个人常用的php本地服务器,非常简易的)

下载地址(度娘盘):

http://pan.baidu.com/s/1qXDljgK

缩短网址(方便在电脑输入打开):

suo.im/beq2t

安装:随你喜欢安装在哪个盘都行。

安装完成后,桌面会出现3个快捷方式:

技术分享

 

PHP服务器 是服务器启动程序

phpwww 是前端文件存储空间(这里我们用来存储需要调试的css js文件就行)

mysqldata 是mysql本地数据库空间(这里我们就不用它了)

2创建局域网本地服务器

首先我们启动PHP服务器吧。

1.这里我们选择关闭

技术分享

 

2.这里我们点击开始

技术分享

 

3.一般推荐使用第三个“开始&访问”的链接,这时便创建了一个本地的局域网服务器了。当前自动打开的主页就是刚刚搭建起来的本地服务器主页。

技术分享

 

也就是说phpwww目录中的index.php,就是当前服务器的主页。

比如:我现在的地址就是:http://192.168.0.101:50080/

3创建局域网直链样式脚本文件

在phpwww目录中创建一个目录,如js 

进入js目录创建一个js文件,如new.js

技术分享

 

然后编辑保存代码。

那么当前脚本的绝对路径地址便是:http://192.168.0.101:50080/js/new.js

(若你的本地ip发生改变,那这个路径也就需要改变了)

4在网络项目中引入本地的调试样式脚本文件

这里我们就试试引入这个本地脚本

在你的服务器页面中的适当位置加入代码:

<script src="http://192.168.0.101:50080/js/new.js"></script>

页面的代码:

技术分享

 

执行效果:

技术分享

 

浏览器载入的文档列表:

技术分享

 

5调试样式脚本

如果你觉得样式脚本有问题,那你可以直接在本地的该文件中直接改,改完后直接Ctrl+S保存。然后刷新页面即可

技术分享

 

注:该服务器中的资源如果想在移动端调试的。需要是你的电脑用的是wifi网络,然后你手机也连接同一个网络。那么手机上调试代码也是很简单的了。

 

2.有道云笔记方案

有道云笔记是个非常好用的东西,并不是我在打广告,因为给这个打广告对我来说并没有任何好处,基本上也就是来说说使用它的好处吧。

可以做工作总结、视频直链、前端案例、外网样式脚本调试……,不过我觉得它的作用肯定还不止如此。所谓最好的使用软件就是用出这个软件的极致,用得超出了软件原本的作用。

我们今天就来说说,如何使用有道云笔记进行前端样式脚本的开发本地化。

因为还没有一个标准性的本地化开发方案,所以这里就给各位介绍一个各位都懂的方案。

利用的就是样式和脚本可跨域的作用来实现的。

1下载安装有道云笔记

这个就不说了,自己去百度下载安装,并注册账号登录就行

2上传本地样式脚本文档,并获取文档的直链

进入软件后,在我的文件夹中创建一个文件夹“本地化测试”

技术分享

 

比如我在本地创建一个js文件。

技术分享

 

技术分享

 

更改下打开方式为你自己常用的编辑器打开,这里我选择nodepad++。

然后把这个本地文件上传到“本地化测试”文件夹中,上传后右键--分享

技术分享

 

技术分享

 

在浏览器中打开链接

技术分享

 

点击右上角的“保存”,再右键“下载”,“复制链接地址”

就能获取到该文件的永久不变的直链地址。

技术分享

 

3在你的html文档中引入文档

比如这是个脚本文档,我们就在网络html中这样引入:

<script src="http://note.youdao.com/yws/api/personal/file/AD3F15AAF3D449BF995CD8EF09157DF6?method=download&inline=true&shareKey=0e10f2fb62cd52947aeaf70fde5c3a26"></script>

如:

技术分享

 

代码引入:

技术分享

 

便可执行代码:

技术分享

 

4本地代码调试

查看文件的详情,选择“打开”,便会启动你选择的打开方式打开这个文件的编辑器。

我们修改一下这份代码,然后点击Ctrl+S组合键保存代码,如:

技术分享

 

然后我们直接刷新下网络测试页。看测试页面的执行效果发生了改变

http://sandbox.runjs.cn/show/ks13nsms

技术分享

 

这就是说我们不需要像之前那么麻烦地调试样式脚本了。

最后记得在本地调试之后,把那段引入代码去掉,把调试完成的那部分代码放到本站的服务器中去再运行即可,可以减少对服务器的修改次数,规避一些开发中遇到的问题。

当然这种方式本地化的方式确实有很多局限性。但是确实能加快一般的开发效率。

 

前端样式脚本本地化开发