国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

由一次重構(gòu)代碼所想到的

kycool / 4160人閱讀

摘要：前端工程化重構(gòu)時最大的區(qū)別就是工程化了。這次重構(gòu)，想起了這個，分析了一下，其實很簡單網(wǎng)站采用了技術(shù)，進入首頁后，插件注入的就被觸發(fā)，尋找被隱藏的下載地址，然而這時并沒有這個。

事件的起因源于我大三時寫過的一個chrome插件：老司機的工具箱，當時因為某XX御所開啟了老司機模式，導致資源下載鏈接被隱藏，再加上那時無意間看了一篇教程Chrome擴展及應用開發(fā)，于是性致勃勃的花了幾天時間，寫出了這個插件：用來顯示被隱藏的下載地址和自動填寫百度網(wǎng)盤密碼。之后插件也陸陸續(xù)續(xù)迭代了幾個版本，不過最后不了了之。

插件發(fā)布到如今，兩年時間里，也有幾千用戶了，這點倒是讓我挺意外的，看來世上還是紳士多吧。。。

前幾天在家無事，于是就review了代碼(項目地址): 兩年前的代碼看懂是不可能看懂的，這輩子都不能看懂，只能重構(gòu)下代碼這樣子。 不過在重構(gòu)的過程中，也不禁感嘆兩年的時間，前端還真的是風云變幻，當年的自己的確菜的摳腳。

前端工程化

重構(gòu)時最大的區(qū)別就是工程化了。

兩年前的代碼，我還是停留在html頁面直接引入js，css，寫代碼就是jQuery一把梭子的層面。

而如今，在真正寫代碼前，我可能需要花些時間，來配置一些諸如webpack，babel的構(gòu)建、編譯工具。配置的繁瑣帶來的是開發(fā)時的便捷，2年前沒有模塊化的js和css是我現(xiàn)在不敢想象的。

代碼風格

兩年前的代碼到處充斥著各種全局變量和函數(shù)，隨意的DOM操作和callback調(diào)用，使得面條代碼讓人看得更加凌亂。

而如今，我更加傾向于面向?qū)ο蠛秃瘮?shù)式編程。

兩年前我應該會毫不猶豫寫出這樣的代碼：

window.addEventListener("DOMContentLoaded", function() {
    function renderContainer(data) {
        // 對數(shù)據(jù)進行一些加工
        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() {
        // 處理事件
    })
})

現(xiàn)在我會這樣寫：

class Demo {
    constructor() {
        this.container = document.querySelector("#container");
        this.btn = document.querySelector("#btn");

        this.init();
    }

    renderTemplate(data) {
        // 對數(shù)據(jù)進行一些加工
        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();
})

其實這種寫法已經(jīng)類似于React和Vue了。MVVM框架除了帶來數(shù)據(jù)驅(qū)動的理念，其實也在一定程度上推動了面向?qū)ο蠛秃瘮?shù)式編程的思想。

解決問題

兩年前我寫這個插件的時候，遇到了一個很費解的bug：就是進入網(wǎng)站首頁，點擊文章標題進入詳情頁面后，并不能顯示隱藏的下載地址，每次都需要我手動刷新一遍頁面才能成功。

當時水平有限，想了半天也不明白為啥會這樣，拖著拖著就忘了。這次重構(gòu)，想起了這個bug，分析了一下，其實很簡單：網(wǎng)站采用了pjax技術(shù)，進入首頁后，插件注入的js就被觸發(fā)，尋找被隱藏的下載地址dom，然而這時并沒有這個dom。點擊標題進入詳情頁，這時我們需要的dom被插入了，但是由于使用了pjax，整個頁面其實并沒有重新加載，插件注入的js已經(jīng)被執(zhí)行過一次了，所以這時就無法把dom展示出來，而需要我們手動刷新，重新執(zhí)行一遍注入的js。

解決方法是，利用MutationObserver監(jiān)聽pjax更新的dom元素，如果發(fā)現(xiàn)更新了dom，就再次執(zhí)行js方法

還遇到了一個問題:

`【磁力鏈接】
magnet:?xt=urn:btih:404d1cf190660dfd301e289411cfc3185fcb2c92

【百度云】
傳送門 提取碼：lmys
`

如何在把lmys提取出來？

當時很拙劣的使用了字符串截?。?/p> 

function getPwd(str) {
    var index1 = str.indexOf("提取碼");
    var index2 = str.indexOf("
", index1);
    if (index1 !== -1 && index2 !== -1) {
        return str.slice(index1 + 4, index2).trim();
    }
    return "";
}

現(xiàn)在看來，一行正則就搞定的事情：

const regPassword = /提取碼.*([a-zA-Z0-9]{4})/;
總結(jié)

廢話了那么多，其實就是想說，每個人在每個階段都會受限于當時的技術(shù)水平和眼界格局，而寫出在當時自認為是最好的代碼。

如果你最近覺得自己水平一直上不去，技術(shù)遇到了瓶頸，這時不妨---

拔掉網(wǎng)線，關(guān)上電腦，讀幾頁《Angular從入門到放棄》，出門去漫展走走，要么去女裝，天黑了約幾個好久不見的肥宅找個地方喝點快樂水、聊聊紙片老婆，隨便做些什么。一天下來，你就會發(fā)現(xiàn)，還是jQuery寫的爽！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97582.html

相關(guān)文章

  • js數(shù)據(jù)結(jié)構(gòu)-二叉樹（二叉堆）

    摘要：二叉樹二叉樹是一種樹形結(jié)構(gòu)，它的特點是每個節(jié)點最多只有兩個分支節(jié)點，一棵二叉樹通常由根節(jié)點，分支節(jié)點，葉子節(jié)點組成。 二叉樹 二叉樹(Binary Tree)是一種樹形結(jié)構(gòu)，它的特點是每個節(jié)點最多只有兩個分支節(jié)點，一棵二叉樹通常由根節(jié)點，分支節(jié)點，葉子節(jié)點組成。而每個分支節(jié)點也常常被稱作為一棵子樹。 showImg(https://segmentfault.com/img/bVbmEd...

    ningwang 評論0 收藏0

  • 第2章：軟件構(gòu)建的過程和工具 2.2軟件構(gòu)建的過程，系統(tǒng)和工具

    摘要：建模語言建模語言是可用于表達信息或知識或系統(tǒng)的任何人造語言，該結(jié)構(gòu)由一組一致的規(guī)則定義，目標是可視化，推理，驗證和傳達系統(tǒng)設計。將這些文件安排到不同的地方稱為源代碼樹。源代碼樹的結(jié)構(gòu)通常反映了軟件的體系結(jié)構(gòu)。 大綱 軟件構(gòu)建的一般過程： 編程/重構(gòu) 審查和靜態(tài)代碼分析 調(diào)試（傾倒和記錄）和測試 動態(tài)代碼分析/分析 軟件構(gòu)建的狹義過程（Build）： 構(gòu)建系統(tǒng)：組件和過程 構(gòu)建變體...

    godiscoder 評論0 收藏0

  • 三年前舊代碼的重構(gòu)、總結(jié)與反思

    摘要：最近在維護一個三年前的舊代碼，用的是框架。單元測試和語言并發(fā)控制實際上是個蛋疼的問題，夸張一點說，當時的并不能特別輕松地實現(xiàn)并發(fā)，甚至不能實現(xiàn)并發(fā)。語言的功能之一就是自帶單元測試。用語言之前，我的習慣是不寫單元測試。 最近在維護一個三年前的舊代碼，用的是laravel框架。 從某些方面來講，這個代碼算是比較標準為了實現(xiàn)在規(guī)定的時間內(nèi)完成相關(guān)功能，同時程序員水平不高、經(jīng)過大量優(yōu)化之后，變...

    Shihira 評論0 收藏0

  • 讀懂 SOLID 的「單一職責」原則

    摘要：同時，在方法命名上也投入一精力，盡可能地使方法名保持簡單，它將幫助你在重構(gòu)代碼時，更好的達到單一職責。 這是理解SOLID原則中，關(guān)于單一職責原則如何幫助我們編寫低耦合和高內(nèi)聚的第二篇文章。 單一職責原則是什么 之前的第一篇文章闡述了依賴倒置原則（DIP）能夠使我們編寫的代碼變得低耦合，同時具有很好的可測試性，接下來我們來簡單了解下單一職責原則的基本概念： Every module o...

    Magicer 評論0 收藏0

發(fā)表評論

0條評論

kycool

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<