模組化那些事02

轉自：https://www.cnblogs.com/huiguo/p/7967189.html

所謂的模組化程式設計就是封裝細節，提供使用介面，彼此之間互不影響，每個模組都是相互獨立，實現某一特定的功能。如果其他模組想呼叫的時候，可以暴露我們所希望對外的公開的方法與資料。

函式寫法

function f1(){ 
        var value=1； 
　　　　//...  
}  

function f2(){
        var value=2；   
　　　　//...  
}

這裡定義了f1跟f2，每個函式相當於一個模組，f1跟f2是相互獨立的，不能訪問到對方里面的區域性內容value。這種寫法定義了全域性變數f1、f2汙染了全域性環境會導致命名衝突。

物件寫法

var myModule= new Object({
　　　　value : 0,
　　　　f1 : function (){
　　　　　　//...
　　　　},

　　　　f2 : function (){
　　　　　　//...
　　　　}
});

把函式f1()和f2()，封裝在myModule物件裡。使用的時候，就是呼叫這個物件的屬性即可：myModule.f1()。這樣的寫法會暴露所有模組成員，內部狀態可以被外部改寫如：myModule.value = 1，會改變myModule內部的屬性值。同時這種辦法只能一定程式上減少了命名衝突的問題，不能完全避免命名衝突。

立即執行函式寫法

匿名閉包寫法

(function () { 
    // ... 
}()); 

javascript中沒有私有作用域的概念，根據javascript函式作用域鏈的特性，使用這種寫法可以模仿一個私有作用域。在閉包中，可以定義私有變數和函式，外部無法訪問它們，從而做到了私有成員的隱藏和隔離，俗稱"匿名包裹器"或"名稱空間"。

全域性引入寫法

(function (a) { 
     a.a3 = function () {
　　　　　　//...
　　　};
    // … 
}(a)); 

將a物件作為引數傳入，在函式體內對這個物件進行操作。這樣做除了保證模組的獨立性，還使得模組之間的依賴關係變得明顯。現在很多類庫裡都有這種使用方式，比如jQuery原始碼。

模組匯出寫法

var myModule = (function(){

　　　　var value = 0;
　　　　var f1 = function(){
　　　　　　//...
　　　　};

　　　　var f2 = function(){
　　　　　　//...
　　　　};

　　　　return {
          value: value,
　　　　　　f2 : f2
　　　　};

})();

這裡，我們聲明瞭一個全域性的模組叫myModule，它包含二個屬性，一個成員變數value和一個成員方法f1。除此之外，它們還使用匿名的閉包維護了私有內部狀態，我們也可以通過按需傳入外部變數。

擴充套件模式寫法

var myModule = (function (a) { 

       var value =a.value;
　　　　var f1 = function(){
　　　　　　//...
　　　　};

　　　　var f2 = function(){
　　　　　　//...
　　　　};

　　　　return {
          value: value,
　　　　　　f2 : f2
　　　　};

}(a));

這裡，我們在閉包中定義私有變數和函式，外部無法訪問它們，做到了私有成員的隱藏和隔離。將某物件作為引數傳入，在函式體內對該物件進行操作，然後返回物件或函式。由此，可以做到把依賴項通過引數的形式注入進來在內部使用注入的屬性，並且可以暴露我們所希望對外的公開的方法與資料。這就是模組化程式設計的基礎思想。

在此思想之下，javaScript模組化程式設計開始盛行，大牛們開始進行各式各樣的封裝打包，從而產出一系列的模組化規範、模組化載入器。上面的方法中，a必須在模組myModule之前定義，如果a依賴項自身是一個大的模組，比如一個庫，我們如何做到在myModule之前定義載入a，然後在myModule中成功地引用a呢？模組化載入器便能幫我們解決這個問題。

下一篇我們開始介紹模組化規範的先驅-------CommonJS規範；