深入理解JavaScript系列(3) 全面解析Module模式
更新時間：2012年01月15日 23:10:54 作者：
Module模式是JavaScript編程中一個非常通用的模式，一般情況下，大家都知道基本用法，本文嘗試著給大家更多該模式的高級使用方式
簡介
Module模式是JavaScript編程中一個非常通用的模式，一般情況下，大家都知道基本用法，本文嘗試著給大家更多該模式的高級使用方式。
首先我們來看看Module模式的基本特征：
模塊化，可重用
封裝了變量和function，和全局的namaspace不接觸，松耦合
只暴露可用public的方法，其它私有方法全部隱藏
關(guān)于Module模式，最早是由YUI的成員Eric Miraglia在4年前提出了這個概念，我們將從一個簡單的例子來解釋一下基本的用法（如果你已經(jīng)非常熟悉了，請忽略這一節(jié)）。
基本用法
先看一下最簡單的一個實現(xiàn)，代碼如下：
var Calculator = function (eq) {
//這里可以聲明私有成員
var eqCtl = document.getElementById(eq);
return {
// 暴露公開的成員
add: function (x, y) {
var val = x + y;
eqCtl.innerHTML = val;
}
};
};
我們可以通過如下的方式來調(diào)用：
var calculator = new Calculator('eq');
calculator.add(2, 2);
大家可能看到了，每次用的時候都要new一下，也就是說每個實例在內(nèi)存里都是一份copy，如果你不需要傳參數(shù)或者沒有一些特殊苛刻的要求的話，我們可以在最后一個}后面加上一個括號，來達(dá)到自執(zhí)行的目的，這樣該實例在內(nèi)存中只會存在一份copy，不過在展示他的優(yōu)點之前，我們還是先來看看這個模式的基本使用方法吧。
匿名閉包
匿名閉包是讓一切成為可能的基礎(chǔ)，而這也是JavaScript最好的特性，我們來創(chuàng)建一個最簡單的閉包函數(shù)，函數(shù)內(nèi)部的代碼一直存在于閉包內(nèi)，在整個運行周期內(nèi)，該閉包都保證了內(nèi)部的代碼處于私有狀態(tài)。
(function () {
// ... 所有的變量和function都在這里聲明，并且作用域也只能在這個匿名閉包里
// ...但是這里的代碼依然可以訪問外部全局的對象
}());
注意，匿名函數(shù)后面的括號，這是JavaScript語言所要求的，因為如果你不聲明的話，JavaScript解釋器默認(rèn)是聲明一個function函數(shù)，有括號，就是創(chuàng)建一個函數(shù)表達(dá)式，也就是自執(zhí)行，用的時候不用和上面那樣在new了，當(dāng)然你也可以這樣來聲明：
(function () {/* 內(nèi)部代碼 */})();
不過我們推薦使用第一種方式，關(guān)于函數(shù)自執(zhí)行，我后面會有專門一篇文章進行詳解，這里就不多說了。
引用全局變量
JavaScript有一個特性叫做隱式全局變量，不管一個變量有沒有用過，JavaScript解釋器反向遍歷作用域鏈來查找整個變量的var聲明，如果沒有找到var，解釋器則假定該變量是全局變量，如果該變量用于了賦值操作的話，之前如果不存在的話，解釋器則會自動創(chuàng)建它，這就是說在匿名閉包里使用或創(chuàng)建全局變量非常容易，不過比較困難的是，代碼比較難管理，尤其是閱讀代碼的人看著很多區(qū)分哪些變量是全局的，哪些是局部的。
不過，好在在匿名函數(shù)里我們可以提供一個比較簡單的替代方案，我們可以將全局變量當(dāng)成一個參數(shù)傳入到匿名函數(shù)然后使用，相比隱式全局變量，它又清晰又快，我們來看一個例子：
(function ($, YAHOO) {
// 這里，我們的代碼就可以使用全局的jQuery對象了，YAHOO也是一樣
} (jQuery, YAHOO));
現(xiàn)在很多類庫里都有這種使用方式，比如jQuery源碼。
不過，有時候可能不僅僅要使用全局變量，而是也想聲明全局變量，如何做呢？我們可以通過匿名函數(shù)的返回值來返回這個全局變量，這也就是一個基本的Module模式，來看一個完整的代碼：
var blogModule = (function () {
var my = {}, privateName = "博客園";
function privateAddTopic(data) {
// 這里是內(nèi)部處理代碼
}
my.Name = privateName;
my.AddTopic = function (data) {
privateAddTopic(data);
};
return my;
} ());
上面的代碼聲明了一個全局變量blogModule，并且?guī)в?個可訪問的屬性：blogModule.AddTopic和blogModule.Name，除此之外，其它代碼都在匿名函數(shù)的閉包里保持著私有狀態(tài)。同時根據(jù)上面?zhèn)魅肴肿兞康睦?，我們也可以很方便地傳入其它的全局變量?
高級用法
上面的內(nèi)容對大多數(shù)用戶已經(jīng)很足夠了，但我們還可以基于此模式延伸出更強大，易于擴展的結(jié)構(gòu)，讓我們一個一個來看。
擴展
Module模式的一個限制就是所有的代碼都要寫在一個文件，但是在一些大型項目里，將一個功能分離成多個文件是非常重要的，因為可以多人合作易于開發(fā)。再回頭看看上面的全局參數(shù)導(dǎo)入例子，我們能否把blogModule自身傳進去呢？答案是肯定的，我們先將blogModule傳進去，添加一個函數(shù)屬性，然后再返回就達(dá)到了我們所說的目的，上代碼：
var blogModule = (function (my) {
my.AddPhoto = function () {
//添加內(nèi)部代碼
};
return my;
} (blogModule));
這段代碼，看起來是不是有C#里擴展方法的感覺？有點類似，但本質(zhì)不一樣哦。同時盡管var不是必須的，但為了確保一致，我們再次使用了它，代碼執(zhí)行以后，blogModule下的AddPhoto就可以使用了，同時匿名函數(shù)內(nèi)部的代碼也依然保證了私密性和內(nèi)部狀態(tài)。
松耦合擴展
上面的代碼盡管可以執(zhí)行，但是必須先聲明blogModule，然后再執(zhí)行上面的擴展代碼，也就是說步驟不能亂，怎么解決這個問題呢？我們來回想一下，我們平時聲明變量的都是都是這樣的：
var cnblogs = cnblogs || {} ;
這是確保cnblogs對象，在存在的時候直接用，不存在的時候直接賦值為{}，我們來看看如何利用這個特性來實現(xiàn)Module模式的任意加載順序：
var blogModule = (function (my) {
// 添加一些功能
return my;
} (blogModule || {}));
通過這樣的代碼，每個單獨分離的文件都保證這個結(jié)構(gòu)，那么我們就可以實現(xiàn)任意順序的加載，所以，這個時候的var就是必須要聲明的，因為不聲明，其它文件讀取不到哦。
緊耦合擴展
雖然松耦合擴展很牛叉了，但是可能也會存在一些限制，比如你沒辦法重寫你的一些屬性或者函數(shù)，也不能在初始化的時候就是用Module的屬性。緊耦合擴展限制了加載順序，但是提供了我們重載的機會，看如下例子：
var blogModule = (function (my) {
var oldAddPhotoMethod = my.AddPhoto;
my.AddPhoto = function () {
// 重載方法，依然可通過oldAddPhotoMethod調(diào)用舊的方法
};
return my;
} (blogModule));
通過這種方式，我們達(dá)到了重載的目的，當(dāng)然如果你想在繼續(xù)在內(nèi)部使用原有的屬性，你可以調(diào)用oldAddPhotoMethod來用。
克隆與繼承
var blogModule = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var oldAddPhotoMethod = old.AddPhoto;
my.AddPhoto = function () {
// 克隆以后，進行了重寫，當(dāng)然也可以繼續(xù)調(diào)用oldAddPhotoMethod
};
return my;
} (blogModule));
這種方式靈活是靈活，但是也需要花費靈活的代價，其實該對象的屬性對象或function根本沒有被復(fù)制，只是對同一個對象多了一種引用而已，所以如果老對象去改變它，那克隆以后的對象所擁有的屬性或function函數(shù)也會被改變，解決這個問題，我們就得是用遞歸，但遞歸對function函數(shù)的賦值也不好用，所以我們在遞歸的時候eval相應(yīng)的function。不管怎么樣，我還是把這一個方式放在這個帖子里了，大家使用的時候注意一下就行了。
跨文件共享私有對象
通過上面的例子，我們知道，如果一個module分割到多個文件的話，每個文件需要保證一樣的結(jié)構(gòu)，也就是說每個文件匿名函數(shù)里的私有對象都不能交叉訪問，那如果我們非要使用，那怎么辦呢？ 我們先看一段代碼：
var blogModule = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
return my;
} (blogModule || {}));
任何文件都可以對他們的局部變量_private設(shè)屬性，并且設(shè)置對其他的文件也立即生效。一旦這個模塊加載結(jié)束，應(yīng)用會調(diào)用 blogModule._seal()"上鎖"，這會阻止外部接入內(nèi)部的_private。如果這個模塊需要再次增生，應(yīng)用的生命周期內(nèi)，任何文件都可以調(diào)用_unseal() ”開鎖”，然后再加載新文件。加載后再次調(diào)用 _seal()”上鎖”。
子模塊
最后一個也是最簡單的使用方式，那就是創(chuàng)建子模塊
blogModule.CommentSubModule = (function () {
var my = {};
// ...
return my;
} ());
盡管非常簡單，我還是把它放進來了，因為我想說明的是子模塊也具有一般模塊所有的高級使用方式，也就是說你可以對任意子模塊再次使用上面的一些應(yīng)用方法。
總結(jié)
上面的大部分方式都可以互相組合使用的，一般來說如果要設(shè)計系統(tǒng)，可能會用到松耦合擴展，私有狀態(tài)和子模塊這樣的方式。另外，我這里沒有提到性能問題，但我認(rèn)為Module模式效率高，代碼少，加載速度快。使用松耦合擴展允許并行加載，這更可以提升下載速度。不過初始化時間可能要慢一些，但是為了使用好的模式，這是值得的。
參考文章：
http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
同步與推薦
本文已同步至目錄索引：深入理解JavaScript系列
深入理解JavaScript系列文章，包括了原創(chuàng)，翻譯，轉(zhuǎn)載等各類型的文章，如果對你有用，請推薦支持一把，給大叔寫作的動力。
Module模式是JavaScript編程中一個非常通用的模式，一般情況下，大家都知道基本用法，本文嘗試著給大家更多該模式的高級使用方式。
首先我們來看看Module模式的基本特征：
模塊化，可重用
封裝了變量和function，和全局的namaspace不接觸，松耦合
只暴露可用public的方法，其它私有方法全部隱藏
關(guān)于Module模式，最早是由YUI的成員Eric Miraglia在4年前提出了這個概念，我們將從一個簡單的例子來解釋一下基本的用法（如果你已經(jīng)非常熟悉了，請忽略這一節(jié)）。
基本用法
先看一下最簡單的一個實現(xiàn)，代碼如下：
復(fù)制代碼 代碼如下:
var Calculator = function (eq) {
//這里可以聲明私有成員
var eqCtl = document.getElementById(eq);
return {
// 暴露公開的成員
add: function (x, y) {
var val = x + y;
eqCtl.innerHTML = val;
}
};
};
我們可以通過如下的方式來調(diào)用：
復(fù)制代碼 代碼如下:
var calculator = new Calculator('eq');
calculator.add(2, 2);
大家可能看到了，每次用的時候都要new一下，也就是說每個實例在內(nèi)存里都是一份copy，如果你不需要傳參數(shù)或者沒有一些特殊苛刻的要求的話，我們可以在最后一個}后面加上一個括號，來達(dá)到自執(zhí)行的目的，這樣該實例在內(nèi)存中只會存在一份copy，不過在展示他的優(yōu)點之前，我們還是先來看看這個模式的基本使用方法吧。
匿名閉包
匿名閉包是讓一切成為可能的基礎(chǔ)，而這也是JavaScript最好的特性，我們來創(chuàng)建一個最簡單的閉包函數(shù)，函數(shù)內(nèi)部的代碼一直存在于閉包內(nèi)，在整個運行周期內(nèi)，該閉包都保證了內(nèi)部的代碼處于私有狀態(tài)。
復(fù)制代碼 代碼如下:
(function () {
// ... 所有的變量和function都在這里聲明，并且作用域也只能在這個匿名閉包里
// ...但是這里的代碼依然可以訪問外部全局的對象
}());
注意，匿名函數(shù)后面的括號，這是JavaScript語言所要求的，因為如果你不聲明的話，JavaScript解釋器默認(rèn)是聲明一個function函數(shù)，有括號，就是創(chuàng)建一個函數(shù)表達(dá)式，也就是自執(zhí)行，用的時候不用和上面那樣在new了，當(dāng)然你也可以這樣來聲明：
(function () {/* 內(nèi)部代碼 */})();
不過我們推薦使用第一種方式，關(guān)于函數(shù)自執(zhí)行，我后面會有專門一篇文章進行詳解，這里就不多說了。
引用全局變量
JavaScript有一個特性叫做隱式全局變量，不管一個變量有沒有用過，JavaScript解釋器反向遍歷作用域鏈來查找整個變量的var聲明，如果沒有找到var，解釋器則假定該變量是全局變量，如果該變量用于了賦值操作的話，之前如果不存在的話，解釋器則會自動創(chuàng)建它，這就是說在匿名閉包里使用或創(chuàng)建全局變量非常容易，不過比較困難的是，代碼比較難管理，尤其是閱讀代碼的人看著很多區(qū)分哪些變量是全局的，哪些是局部的。
不過，好在在匿名函數(shù)里我們可以提供一個比較簡單的替代方案，我們可以將全局變量當(dāng)成一個參數(shù)傳入到匿名函數(shù)然后使用，相比隱式全局變量，它又清晰又快，我們來看一個例子：
復(fù)制代碼 代碼如下:
(function ($, YAHOO) {
// 這里，我們的代碼就可以使用全局的jQuery對象了，YAHOO也是一樣
} (jQuery, YAHOO));
現(xiàn)在很多類庫里都有這種使用方式，比如jQuery源碼。
不過，有時候可能不僅僅要使用全局變量，而是也想聲明全局變量，如何做呢？我們可以通過匿名函數(shù)的返回值來返回這個全局變量，這也就是一個基本的Module模式，來看一個完整的代碼：
復(fù)制代碼 代碼如下:
var blogModule = (function () {
var my = {}, privateName = "博客園";
function privateAddTopic(data) {
// 這里是內(nèi)部處理代碼
}
my.Name = privateName;
my.AddTopic = function (data) {
privateAddTopic(data);
};
return my;
} ());
上面的代碼聲明了一個全局變量blogModule，并且?guī)в?個可訪問的屬性：blogModule.AddTopic和blogModule.Name，除此之外，其它代碼都在匿名函數(shù)的閉包里保持著私有狀態(tài)。同時根據(jù)上面?zhèn)魅肴肿兞康睦?，我們也可以很方便地傳入其它的全局變量?
高級用法
上面的內(nèi)容對大多數(shù)用戶已經(jīng)很足夠了，但我們還可以基于此模式延伸出更強大，易于擴展的結(jié)構(gòu)，讓我們一個一個來看。
擴展
Module模式的一個限制就是所有的代碼都要寫在一個文件，但是在一些大型項目里，將一個功能分離成多個文件是非常重要的，因為可以多人合作易于開發(fā)。再回頭看看上面的全局參數(shù)導(dǎo)入例子，我們能否把blogModule自身傳進去呢？答案是肯定的，我們先將blogModule傳進去，添加一個函數(shù)屬性，然后再返回就達(dá)到了我們所說的目的，上代碼：
復(fù)制代碼 代碼如下:
var blogModule = (function (my) {
my.AddPhoto = function () {
//添加內(nèi)部代碼
};
return my;
} (blogModule));
這段代碼，看起來是不是有C#里擴展方法的感覺？有點類似，但本質(zhì)不一樣哦。同時盡管var不是必須的，但為了確保一致，我們再次使用了它，代碼執(zhí)行以后，blogModule下的AddPhoto就可以使用了，同時匿名函數(shù)內(nèi)部的代碼也依然保證了私密性和內(nèi)部狀態(tài)。
松耦合擴展
上面的代碼盡管可以執(zhí)行，但是必須先聲明blogModule，然后再執(zhí)行上面的擴展代碼，也就是說步驟不能亂，怎么解決這個問題呢？我們來回想一下，我們平時聲明變量的都是都是這樣的：
var cnblogs = cnblogs || {} ;
這是確保cnblogs對象，在存在的時候直接用，不存在的時候直接賦值為{}，我們來看看如何利用這個特性來實現(xiàn)Module模式的任意加載順序：
復(fù)制代碼 代碼如下:
var blogModule = (function (my) {
// 添加一些功能
return my;
} (blogModule || {}));
通過這樣的代碼，每個單獨分離的文件都保證這個結(jié)構(gòu)，那么我們就可以實現(xiàn)任意順序的加載，所以，這個時候的var就是必須要聲明的，因為不聲明，其它文件讀取不到哦。
緊耦合擴展
雖然松耦合擴展很牛叉了，但是可能也會存在一些限制，比如你沒辦法重寫你的一些屬性或者函數(shù)，也不能在初始化的時候就是用Module的屬性。緊耦合擴展限制了加載順序，但是提供了我們重載的機會，看如下例子：
復(fù)制代碼 代碼如下:
var blogModule = (function (my) {
var oldAddPhotoMethod = my.AddPhoto;
my.AddPhoto = function () {
// 重載方法，依然可通過oldAddPhotoMethod調(diào)用舊的方法
};
return my;
} (blogModule));
通過這種方式，我們達(dá)到了重載的目的，當(dāng)然如果你想在繼續(xù)在內(nèi)部使用原有的屬性，你可以調(diào)用oldAddPhotoMethod來用。
克隆與繼承
復(fù)制代碼 代碼如下:
var blogModule = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var oldAddPhotoMethod = old.AddPhoto;
my.AddPhoto = function () {
// 克隆以后，進行了重寫，當(dāng)然也可以繼續(xù)調(diào)用oldAddPhotoMethod
};
return my;
} (blogModule));
這種方式靈活是靈活，但是也需要花費靈活的代價，其實該對象的屬性對象或function根本沒有被復(fù)制，只是對同一個對象多了一種引用而已，所以如果老對象去改變它，那克隆以后的對象所擁有的屬性或function函數(shù)也會被改變，解決這個問題，我們就得是用遞歸，但遞歸對function函數(shù)的賦值也不好用，所以我們在遞歸的時候eval相應(yīng)的function。不管怎么樣，我還是把這一個方式放在這個帖子里了，大家使用的時候注意一下就行了。
跨文件共享私有對象
通過上面的例子，我們知道，如果一個module分割到多個文件的話，每個文件需要保證一樣的結(jié)構(gòu)，也就是說每個文件匿名函數(shù)里的私有對象都不能交叉訪問，那如果我們非要使用，那怎么辦呢？ 我們先看一段代碼：
復(fù)制代碼 代碼如下:
var blogModule = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
return my;
} (blogModule || {}));
任何文件都可以對他們的局部變量_private設(shè)屬性，并且設(shè)置對其他的文件也立即生效。一旦這個模塊加載結(jié)束，應(yīng)用會調(diào)用 blogModule._seal()"上鎖"，這會阻止外部接入內(nèi)部的_private。如果這個模塊需要再次增生，應(yīng)用的生命周期內(nèi)，任何文件都可以調(diào)用_unseal() ”開鎖”，然后再加載新文件。加載后再次調(diào)用 _seal()”上鎖”。
子模塊
最后一個也是最簡單的使用方式，那就是創(chuàng)建子模塊
復(fù)制代碼 代碼如下:
blogModule.CommentSubModule = (function () {
var my = {};
// ...
return my;
} ());
盡管非常簡單，我還是把它放進來了，因為我想說明的是子模塊也具有一般模塊所有的高級使用方式，也就是說你可以對任意子模塊再次使用上面的一些應(yīng)用方法。
總結(jié)
上面的大部分方式都可以互相組合使用的，一般來說如果要設(shè)計系統(tǒng)，可能會用到松耦合擴展，私有狀態(tài)和子模塊這樣的方式。另外，我這里沒有提到性能問題，但我認(rèn)為Module模式效率高，代碼少，加載速度快。使用松耦合擴展允許并行加載，這更可以提升下載速度。不過初始化時間可能要慢一些，但是為了使用好的模式，這是值得的。
參考文章：
http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
同步與推薦
本文已同步至目錄索引：深入理解JavaScript系列
深入理解JavaScript系列文章，包括了原創(chuàng)，翻譯，轉(zhuǎn)載等各類型的文章，如果對你有用，請推薦支持一把，給大叔寫作的動力。
相關(guān)文章
JavaScript創(chuàng)建對象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】
這篇文章主要介紹了JavaScript創(chuàng)建對象方式,結(jié)合實例形式總結(jié)分析了工廠模式、構(gòu)造函數(shù)模式、原型模式等各種常見的javascript對象創(chuàng)建方式與相關(guān)操作注意事項,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了js插件Jcrop自定義截取圖片功能 ,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
javascript在當(dāng)前窗口關(guān)閉前檢測窗口是否關(guān)閉
檢測窗口是否關(guān)閉，在當(dāng)前窗口關(guān)閉前使用js做到這一點，下面是具體的實現(xiàn)，感興趣的朋友可以參考下2014-09-09
javascript 實現(xiàn)子父窗體互相傳值的簡單實例
本篇文章主要是對javascript 實現(xiàn)子父窗體互相傳值的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JS事件Event元素(兼容IE,Firefox,Chorme)
今天，想聊聊JS事件對象。相信大家對于獲得激發(fā)JS事件的原對象的理解，有的人可能簡單停留在IE上。也就是window.event這個對象2012-11-11
本篇文章主要介紹了Javascript中的async/awai的用法，將分享async / await是如何工作的，有興趣的可以了解一下2017-05-05
聊到localStorage想必熟悉前端的朋友都不會陌生，在實際的應(yīng)用場景中，我們往往需要讓localStorage設(shè)置的某個key能在指定時間內(nèi)自動失效，所以基于這種場景，我們?nèi)绾稳ソ鉀Q呢，本文就詳細(xì)的介紹一下2021-12-12
這篇文章主要介紹了JavaScript中的比較操作符>、<、>=、<=介紹,本文先是講解了操作符的一些使用規(guī)則,然后給出了操作實例,需要的朋友可以參考下2014-12-12
JavaScript setInterval()與setTimeout()計時器
這篇文章主要介紹了JavaScript setInterval()與setTimeout()計時器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)背景音樂播放和暫停，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06