由一次重构代码所想到的

事件的起因源于我大三时写过的一个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写的爽！