如何在JavaScript中實現(xiàn)一個模塊化功能

本篇文章為大家展示了如何在JavaScript中實現(xiàn)一個模塊化功能，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

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

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

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

接下來考慮以下代碼：

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 中被稱為模塊。最常見的實現(xiàn)模塊模式的方法通常被稱為模塊暴露，這里展示的是其變體。我們仔細(xì)研究一下這些代碼。

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

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

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

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

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

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

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

立即調(diào)用這個函數(shù)并將返回值直接賦值給單例的模塊實例標(biāo)識符foo。

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

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

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

上述內(nèi)容就是如何在JavaScript中實現(xiàn)一個模塊化功能，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。