成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

kycool / 4477人閱讀

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

事件的起因源于我大三時(shí)寫(xiě)過(guò)的一個(gè)chrome插件：老司機(jī)的工具箱，當(dāng)時(shí)因?yàn)槟砐X御所開(kāi)啟了老司機(jī)模式，導(dǎo)致資源下載鏈接被隱藏，再加上那時(shí)無(wú)意間看了一篇教程Chrome擴(kuò)展及應(yīng)用開(kāi)發(fā)，于是性致勃勃的花了幾天時(shí)間，寫(xiě)出了這個(gè)插件：用來(lái)顯示被隱藏的下載地址和自動(dòng)填寫(xiě)百度網(wǎng)盤(pán)密碼。之后插件也陸陸續(xù)續(xù)迭代了幾個(gè)版本，不過(guò)最后不了了之。

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

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

前端工程化

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

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

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

代碼風(fēng)格

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

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

兩年前我應(yīng)該會(huì)毫不猶豫寫(xiě)出這樣的代碼：

window.addEventListener("DOMContentLoaded", function() {
    function renderContainer(data) {
        // 對(duì)數(shù)據(jù)進(jìn)行一些加工
        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)在我會(huì)這樣寫(xiě)：

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

        this.init();
    }

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

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

解決問(wèn)題

兩年前我寫(xiě)這個(gè)插件的時(shí)候，遇到了一個(gè)很費(fèi)解的bug：就是進(jìn)入網(wǎng)站首頁(yè)，點(diǎn)擊文章標(biāo)題進(jìn)入詳情頁(yè)面后，并不能顯示隱藏的下載地址，每次都需要我手動(dòng)刷新一遍頁(yè)面才能成功。

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

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

還遇到了一個(gè)問(wèn)題:

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

【百度云】
傳送門(mén) 提取碼：lmys
`

如何在把lmys提取出來(lái)？

當(dāng)時(shí)很拙劣的使用了字符串截取：

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)在看來(lái)，一行正則就搞定的事情：

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

廢話了那么多，其實(shí)就是想說(shuō)，每個(gè)人在每個(gè)階段都會(huì)受限于當(dāng)時(shí)的技術(shù)水平和眼界格局，而寫(xiě)出在當(dāng)時(shí)自認(rèn)為是最好的代碼。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97582.html

相關(guān)文章

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

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

    ningwang 評(píng)論0 收藏0

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

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

    godiscoder 評(píng)論0 收藏0

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

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

    Shihira 評(píng)論0 收藏0

  • 讀懂 SOLID 的「單一職責(zé)」原則

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

    Magicer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

kycool

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<