由一次重构代码所想到的

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