模塊模式是JavaScript一種常用的編碼模式。這是一般的理解,但也有一些高級應用沒有得到很多關注。在本文中,我將回顧基礎知識,瀏覽一些不錯的高級技巧,甚至我認爲是原生基礎的。
基礎知識
首先我們開始簡單概述模型模式。三年前Eric Miraglia(YUI)的博文使模型模式衆所周知。如果你已經很熟悉模型模式,可以直接閱讀“高級模式”。
匿名閉包
這是一切成爲可能的基礎,也是JavaScript最好的特性。我們將簡單的創建匿名函數,並立即執行。所有函數內部代碼都在閉包(closure)內。它提供了整個應用生命週期的私有和狀態。
(function () { // ... all vars and functions are in this scope only // still maintains access to all globals }());
注意匿名函數週圍的()。這是語言的要求。關鍵字function一般認爲是函數聲明,包括()就是函數表達式。
引入全局
JavaScript有個特性,稱爲隱性全局。使用變量名稱時,解釋器會從作用域向後尋找變量聲明。如果沒找到,變量會被假定入全局(以後可以全局調用)。如果會被分配使用,在還不存在時全局創建它。這意味着在匿名函數裏使用全局變量很簡單。不幸的是,這會導致代碼難以管理,文件中不容易區分(對人而言)哪個變量是全局的。
幸好,匿名函數還有一個不錯的選擇。全局變量作爲參數傳遞給匿名函數。將它們引入我們的代碼中,既更清晰,又比使用隱性全局更快。下面是一個例子:
(function ($, YAHOO) { // 當前域有權限訪問全局jQuery($)和YAHOO }(jQuery, YAHOO));
模塊出口
有時你不只想用全局變量,但你需要先聲明他們(模塊的全局調用)。我們用匿名函數的返回值,很容易輸出他們。這樣做就完成了基本的模塊模式。以下是一個完整例子:
var MODULE = (function () { var my = {}, privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; }());
注意,我們聲明瞭一個全局模塊MODULE,有兩個公開屬性:方法MODULE.moduleMethod和屬性MODULE.moduleProperty。而且,匿名函數的閉包還維持了私有內部狀態。同時學會之上的內容,我們就很容易引入需要的全局變量,和輸出到全局變量。
高級模式
對許多用戶而言以上的還不足,我們可以採用以下的模式創造強大的,可擴展的結構。讓我們使用MODULE模塊,一個一個繼續。
擴充
模塊模式的一個限制是整個模塊必須在一個文件裏。任何人都瞭解長代碼分割到不同文件的必要。還好,我們有很好的辦法擴充模塊。(在擴充文件)首先我們引入模塊(從全局),給他添加屬性,再輸出他。下面是一個例子擴充模塊:
var MODULE = (function (my) { my.anotherMethod = function () { // 此前的MODULE返回my對象作爲全局輸出,因此這個匿名函數的參數MODULE就是上面MODULE匿名函數裏的my }; return my; }(MODULE));
我們再次使用var關鍵字以保持一致性,雖然其實沒必要。代碼執行後,模塊獲得一個新公開方法MODULE.anotherMethod。擴充文件沒有影響模塊的私有內部狀態。
鬆耦合擴充
上面的例子需要我們首先創建模塊,然後擴充它,這並不總是必要的。提升JavaScript應用性能最好的操作就是異步加載腳本。因而我們可以創建靈活多部分的模塊,可以將他們無順序加載,以鬆耦合擴充。每個文件應有如下的結構:
var MODULE = (function (my) { // add capabilities... return my; }(MODULE || {}));
這個模式裏,var語句是必須的,以標記引入時不存在會創建。這意味着你可以像LABjs一樣同時加載所有模塊文件而不被阻塞。
緊耦合擴充
雖然鬆耦合很不錯,但模塊上也有些限制。最重要的,你不能安全的覆寫模塊屬性(因爲沒有加載順序)。初始化時也無法使用其他文件定義的模塊屬性(但你可以在初始化後運行)。緊耦合擴充意味着一組加載順序,但是允許覆寫。下面是一個例子(擴充最初定義的MODULE):
var MODULE = (function (my) { var old_moduleMethod = my.moduleMethod; my.moduleMethod = function () { // method override, has access to old through old_moduleMethod... }; return my; }(MODULE));
我們覆寫的MODULE.moduleMethod,但依舊保持着私有內部狀態。
克隆和繼承
var MODULE_TWO = (function (old) { var my = {}, key; for (key in old) { if (old.hasOwnProperty(key)) { my[key] = old[key]; } } var super_moduleMethod = old.moduleMethod; my.moduleMethod = function () { // override method on the clone, access to super through super_moduleMethod }; return my; }(MODULE));
這種方式也許最不靈活。他可以實現巧妙的組合,但是犧牲了靈活性。正如我寫的,對象的屬性或方法不是拷貝,而是一個對象的兩個引用。修改一個會影響其他。這可能可以保持遞歸克隆對象的屬性固定,但無法固定方法,除了帶eval的方法。不過,我已經完整的包含了模塊。(其實就是做了一次淺拷貝)。
跨文件私有狀態
一個模塊分割成幾個文件有一個嚴重缺陷。每個文件都有自身的私有狀態,且無權訪問別的文件的私有狀態。這可以修復的。下面是一個鬆耦合擴充的例子,不同擴充文件之間保持了私有狀態:
var MODULE = (function (my) { var _private = my._private = my._private || {}, _seal = my._seal = my._seal || function () { delete my._private; delete my._seal; delete my._unseal; },//模塊加載後,調用以移除對_private的訪問權限 _unseal = my._unseal = my._unseal || function () { my._private = _private; my._seal = _seal; my._unseal = _unseal; };//模塊加載前,開啓對_private的訪問,以實現擴充部分對私有內容的操作 // permanent access to _private, _seal, and _unseal return my; }(MODULE || {}));
任何文件都可以在本地的變量_private中設置屬性,他會對別的擴充立即生效(即初始化時所有擴充的私有狀態都保存在_private變量,並被my._private輸出)。模塊完全加載了,應用調用MODULE._seal()方法阻止對私有屬性的讀取(幹掉my._private輸出)。如果此後模塊又需要擴充,帶有一個私有方法。加載擴充文件前調用MODULE._unseal()方法(恢復my._private,外部恢復操作權限)。加載後調用再seal()。
這個模式一直隨我工作至今,我還沒看到別的地方這樣做的。我覺得這個模式很有用,值得寫上。
子模塊
最後的高級模式實際上最簡單。有很多好方法創建子模塊。和創建父模塊是一樣的:
MODULE.sub = (function () { var my = {}; // 就是多一級命名空間 return my; }());
雖然很簡單,但我還是提一下。子模塊有所有正常模塊的功能,包括擴充和私有狀態。
總結
大多數高級模式可以互相組合成更多有用的模式。如果要我提出一個複雜應用的設計模式,我會組合鬆耦合、私有狀態和子模塊。
這裏我還沒有涉及性能,不過我有個小建議:模塊模式是性能增益的。他簡化了許多,加快代碼下載。鬆耦合可以無阻塞並行下載,等價於提高下載速度。可能初始化比別的方法慢一點,但值得權衡。只要全局正確的引入,運行性能不會有任何損失,可能還因爲局部變量和更少的引用,加快子模塊的加載。
最後,一個例子動態加載子模塊到父模塊(動態創建)中。這裏就不用私有狀態了,其實加上也很簡單。這段代碼允許整個複雜分成的代碼核心及其子模塊等平行加載完全。
var UTIL = (function (parent, $) { var my = parent.ajax = parent.ajax || {}; my.get = function (url, params, callback) { // ok, so I'm cheating a bit :) return $.getJSON(url, params, callback); }; // etc... return parent; }(UTIL || {}, jQuery));