JS模塊與命名空間的介紹

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

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

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

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

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

理想狀態(tài)下，所有模塊都不應當定義超過一個全局標識。

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

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

2. 返回命名空間對象

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

復制代碼代碼如下:

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

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

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

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

復制代碼代碼如下:

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

    // 將API導到this對象中
    this.Subject = Subject;
    this.Grade = Grade;

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

4. 已定義命名空間對象

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

復制代碼代碼如下:

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

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

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

您可能感興趣的文章: