前端样式脚本本地化开发

Posted 2020-08-21

前端样式脚本本地化开发

这里分享两个本地化方案（自整理）：

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

 

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

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

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