起因
將代碼組織到類中的一個重要原因是讓代碼更加“模塊化”,可以在很多不同的場景中實現代碼的重用。但類不是唯一的模塊化代碼的方式。
一般來講,模塊是一個獨立的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的方式已經講完。