JS模塊與命名空間的介紹

更新時(shí)間：2013年03月22日 09:46:45 作者：

JS模塊與命名空間的介紹，需要的朋友可以參考一下

起因
將代碼組織到類中的一個(gè)重要原因是讓代碼更加“模塊化”，可以在很多不同的場(chǎng)景中實(shí)現(xiàn)代碼的重用。但類不是唯一的模塊化代碼的方式。

一般來講，模塊是一個(gè)獨(dú)立的JS文件。模塊文件可以包含一個(gè)類定義、一組相關(guān)類、一個(gè)實(shí)用函數(shù)庫或者一些待執(zhí)行的代碼。

模塊化的目標(biāo)是支持大規(guī)模的程序開發(fā)，處理分散源中代碼的組裝，并且能讓代碼正確運(yùn)行，哪怕包含了不需要的模塊代碼，也可以正確執(zhí)行代碼。

理想狀態(tài)下，所有模塊都不應(yīng)當(dāng)定義超過一個(gè)全局標(biāo)識(shí)。

模塊函數(shù)
通過把模塊定義在某個(gè)函數(shù)的內(nèi)部來實(shí)現(xiàn)，定義的變量和函數(shù)都屬于該函數(shù)的局部變量，在函數(shù)外不可見。實(shí)際上，可以將這個(gè)函數(shù)作用域用做模塊的命名空間（模塊函數(shù)）

一旦將模塊代碼封裝進(jìn)一個(gè)函數(shù)中，就需要一些方法導(dǎo)出公用API，以便在模塊函數(shù)外部調(diào)用它們。下面有幾種方式導(dǎo)出公用API：

首先創(chuàng)建一個(gè)命名空間

復(fù)制代碼代碼如下:

// 創(chuàng)建一個(gè)全局變量用來存放與學(xué)校相關(guān)的模塊
var school;                // 創(chuàng)建school命名空間
if(!school) school = {};

1. 利用構(gòu)造函數(shù)

復(fù)制代碼代碼如下:

// 返回Student構(gòu)造函數(shù)來導(dǎo)出公共API
school.Student = (function() {
    function Student() {

    }
    // ...... 定義Student的原型對(duì)象和私有屬性和方法 ........
    return Student;        // 返回Student構(gòu)造方法導(dǎo)出公共API
})();

2. 返回命名空間對(duì)象

如果模塊API包括多個(gè)單元，則它可以返回命名空間對(duì)象

復(fù)制代碼代碼如下:

// 為school添加students模塊
school.students = (function() {
    // 這里定義了很多類如課程類/成績(jī)類, 使用局部變量和函數(shù)
    function Subject() { /* ... */ }
    function Grade() { /* ... */ }

    // 通過返回命名空間對(duì)象將API導(dǎo)出
    return {
        Subject: Subject,
        Grade: Grade
    };
})();

3. 通過關(guān)鍵字new調(diào)用

另外一種類似類似技術(shù)：把模塊函數(shù)當(dāng)做構(gòu)造函數(shù)，通過new來調(diào)用。把它們（公共API）賦值給this屬性來將其導(dǎo)出

復(fù)制代碼代碼如下:

school.students = (new function() {
    // ..... 這里省略了代碼 ......

    // 將API導(dǎo)到this對(duì)象中
    this.Subject = Subject;
    this.Grade = Grade;

    // 注意，這里沒有返回值
}());    // 括號(hào)寫在里面。這里是創(chuàng)建新實(shí)例，new后面應(yīng)緊跟構(gòu)造函數(shù)的調(diào)用而不是表達(dá)式

4. 已定義命名空間對(duì)象

作為一種替代方案，如果已經(jīng)定義了全局命名空間對(duì)象，通過模塊函數(shù)可以直接設(shè)置那個(gè)對(duì)象的屬性。

復(fù)制代碼代碼如下:

// 如果已經(jīng)定義了命名空間對(duì)象
var school;                // 創(chuàng)建school命名空間
if(!school) school = {};
school.students = {};    // student命名空間已經(jīng)定義
(function(students) {
    // ..... 這里省略了代碼 ......

    // 將公共API導(dǎo)到上面定義的命名空間中
    students.Subject = Subject;
    students.Grade = Grade;
    // 這里也不需要返回值
})(school.students);

為此，導(dǎo)出公共API的方式已經(jīng)講完。

您可能感興趣的文章: