【前端小记】从线上开发到本地化

开篇

这篇文章是因为想总结一下一直以来工作中记录在记事本中的前端知识点。从而进行复盘。虽然不是所有的知识点都记录下来的，但是其实也记录了很多。知识是无限的，如果之前记录的知识后来没有去回顾和使用，那和没有记录是没有区别的。

而且我希望发布一些文章，应该也能给别人带来一些帮助，尽管自己能力有限，可能在大佬看来不算什么，但总能帮助到一些人的。

废话不多说，那么马上开始吧。

欢迎关注公众号：大前端早读

起因

以前的工作模式基本是完全线上开发的，页面采取碎片化开发，页面是由前端使用freemarker模板配合后台的接口获取数据，本地写好代码后，放在线上编辑器中，创建页面，并直接使用线上地址打开，直接将代码渲染成带数据的html模板，css与js则是以分类成公共的静态文件。一开始，大家都使用这种方法模式，但有一些比较麻烦的地方，就是多人开发时，无法“多线程”开发，特别是修改样式脚本的时候，需要看修改时间与修改人，一旦两个人同时修改同一个静态文件（样式脚本文件）时，便会出现冲突。某某覆盖了某某的代码，造成不必要的时间浪费。对于现在来说确实是这么回事，但是对于当时来说，也只能如此。

本地服务器临时方案

方法是人想出来的。在当时后期一段时间，就觉得每次修改代码都需要在线上保存发布，是很费时间的，那时我们用的还是基础的html、css、js。外加上jquery，就这样做渲染。当时就下载了一个本地服务器，我记得当时叫php服务器，可以本地创建静态文件并生成直链，于是就采用这种方式，在freemarker模板中插入了这个形式。

<link rel="stylesheet" type="text/css" href="css本地直链" />

<script src="js本地直链"></script>

这样就可以直接在本地修改样式和脚本，然后直接刷新页面来看效果了，不需要反复线上保存。最后调的差不多的时候，直接一次性代码考到线上就行了。

到之后发现http-server这个npm包可以创建本地服务器，就用这个了。

使用Tampermontey插件

但是这样当然还是有缺点的，除了你本机，其他人没连同一个内网的话。本地直链资源是没办法加载到的。之后就慢慢换了新的方式：采用Tampermontey这个浏览器插件，这个插件的作用就是可以做黑科技脚本。指定一个正则网址，只要你打开的网址匹配到正则，便会在当前页面中劫持注入一段你写的脚本。这样我就想到了使用这个来做本地化开发。

这是插入脚本的方式，插入样式的方式也一样。这样你就不需要改动原代码进行调试代码了。

但尽管如此，有个问题依旧存在，那就是原代码依旧会加载出来，报错的也依旧会报错，以前的做法时，代码尽可能写成可覆盖形式。如果将整个区块的代码写成一个函数，然后后面加载的函数就可以覆盖前面的函数了，从而实现本地调试。因为这个问题因为这个方法依旧用处不是太大。

使用fiddler抓包工具代理

直到，有一次，在fiddler工具中发现了一个代理的功能。说到fiddler，我想大多数前端都或多或少使用过这个工具，可以说是非常好用的。一般来讲，对开发移动端前端页面、定位问题时用处最大，排查是否是前端问题，首先能看到后台接口返回的数据是否有问题，如果没有问题，那就要去看看是否逻辑能通了。所以大多数人还是把它当做一个抓包工具，测试数据对错来用的。实际上它还有别的功能，如这次说的数据代理。

所谓数据代理，就是访问服务器链接时，将服务器返回的数据进行拦截下来，然后将数据替换掉，这个功能是很强大的。因此我将其利用到了前端调试中。比如样式脚本代理，将服务器中的静态资源拦截下来替换为本地的资源。

如页面中加载的脚本文件为：https://www.baidu.com/1.js，而我们要修改并测试脚本，但如果直接线上修改是不太好的，比较耗时间。那么我们就可以将脚本代理到本地中，直接修改本地脚本然后刷新页面即可。

设置一下：选中AutoResponder-->Enable rules和Unmatched requests passthrough

然后点击Add Rule按钮创建代理规则

上一个框表示你要改变代理的链接，下一个框表示你的本地代码路径（可以是本地路径的，也可以是网络直链的的）

本地的可以选择这一项

save后然后访问：https://www.baidu.com/1.js

访问出来的就是你本地的代码

用这种方式。你在可以在本地修改代码，改完Ctrl+S后刷新页面就可以看到你改的效果了，是不是很方便。

这种方式很多人都知道，但是还有一部分人还是不清楚的。希望对您有所帮助。

react架构重构项目

再到之后，项目采取react的方式开始进行重构，react采取一种jsx的开发方式，页面的渲染由jsx编译为js，获取本页的数据，并将数据渲染出来，并采用多页模式。页面碎片化变成了组件化，其实也是差不多的意思。

在重构方案确定后，这个时候整个项目已经本地化了，然后慢慢将原有的页面一部分一部分变成react写法。

本地调试线上：

一般情况下本地开发过程中，可以直接使用本地方式和本地假数据。但是如果在前后端联调或上线后可能出现bug的话，很难找到错误的地方，因为上线后代码基本是压缩的。那大多数情况下可能就需要将线上的数据复制到本地中作为假数据进行操作了，这种方式一般可行，但也可以有更快的方式：

原理：

使用fiddler把所有你要调试的页面代理到你要调试的模板页面中，页面地址后面跟个你要调试的本地页面名。本页数据是异步现网来的，然后加载本地的组件。就可以做到调试线上数据，使用本地代码了

做法：

fiddler创建规则：表示只有你访问的链接的参数中带有plugin参数，就可以匹配到这个代理的模板

规则：regex:(?inx)^(http|https)(.)+(plugin)=(.)+ #Match HTTPS-delivered GIFs

本地模板：

一个空的html模板

数据使用js获取，并加载本地js，如：

let ip="10.73.155.134";//本地ip
//获取url参数值
let GetUrlQueryString=function(url,name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = url.substring(url.indexOf("?")).substr(1).match(reg);
    if(r!=null)return unescape(r[2]); return null;
}
let url=location.href;
let pluginName=GetUrlQueryString(url,"plugin");//调试的组件名
let ajaxUrl=url.replace("?plugin="+pluginName,"?").replace("&plugin="+pluginName,"");//原页面url
let t=Date.now();
$.ajax({
    url:ajaxUrl,
    type:"get",
    data:{
        t:t
    },
    success:function(data){
        if(!pluginName || pluginName==""){
            return;
        }
        let $data=$(‘<data>‘+data+‘</data>‘);
        let title=$data.find("title").text();
        let data_config=$data.find("#main").next().html();
        document.title=title;
        let css=document.createElement("link");
        css.rel="stylesheet";
        css.type="text/css";
        document.head.append(css)
        document.getElementById("data_config").append(data_config);
        let js=document.createElement("script");
        js.type="text/javascript";
        js.src="http://"+ip+":3334/pagejs/"+pluginName+".js?t="+t;
        document.body.append(js)
    },
    error:function(err){}
})

完！