DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS模塊與命名空間的介紹
JS模塊與命名空間的介紹
編輯:關於JavaScript     

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

一般來講,模塊是一個獨立的JS文件。模塊文件可以包含一個類定義、一組相關類、一個實用函數庫或者一些待執行的代碼。

模塊化的目標是支持大規模的程序開發,處理分散源中代碼的組裝,並且能讓代碼正確運行,哪怕包含了不需要的模塊代碼,也可以正確執行代碼。

理想狀態下,所有模塊都不應當定義超過一個全局標識。

模塊函數
通過把模塊定義在某個函數的內部來實現,定義的變量和函數都屬於該函數的局部變量,在函數外不可見。實際上,可以將這個函數作用域用做模塊的命名空間(模塊函數)

一旦將模塊代碼封裝進一個函數中,就需要一些方法導出公用API,以便在模塊函數外部調用它們。下面有幾種方式導出公用API:

首先創建一個命名空間

復制代碼 代碼如下:
// 創建一個全局變量用來存放與學校相關的模塊
var school;                // 創建school命名空間
if(!school) school = {};

1. 利用構造函數

復制代碼 代碼如下:
// 返回Student構造函數來導出公共API
school.Student = (function() {
    function Student() {

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

2. 返回命名空間對象

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

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

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

3. 通過關鍵字new調用

另外一種類似類似技術:把模塊函數當做構造函數,通過new來調用。把它們(公共API)賦值給this屬性來將其導出

復制代碼 代碼如下:
school.students = (new function() {
    // ..... 這裡省略了代碼 ......

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

    // 注意,這裡沒有返回值
}());    // 括號寫在裡面。這裡是創建新實例,new後面應緊跟構造函數的調用而不是表達式

4. 已定義命名空間對象

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

復制代碼 代碼如下:
// 如果已經定義了命名空間對象
var school;                // 創建school命名空間
if(!school) school = {};
school.students = {};    // student命名空間已經定義
(function(students) {
    // ..... 這裡省略了代碼 ......

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

為此,導出公共API的方式已經講完。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved