淺談前端的模塊化

freewolf 發(fā)布于2019-08-20 18:17 / 2701人閱讀

摘要：關(guān)于模塊化的一點想法對于模塊化，我還是想說明一下，模塊化重要的是思想，而不是實現(xiàn)。而且這樣的模塊，復(fù)用基本是零。

沒有模塊化之前，我們是怎么開發(fā)的

剛剛從業(yè)那會，公司是沒用模塊化的，那代碼是怎么組織的呢？首先有一個common.js，這里面放的是一些公用的東西，比如：用戶的登錄注冊、工具類、經(jīng)常用到的全局變量、還有一些常用的函數(shù)；還有一個head.js，這里面放的是一些網(wǎng)站頭部的一些東西，比如顯示用戶頭像、Hover菜單欄的效果等等；還有一個roombase.js，因為有不同的房間，不同房間之前還有一些公用的東西，這些公用的東西就會放到這里面；剩下的功能呢，就放到一個叫room.js，這里面放的是整個系統(tǒng)的全部業(yè)務(wù)邏輯，所有點擊事件、Hover事件、彈窗、播放等等功能。于是，我們引用的時候，就會是這樣

因為是逐層依賴，所以引用的順序也是這樣的。

這樣的結(jié)構(gòu)會出現(xiàn)哪些問題？

剛開始接手的時候，感覺不出問題，隨著業(yè)務(wù)的開發(fā)，問題也就越來越明顯了

對于一個HTTP請求來講，要經(jīng)過很多步驟（域名解析、http的三次握手四次告別、遠程服務(wù)器下載文件。。。）才能下載一個文件，這樣文件越多，消耗的無關(guān)時間就越多，頁面要等所有js文件加載、渲染完成，才能顯示出來。這樣文件越多，頁面加載時間就越長。

人來人往，并不是所有的人對整個系統(tǒng)的業(yè)務(wù)代碼都熟悉，這樣就出現(xiàn)一個問題，當(dāng)某一個變量或者自己找不到時，就會自己實現(xiàn)一個，而且這些變量或者函數(shù)，都是全局的，這樣時間長了以后，就是會出現(xiàn)很多莫名其妙的東西，而且所有的變量都綁在window上，導(dǎo)致window的變量越來越多

因為是全局變量嘛，稍不留神，就有可能被覆蓋的風(fēng)險，比如：之前有一個變量叫isLogin，也不知道這個變量是誰起的，false表示已登錄，true表示未登錄，一直都這么用倒是也習(xí)慣了，新來一個同學(xué)，感覺非常不爽，就覆蓋了，也命名個變量isLogin，true表示已登錄，false表示未登錄，結(jié)果可想而知。

業(yè)務(wù)分層過于抽象。新來一個業(yè)務(wù)，我感覺應(yīng)該放到roombase.js里面合適，他感覺放到room.js里面合適，別人可能感覺放到common.js里面合適，每個人理解不一樣，放的位置也不一樣，也沒辦法認定誰對誰錯，反正最終都掛到window下面，都能訪問。這玩意就像代碼規(guī)范，單靠一個說明文檔，靠自覺，永遠也統(tǒng)一不了，必須得強制，比如現(xiàn)在就是ESLint。

代碼越來越冗余。比如common.js里面有一個方法要滿足一個業(yè)務(wù)，但是這個common.js10個頁面都引入，你敢改嗎？萬一你改了，當(dāng)前頁面好使了，其他9個頁面報錯了，不但不記功，反而會被罵一頓。對于業(yè)務(wù)維護來說，風(fēng)險小才是王道，那可咋辦？當(dāng)然是拷貝出來一份了，然后在新方法里面改。比如有一個checkLogin的方法，改了萬一出問題怎么辦，于是我拷貝一份，改個名，叫checkUserLogin，新業(yè)務(wù)調(diào)用這個方法，這樣即保證新業(yè)務(wù)順利上線，又能保持老業(yè)務(wù)正常運行。哈哈，是不是該為了機智點個贊呢。這樣時間越來越長，相同的代碼也越來越多，也就越冗余。

不利于協(xié)作開發(fā)。平時開發(fā)的各項功能，90%都在room.js里面做，我們組有8個人，8個人同時修改一個js文件，用膝蓋想想都知道有啥問題吧。

關(guān)于模塊化的一點想法

對于模塊化，我還是想說明一下，模塊化重要的是思想，而不是實現(xiàn)。所以不管是requirejs還是seajs都是對模塊化思想的實現(xiàn)，說白了就是模塊化實現(xiàn)的工具，對于工具來說，能滿足你的需求，就是好工具，沒有太大的必要進行糾結(jié)到底選哪個。兩者使用范圍都非常廣泛，技術(shù)上都比較成熟，肯定都能很好的滿足你需求。我們選用的是requirejs，關(guān)于requirejs的語法，請參見官網(wǎng)。

模塊化的一些好處

模塊化之后，解決了上面提到的這些問題

更加細分，login相關(guān)可以拆成一個模塊，user相關(guān)可以拆成一個模塊，websocket也可以拆成一個模塊，用的時候["user", "login", "websocket"]這樣更靈活，耦合性越低

多人開發(fā)多業(yè)務(wù)，效率更高

作用域確定，不會再出現(xiàn)相互覆蓋的情況

使用gulp可以把所有文件進行合并，這樣頁面只要引用一個js文件即可，加載時間會變短

好像還有問題

使用模塊化之后，還有一個比較難解決的問題：js文件中有大量的DOM操作。因為我們用jQuery，不可避免的會出現(xiàn)這樣的問題，這種情況有一個比較專業(yè)的名詞叫：數(shù)據(jù)和顯示不分離。文件里面會處處的出現(xiàn)這樣的代碼：$(".user").eq(0).append("")。這樣寫沒問題，但對于我們經(jīng)常改版的網(wǎng)站來說，簡直了。一次改版，80%以上的代碼要重寫你怕不怕，而且還非常擔(dān)心哪塊漏改了。而且這樣的模塊，復(fù)用基本是零。你想啊，一塊功能，HTML里面有一部分，js里面拼接一部分，css樣式在別外一個文件里面，想想看，是不是復(fù)用的難度非常大？

模塊化解決方案

其實比較好的解決上面的問題，就是使用vue的單模板文件的形式，一個.vue文件，里面即有js、html、css，而且數(shù)據(jù)和顯示是分離的，能直接復(fù)用，這樣才是一個真正的模塊。具體怎么使用，請參見Vue的官網(wǎng)，介紹詳細；生產(chǎn)環(huán)境的webpack+vue的配置，請用力點擊我