JavaScript利用閉包實現模塊化

更新時間：2017年01月13日 15:55:44 作者：依然仰望

本文主要介紹了JavaScript利用閉包實現模塊化的方法。具有一定的參考價值，下面跟著小編一起來看下吧

利用閉包的強大威力，但從表面上看，它們似乎與回調無關。下面一起來研究其中最強大的一個：模塊。

function foo() {
 var something = "cool";
 var another = [1, 2, 3];
 function doSomething() {
 console.log( something );
 }
 function doAnother() {
 console.log( another.join( " ! " ) );
 }
}

正如在這段代碼中所看到的，這里并沒有明顯的閉包，只有兩個私有數據變量something和another，以及doSomething() 和doAnother() 兩個內部函數，它們的詞法作用域（而這就是閉包）也就是foo() 的內部作用域。

接下來考慮以下代碼：

function CoolModule() {
 var something = "cool";
 var another = [1, 2, 3];
 function doSomething() {
 alert( something );
 }
 function doAnother() {
 alert( another.join( " ! " ) );
 }
 return {
 doSomething: doSomething,
 doAnother: doAnother
 };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

這個模式在JavaScript 中被稱為模塊。最常見的實現模塊模式的方法通常被稱為模塊暴露，這里展示的是其變體。我們仔細研究一下這些代碼。

首先，CoolModule() 只是一個函數，必須要通過調用它來創(chuàng)建一個模塊實例。如果不執(zhí)行外部函數，內部作用域和閉包都無法被創(chuàng)建。其次，CoolModule() 返回一個用對象字面量語法{ key: value, ... } 來表示的對象。這個返回的對象中含有對內部函數而不是內部數據變量的引用。我們保持內部數據變量是隱藏且私有的狀態(tài)?？梢詫⑦@個對象類型的返回值看作本質上是模塊的公共API。這個對象類型的返回值最終被賦值給外部的變量foo，然后就可以通過它來訪問API 中的屬性方法，比如foo.doSomething()。

從模塊中返回一個實際的對象并不是必須的，也可以直接返回一個內部函數。jQuery 就是一個很好的例子。jQuery 和$ 標識符就是jQuery 模塊的公共API，但它們本身都是函數（由于函數也是對象，它們本身也可以擁有屬性）。

doSomething() 和doAnother() 函數具有涵蓋模塊實例內部作用域的閉包（通過調用CoolModule() 實現）。當通過返回一個含有屬性引用的對象的方式來將函數傳遞到詞法作用域外部時，我們已經創(chuàng)造了可以觀察和實踐閉包的條件。如果要更簡單的描述，模塊模式需要具備兩個必要條件。

1. 必須有外部的封閉函數，該函數必須至少被調用一次（每次調用都會創(chuàng)建一個新的模塊實例）。

2. 封閉函數必須返回至少一個內部函數，這樣內部函數才能在私有作用域中形成閉包，并且可以訪問或者修改私有的狀態(tài)。

一個具有函數屬性的對象本身并不是真正的模塊。從方便觀察的角度看，一個從函數調用所返回的，只有數據屬性而沒有閉包函數的對象并不是真正的模塊。上一個示例代碼中有一個叫作CoolModule() 的獨立的模塊創(chuàng)建器，可以被調用任意多次，每次調用都會創(chuàng)建一個新的模塊實例。當只需要一個實例時，可以對這個模式進行簡單的改進來實現單例模式：

var foo = (function CoolModule() {
 var something = "cool";
 var another = [1, 2, 3];
 function doSomething() {
 alert( something );
 }
 function doAnother() {
 alert( another.join( " ! " ) );
 }
 return {
 doSomething: doSomething,
 doAnother: doAnother
 };
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

立即調用這個函數并將返回值直接賦值給單例的模塊實例標識符foo。

模塊也是普通的函數，因此可以接受參數：

function CoolModule(id) {
 function identify() {
 console.log( id );
 }
 return {
 identify: identify
 };
}
var foo1 = CoolModule( "foo 1" );
var foo2 = CoolModule( "foo 2" );
foo1.identify(); // "foo 1"
foo2.identify(); // "foo 2"

模塊模式另一個簡單但強大的變化用法是，命名將要作為公共API 返回的對象：

var foo = (function CoolModule(id) {
function change() {
 // 修改公共API
 publicAPI.identify = identify2;
}
function identify1() {
 alert( id );
}
function identify2() {
 alert( id.toUpperCase() );
}
var publicAPI = {
 change: change,
 identify: identify1
};
return publicAPI;
})( "foo module" );
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE

通過在模塊實例的內部保留對公共API 對象的內部引用，可以從內部對模塊實例進行修改，包括添加或刪除方法和屬性，以及修改它們的值。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: