module模式是一個比較流行的設計模式，它可以透過大括號封裝私有的變量，方法，狀態的，透過包裝這些內容，一般全局的物件不能直接訪問，在這個設計模式裡，只回傳一個API，其它的內容全部被封裝成私有的了。
另外，這個模式和自執行的函數表達式比較相似，唯一的差異是module回傳的是對象，而自執行函數表達式回傳的是function。
眾所周知， JavaScript不想其它語言一樣有存取修飾符，不能為每個欄位或方法宣告private,public修飾符，那這個模式我們是如何實現的呢？那就是return一個對象，裡麵包括一些公開的方法，這些方法有能力去呼叫內部的對象。
看一下，下面的程式碼，這段程式碼是一個自執行程式碼，宣告裡包含了一個全域的物件basketModule， basket數組是一個私有的，所以你的整個程式是不能存取這個私有數組的，同時我們return了一個對象，其內包含了3個方法（例如addItem,getItemCount,getTotal)，這3個方法可以存取私有的basket數組。
var basketModule = (function() {
var basket = []; //private
return { //exposed to public
addItem: function(values) {
basket.push(values);
},
getItemCount: function() {
return basket.length;
},
getTotal: function(){
var q = this.getItemCount(),p=0;
while(q--){
p+= basket[q].price;
}
return p;
}
}
}());同時注意，我們return的物件直接賦值給了basketModule，所以我們可以像下面一樣使用：
//basketModule is an object with properties which can also be methods
basketModule.addItem({item:'bread',price:0.5});
basketModule.addItem({item:'butter',price:0.3});
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());
//however, the following will not work:
console.log(basketModule.basket);// (undefined as not inside the returned object)
console.log(basket); //(only exists within the scope of the closure)那在各個流行的類別庫（如Dojo, jQuery)裡是如何來做呢？
Dojo
Dojo試圖使用dojo.declare來提供class風格的宣告方式，我們可以利用它來實現Module模式，例如如果你想再store命名空間下宣告basket對象，那麼可以這麼做：
//traditional way
var store = window.store || {};
store.basket = store.basket || {};
//using dojo.setObject
dojo.setObject("store.basket.object", (function() {
var basket = [];
function privateMethod() {
console.log(basket);
}
return {
publicMethod: function(){
privateMethod();
}
};
}()));結合dojo.provide一起來使用，非常強大。
YUI
下面的程式碼是YUI原始的實作方式：
##
YAHOO.store.basket = function () {
//"private" variables:
var myPrivateVar = "I can be accessed only within YAHOO.store.basket .";
//"private" method:
var myPrivateMethod = function () {
YAHOO.log("I can be accessed only from within YAHOO.store.basket");
}
return {
myPublicProperty: "I'm a public property.",
myPublicMethod: function () {
YAHOO.log("I'm a public method.");
//Within basket, I can access "private" vars and methods:
YAHOO.log(myPrivateVar);
YAHOO.log(myPrivateMethod());
//The native scope of myPublicMethod is store so we can
//access public members using "this":
YAHOO.log(this.myPublicProperty);
}
};
} ();jQuery
jQuery裡有很多Module模式的實現，我們來看一個不同的例子，一個library函數宣告了一個新的library，然後創建該library的時候，在document.ready裡自動執行init方法。function library(module) {
$(function() {
if (module.init) {
module.init();
}
});
return module;
}
var myLibrary = library(function() {
return {
init: function() {
/*implementation*/
}
};
}());物件自面量
var myModule = {
myProperty: 'someValue',
//object literals can contain properties and methods.
//here, another object is defined for configuration
//purposes:
myConfig: {
useCaching: true,
language: 'en'
},
//a very basic method
myMethod: function () {
console.log('I can haz functionality?');
},
//output a value based on current configuration
myMethod2: function () {
console.log('Caching is:' + (this.myConfig.useCaching) ? 'enabled' : 'disabled');
},
//override the current configuration
myMethod3: function (newConfig) {
if (typeof newConfig == 'object') {
this.myConfig = newConfig;
console.log(this.myConfig.language);
}
}
};
myModule.myMethod(); //I can haz functionality
myModule.myMethod2(); //outputs enabled
myModule.myMethod3({ language: 'fr', useCaching: false }); //frCommonJS
/*
Example of achieving compatibility with AMD and standard CommonJS by putting boilerplate around the standard CommonJS module format:
*/
(function(define){
define(function(require,exports){
// module contents
var dep1 = require("dep1");
exports.someExportedFunction = function(){...};
//...
});
})(typeof define=="function"?define:function(factory){factory(require,exports)});var encodeToASCII = require("encoder").encodeToASCII;
exports.encodeSomeSource = function(){
//其它操作以后，然后调用encodeToASCII
}define(function(require, exports, module) {
var encodeToASCII = require("encoder").encodeToASCII;
exports.encodeSomeSource = function(){
//process then call encodeToASCII
}
});以上是JavaScript架構設計Module模式用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
