JS模組與命名空間的介紹_javascript技巧

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

一般來講，模組是一個獨立的JS檔。模組檔案可以包含一個類別定義、一組相關類別、一個實用函數庫或一些待執行的程式碼。

模組化的目標是支援大規模的程式開發，處理分散源中程式碼的組裝，並且能讓程式碼正確運行，即使包含了不需要的模組程式碼，也可以正確執行程式碼。

理想狀態下，所有模組都不應定義超過一個全域標識。

模組函數
透過把模組定義在某個函數的內部來實現，定義的變數和函數都屬於函數的局部變量，在函數外不可見。實際上，可以將這個函數作用域用做模組的命名空間（模組函數）

一旦將模組程式碼封裝進一個函數中，就需要一些方法匯出公用API，以便在模組函數外部呼叫它們。以下有幾種方式匯出公用API：

先建立一個命名空間

複製程式碼 程式碼如下:

// 建立一個學校變數用來存放與全域變數相關的模組
var school;                // 建立school命名空間
if(!school) school = {};

if(!school) school = {};

1. 利用建構子

複製程式碼

程式碼如下:


// 回傳>school.Student = (function() {
    function Student() {

    }
    // ......定義Student的原型物件和私有屬性和方法.... ....
    return Student;        // 回傳Student建構方法導出公用API

})();

2. 回傳命名空間物件

如果模組API包含多個單元，則它可以傳回命名空間物件

複製程式碼

程式碼如下:


// 為school加上studentssool    // 這裡定義了許多類別如課程類別/成績類別, 使用局部變數與函數
    function Subject() { /* ... */ }
   function Subject() { /* ... */ }
   function Subject() { /* ... */ }
   function Grade () { /* ... */ }

    // 透過傳回命名空間物件將API匯出
    return {
       
})();

3. 透過關鍵字new呼叫

另外一種類似類似技術：把模組函數當作建構函數，透過new來呼叫。把它們（公共API）賦值給this屬性將其匯出

複製程式碼

程式碼如下:

school.students = (new function() {    // ..... 這裡省略了程式碼...

    // 將API導到this物件中
    this.Subject = Subject;
    this.this.Subject = Subject;
    this.de = GradeGrade = GradeGrade = Grade0 ;

    // 注意，這裡沒有回傳值
}());    // 括號內寫。這裡是建立新實例，new後面應緊跟著建構子的呼叫而不是表達式

4. 已定義命名空間物件

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

複製程式碼

程式碼如下:

// 如果定義了命名空間物件
var school;                // 建立school命名空間
if(!school) school = {p. // student命名空間已經定義
(function(students) {
    // ..... 這裡省略了代碼......

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

為此，匯出公開API的方式已經講完。