由一次重构代码所想到的

7

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

你可能感兴趣的

3Sharp · 2018年09月10日

最后一段点明了本文的主要思想

+1 回复

小WY · 2018年09月10日

认认真真看到最后。。。

回复

_chaoing · 2018年09月14日

老夫还是靠的一手jq打天下是吧,哈哈哈

回复

载入中...