事件的起因源于我大三时写过的一个chrome插件：老司机的工具箱，当时因为某XX御所开启了老司机模式，导致资源下载链接被隐藏，再加上那时无意间看了一篇教程Chrome扩展及应用开发，于是性致勃勃的花了几天时间，写出了这个插件：用来显示被隐藏的下载地址和自动填写百度网盘密码。之后插件也陆陆续续迭代了几个版本，不过最后不了了之。
插件发布到如今，两年时间里，也有几千用户了，这点倒是让我挺意外的，看来世上还是绅士多吧。。。
前几天在家无事，于是就review了代码(项目地址): 两年前的代码看懂是不可能看懂的，这辈子都不能看懂，只能重构下代码这样子。 不过在重构的过程中，也不禁感叹两年的时间，前端还真的是风云变幻，当年的自己的确菜的抠脚。
前端工程化
重构时最大的区别就是工程化了。
两年前的代码，我还是停留在html页面直接引入js，css，写代码就是jQuery一把梭子的层面。
而如今，在真正写代码前，我可能需要花些时间，来配置一些诸如webpack，babel的构建、编译工具。配置的繁琐带来的是开发时的便捷，2年前没有模块化的js和css是我现在不敢想象的。
代码风格
两年前的代码到处充斥着各种全局变量和函数，随意的DOM操作和callback调用，使得面条代码让人看得更加凌乱。
而如今，我更加倾向于面向对象和函数式编程。
两年前我应该会毫不犹豫写出这样的代码：
window.addEventListener('DOMContentLoaded', function() {
function renderContainer(data) {
// 对数据进行一些加工
return newData;
}
ajax({
url: api,
type: 'GET',
dataType: 'json',
success: function(data) {
const container = document.querySelector('#container');
container.innerHTML = renderContainer(data);
}
})
const btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
// 处理事件
})
})现在我会这样写：
class Demo {
constructor() {
this.container = document.querySelector('#container');
this.btn = document.querySelector('#btn');
this.init();
}
renderTemplate(data) {
// 对数据进行一些加工
return newData;
}
init() {
this.renderContainer();
this.bindHandler();
}
async renderContainer() {
const data = await ajax({
url: api,
type: 'GET',
dataType: 'json'
});
this.container.innerHTML = this.renderTemplate(data);
}
bindHandler() {
this.btn.addEventListener('click', function() {
// 处理事件
})
}
}
window.addEventListener('DOMContentLoaded', function() {
const demo = new Demo();
})其实这种写法已经类似于React和Vue了。MVVM框架除了带来数据驱动的理念，其实也在一定程度上推动了面向对象和函数式编程的思想。
解决问题
两年前我写这个插件的时候，遇到了一个很费解的bug：就是进入网站首页，点击文章标题进入详情页面后，并不能显示隐藏的下载地址，每次都需要我手动刷新一遍页面才能成功。
当时水平有限，想了半天也不明白为啥会这样，拖着拖着就忘了。这次重构，想起了这个bug，分析了一下，其实很简单：网站采用了pjax技术，进入首页后，插件注入的js就被触发，寻找被隐藏的下载地址dom，然而这时并没有这个dom。点击标题进入详情页，这时我们需要的dom被插入了，但是由于使用了pjax，整个页面其实并没有重新加载，插件注入的js已经被执行过一次了，所以这时就无法把dom展示出来，而需要我们手动刷新，重新执行一遍注入的js。
解决方法是，利用MutationObserver监听pjax更新的dom元素，如果发现更新了dom，就再次执行js方法
还遇到了一个问题:
`【磁力链接】
magnet:?xt=urn:btih:404d1cf190660dfd301e289411cfc3185fcb2c92
【百度云】
传送门 提取码：lmys
`如何在把lmys提取出来？
当时很拙劣的使用了字符串截取：
function getPwd(str) {
var index1 = str.indexOf('提取码');
var index2 = str.indexOf('\n', index1);
if (index1 !== -1 && index2 !== -1) {
return str.slice(index1 + 4, index2).trim();
}
return '';
}现在看来，一行正则就搞定的事情：
const regPassword = /提取码.*([a-zA-Z0-9]{4})/;总结
废话了那么多，其实就是想说，每个人在每个阶段都会受限于当时的技术水平和眼界格局，而写出在当时自认为是最好的代码。
如果你最近觉得自己水平一直上不去，技术遇到了瓶颈，这时不妨---
拔掉网线，关上电脑，读几页《Angular从入门到放弃》，出门去漫展走走，要么去女装，天黑了约几个好久不见的肥宅找个地方喝点快乐水、聊聊纸片老婆，随便做些什么。一天下来，你就会发现，还是jQuery写的爽！