javascript模塊與命名空間的介紹
模塊化的目標(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è)命名空間
代碼如下:
// 創(chuàng)建一個(gè)全局變量用來存放與學(xué)校相關(guān)的模塊
var school; // 創(chuàng)建school命名空間
if(!school) school = {};
1. 利用構(gòu)造函數(shù)
代碼如下:
// 返回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ì)象
代碼如下:
// 為school添加students模塊
school.students = (function() {
// 這里定義了很多類如課程類/成績類, 使用局部變量和函數(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)出
代碼如下:
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ì)象的屬性。
代碼如下:
// 如果已經(jīng)定義了命名空間對(duì)象
var school; // 創(chuàng)建school命名空間
if(!school) school = {};
school.students = {}; // student命名空間已經(jīng)定義
?。╢unction(students) {
// 。。。。。 這里省略了代碼 。。。。。。
// 將公共API導(dǎo)到上面定義的命名空間中
students.Subject = Subject;
students.Grade = Grade;
// 這里也不需要返回值
})(school.students);
評(píng)論
查看更多