JS模組化開發

模組化開發有點像分工合作，比方說乙個手機，它是由一系列的功能模組組合在一起的，比如攝像頭，螢幕，cpu，作業系統，而每個功能模組可能是由不同公司生產的，比如從a公司買的處理器，b公司做的攝像頭，c公司加工的螢幕。

網頁也是這樣，當**量越來越大，功能越來越複雜的時候，我們就很難乙個**中完成所有的工作，所以需要將不同的功能模組封裝外包出去，或者直接使用別人寫好的模組。

而像這種通過特定的方式實現所需模組的劃分，管理和載入的機制就叫做模組化開發。

所以模組化開發的最大的好處就是協同和**復用。如果說這兩個好處對你而言沒有太大的感受，那麼下面這些問題可能就是你的親身經歷。1.大量的檔案引入；2.**寫的多了，經常會有命名衝突；3.類似的功能寫了不下800遍；4.經常搞亂檔案依賴

1.全域性函式

在最早的時候，我們將一些重複使用的**封裝成函式，所以乙個函式就是乙個模組。比如最簡單的乙個加法運算函式。

function
add(a,b)

這是一種約定形式的模組，存在命名衝突，可維護性不高等問題。僅僅從**角度而言，沒有任何模組的概念。

2.物件

為了解決全域性函式的這些問題，可以把函式封裝成物件的屬性，把這個物件當成乙個模組。

var calculator = 
}

從**層面來說，已經有個模組的感覺。但是也有缺點，還是會汙染全域性（但因為乙個模組只會暴露乙個變數，所以是可以接受的），另乙個缺點就是這樣的寫法會暴露所有模組成員，沒有私有空間，內部狀態可以被外部改寫。

比如我寫了乙個管理員的模組，模組內部需要對密碼進行加密，那我這個加密演算法肯定不希望被別人知道。

3.自執行函式

js中沒有塊級作用域，它的作用域是基於函式的，所以我們可以把模組封裝在乙個自執行函式裡面，如果需要暴露就直接return出去，沒有return的均為私有方法。

var calculator = (function
()     function
add(a,b) 
// 暴露函式
return 
})

相比與之前的方法，自執行函式有了很大的進步，但是當我們想要維護這個模組的時候卻不是那麼方便。比如我想新增乙個計算變數相乘的方法，就只能去修改原來的模組。

4.自執行函式高階版

(function
(calculator)
calculator.add = function(a,b)
// 重新掛載
window.calculator = calculator;
})(window.calculator || {})

現在我們需要新增乙個方法就很很簡單，而且不用修改以前的模組。

(function
(calculator)
)(window.calculator || {})

這種寫法已經比較完善了，但是如果有全域性變數，而模組內又想用怎麼辦？比如說jquery。當然直接使用也是可以的，但是乙個模組最好是乙個高內聚低耦合的乙個狀態。也就是說，模組內部高度關聯，模組與外部函式盡量避免直接互動。

所以，我們還有乙個終極版本來解決全域性依賴，我們把全域性變數也通過引數傳遞進去。

(function
(calculator,$)
calculator.add = function(a,b)
// 重新掛載
window.calculator = calculator;
})(window.calculator || {}, jquery)

以上是傳統的js模組化的方法，但其實es6已經提供了模組的方法。

簡單介紹一下，es6模組功能主要由兩個命令構成：export和import。export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。

function
add(a,b) 
export 
import  from './calculator.js';

大家有興趣可以看一下阮一峰的免費電子書，裡面有詳細的介紹（

es6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單。如果**支援es6那麼完全可以用es6的模組語法就行，

但是如果**不支援，那麼我們可能就得尋求一些第三方軟體的支援。