由一次重構代碼所想到的

事件的原由源於我大三時寫過的一個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寫的爽！