什麼是模塊化？模塊化開發的好處

模塊化開發簡述

什麼是模塊化：指文件的組織、管理、使用的方式。即把一個大的文件拆分紅幾個小的文件，他們之間相互引用、依賴。

都說模塊化開發爲前端發展帶來了巨大的進步，然而不熟悉的人看着也是兩眼一懵，那其實這究竟是什麼？好處在哪？我來講說本身的看法吧。

1. 模塊化和傳統開發的區別
實話講，其實在我看來，二者的開發是同樣的，除了方式不同，達到的效果並沒兩樣。
看着扯淡，但實際能夠想一下，現流行的模塊化開發主要有兩種方式：

依賴加載。這種方式是最普遍的，像requirejs，sea.js等，除了 編寫規範 不同，實際都是經過相關require api把模塊chunk文件拿回來，當加載完成以後再運行邏輯代碼。
依賴打包。經典表明就是webpack，其實就是寫代碼的時候分開模塊，但打包的時候按依賴關係找到各個模塊，最後打包到同一個文件上，並給每一個chunk標識id，運行邏輯代碼時將模塊引用指向該id，從而實現模塊化。

而傳統的開發方式是在頁面上經過腳本標籤引入，等全部腳本資源加載完成後再運行邏輯代碼。這樣一對比，是否是發現效果實際上是同樣的，我把不一樣腳本分開寫，也是能夠作到相似模塊化的效果？

那麼重點來了，模塊化的優點在哪？

別急着回答，先思考一下，而後帶着你的想法繼續看下去。

 

先回想一下，傳統開發的痛點在哪。

首先，如上所述，傳統的開發方式須要等待全部腳本資源加載完成。這個問題最大的弊端就是頁面要等待，由於資源加載是同步的。你的頁面會出現短暫的空白期，引入的腳本越多，時間越長，若是某一腳本加載失敗，也可能直接掛掉。

模塊化的代碼則能夠很好的處理這個問題。除了模塊化支持的腳本必須加載進來之外，其餘腳本均可以異步請求，不須要頁面等待，能夠加速渲染出頁面。requirejs，sea.js等也會作好加載重試和模塊緩存的處理，確保全部模塊運行良好。

全部資源加載的時間不會由於模塊化而加速，可是模塊化能加速渲染，這是優點1。

固然webpack是特例，它和nodejs同樣用 commonjs 規範，爲了達到目的，所有腳本打包到一塊兒再運行，看着和上面觀點相悖，不過如今帶寬足夠，相對而言仍是足夠快的，也能減小多腳本加載出錯的風險。

接着上面的觀點講，拋開帶寬速度來說，既然網速夠快，那模塊化還有什麼？不妨回想一下，傳統開發時最煩的是什麼？無非3點

命名空間。早期爲了不命名衝突，大衆作法是用一個變量做爲命名空間作隔離，長期開發過程當中沒人能記住這個變量是否衝突，它的命名規範是什麼，治標不治本。
而模塊化的出現消除了這點。一個模塊內的命名隨本身起，和外界不會衝突，對外的永遠是你exports出來的內容。若是模塊內出現命名衝突，這說明了你的命名水平過低…..

好吧，是模塊顆粒不夠小，還能夠繼續分割出模塊~

代碼重用。其實這點和傳統開發並沒有兩樣，都是把可複用代碼抽取出function（再通用點會抽象出類，也就是構造函數），獨立文件。但模塊化的好處一樣能夠規避命名空間的問題，沒必要設置變量污染到全局。通常模塊化都有緩存機制，在二次調用時無需再解析，直接獲取到緩存模塊內容。

按傳統開發來處理，忽略以上問題，但也耐不住文件太多，引入和管理麻煩。除了amd規範須要依賴前置，咱們還能夠用cmd規範來寫模塊依賴，想用什麼require什麼，不用再一個個引入js，看着也舒服。並且如今的模塊化工具基本都實現了多規範混搭，想怎麼寫就怎麼寫，只要注意組內規範就行。

 

此外就是 管理問題。

小公司或我的開發，模塊化能讓本身思路更爲清晰，下降代碼耦合，優秀的模塊能帶來代碼質量質的飛躍，標準的模塊應該是 「分工明細，職責單一，不牽扯需求邏輯」 ，它就應該是個萬能的螺絲，不須要能夠修改，哪裏須要用哪裏。

而中型企業和大團隊則很常常會遇到團隊協做開發，除了會用svn/git等工具管理，各類需求有不一樣的人負責處理。模塊化對團隊開發會起到協同做用，公共模塊除了避免重複造輪子的痛苦外，也避免了邏輯混淆。