JS設計模式之MODULE（模組）模式

9.2module（模組）模式

通常能夠幫助我們清晰地分離和組織專案中的**單元

js中實現模組的方法

1》物件字面量表示法

2》module模式

3》amd模式

4》commonjs模組

5》ecmascript harmony模組

module模式某種程度上是基於物件的字面量

9.2.1物件字面量

在物件字面量表示法中，乙個物件被描述為一組包含在大括號{}中、以逗號分隔的name/value對。物件內的名稱可以是字串或識別符號，後面跟著乙個冒號。物件中最後的乙個name/value對的後面不用加逗號，如果加逗號將會導致出錯。

var myobjectliteral=

};物件字面量不需要使用new運算子進行例項化，但不能用在乙個語句的開頭，因為開始的可能被解讀為乙個塊的開始。在物件的外部，新成員可以使用如下賦值語句新增在字面量上，如：

mymodule.property="some value";

使用物件字面量有助於封裝和組織**，module模式仍然使用物件字面量，但只是作為乙個作用域函式的返回值。

var mymodule=,
//基本方法
mymethod:function
(), 
//根據當前配置輸出資訊
mymethod2:function
(), 
//重寫當前配置
mymethod3:function
(newconfig)}};
mymodule.mymethod();
mymodule.mymethod2();
//列印出來的是enabled，沒有加上前面的字串
mymodule.mymethod3();

9.2.2module(模組)模式

module模式最初被定義為一種在傳統軟體工程中為類提供私有和公有封裝的方法。

在js中，module模式用於進一步模擬類的概念，通過這種方式，能夠使乙個單獨的物件用於公有/私有方法和變數，從而遮蔽來自全域性作用域的特殊部分。產生的結果是：函式名與在頁面上其他指令碼定義的函式衝突的可能性降低。

模組模式的模板

var mynamespace=(function
() 
return
};})();

9.2.2.1 私有

module模式使用閉包封裝「私有」狀態和組織。它提供了一種包裝混合公有/私有方法和變數的方式，防止其洩露至全域性作用域，並與別的開發人員的介面發生衝突。通過該模式，只需返回乙個公有api，而其他的一切則都維持在私有閉包裡。

這為我們提供了乙個遮蔽處理底層時間邏輯的整潔解決方案，同時只暴露乙個介面**用程式的其他部分使用。該模式除了返回乙個物件而並不是函式之外，非常類似於乙個立即呼叫的函式表示式。

應該指出的是，在js中沒有正真意義上的「私有」，因為js沒有訪問修飾符，因此我們使用函式作用域來模擬這個概念。在module模式內：閉包宣告的變數和方法只在該模式內部可用。但在返回物件上定義的變數和方法，則對外部使用者都是可用的。

var basketmodule=(function
() 
function
dosomethingelseprivate()
//返回乙個暴露出的公有物件
return
, 
//獲取購物車裡的item數
getitemcount:function
(), 
//私有函式的公有形式別名,
//dosomething:dosomethingprivate自動呼叫dosomethingprivate函式
dosomething:dosomethingprivate,
//獲取購物車裡所有item的**總值
gettotal:function
() 
return
total;}};
})();
//basketmodule返回了乙個擁有公用api的物件
basketmodule.additem();
basketmodule.additem();
console.log(basketmodule.getitemcount());
console.log(basketmodule.gettotal());
//會列印乙個private和乙個undefined，原因不明
console.log(basketmodule.dosomething());
console.log(basketmodule.basket);

basket模組的優點：

1》只有模組自身才能享有擁有私有函式的自由，因為它只會暴露我們輸出的api。

2》鑑於函式往往已宣告並命名，在試圖找到哪些函式丟擲異常時，這將使得在偵錯程式中顯示呼叫堆疊變得更容易。（沒感覺）

3》根據環境，還可以讓我們返回不同的函式

9.2.2.3 示例

/*
* * counter的存在被侷限在模組的閉包內，唯一能訪問其作用域的**是return中的2個函式
*/var testmodule=(function
(), resetcounter:
function
() };
})();
//增加計數器
testmodule.incrementcounter();
//檢查並重置計數器
testmodule.resetcounter();

//
引入混入
var mymodule=(function
(jq,_)
return
};//引入jquery和underscore
})(jquery,_);

JS設計模式之MODULE（模組）模式

JS設計模式三模組模式

詳解Python語法之模組Module

JS設計模式之組合模式

JS設計模式之MODULE（模組）模式

JS設計模式三 模組模式

詳解Python語法之模組Module

JS設計模式之組合模式

相關推薦

JS設計模式三模組模式