模塊是任何強大應用程序中不可或缺的一部分,它通常能幫助我們清晰地分離和組織項目中的代碼單元。
js中實現模塊的方法:
1.對象字面量表示法
2.Module模式
3.AMD模塊
4.CommonJS模塊
5.ECMAScript Harmony 模塊
對象字面量
對象字面量不需要使用new運算符進行實例化,但不能用在一個語句的開頭,因為開始的可能被解讀為一個塊的開始,在對象的外部,新成員可以使用如下賦值語句添加到對象字面量上,myModule.property = “someValue”。
var myModule = {
myProperty:"someValue",
myConfig:{
useCaching:true,
language:"en"
},
//基本方法
myMethod:function(){
//...
},
//根據當前配置輸出信息
myMethod2:function(){
console.log("Caching is:"+(this.myConfing.useCaching) ? "enabled":"disabled");
},
//重寫當前配置
myMethod3:function(newConfig) {
if(typeof newConfig ==="object"){
this.myConfig = newConfig;
console.log(this.myConfig.language);
}
},
};
myModule.myMethod3({
language:"fr",
usecaching:false
})
使用對象字面量有助於封裝和組織代碼。
在javascript中,Module模式用於進一步模擬類的概念,通過這種方式,能夠使一個單獨的對象擁有公有/私有方法和變量,從而屏蔽來自全局作用域的特殊部分。
module模式使用了閉包封裝“私有”狀態和組織。它提供了一種包裝混合公有/私有方法和變量的方式,防止起洩露至全局作用域,並與別的開發人員的接口發生沖突。通過該模式,只需要返回一個公有的API,而其他的一切則都維持在私有閉包裡。
在module模式內,由於閉包的存在,聲明變量和方法只在該模式內部可用,但在返回對象上定義的變量和方法,則對外部使用者都是可用的
module模式的實現
var testModule = (function(){
var counter = 0;
return {
incrementCounter:function(){
return ++counter;
},
resetCounter:function(){
console.log("counter value prior to reset" + counter);
counter = 0;
}
}
})();
//增加計數器
testModule.incrementCounter();
//檢查計數器值並重置
testModule.resetCounter();
代碼的其他部分是無法直接讀取incrementCounter()和resetCounter()。counter變量實際上是完全與全局作用域隔離的,因此它表現的就像是一個私有變量,它的存在被局限於模塊的閉包內,因為唯一能夠訪問其作用域的代碼就是這兩個函數。上述方法進行了有效的命名空間設置,所以在測試代碼中,所有的調用都需要加上前綴。
//包含命名空間、公有、和私有變量的Module模式
var myNamspace = (function(){
//私有計數器變量
var myPrivateVar = 0;
//記錄素有參數的私有函數
var myPrivateMethod = function(foo){
console.log(foo);
};
return {
//公有變量
muPublicVar:"foo",
//調用私有變量和方法的公有函數
myPublicFunction:function(bar){
myPrivateVar++;
myPrivateMethod(bar);
}
}
})();
引用全局變量
JavaScript有一個特性叫做隱式全局變量,不管一個變量有沒有用過,JavaScript解釋器反向遍歷作用域鏈來查找整個變量的var聲明,如果沒有找到var,解釋器則假定該變量是全局變量,如果該變量用於了賦值操作的話,之前如果不存在的話,解釋器則會自動創建它,這就是說在匿名閉包裡使用或創建全局變量非常容易,不過比較困難的是,代碼比較難管理,尤其是閱讀代碼的人看著很多區分哪些變量是全局的,哪些是局部的。
不過,好在在匿名函數裡我們可以提供一個比較簡單的替代方案,我們可以將全局變量當成一個參數傳入到匿名函數然後使用,相比隱式全局變量,它又清晰又快,我們來看一個例子:
//全局模塊
var myModule = (function(jQ,_){
function privateMethod1(){
jQ(".container").html(test);
}
return {
publicMethod:function(){
privateMethod1();
}
}
})(jQuery,_);
myModule.publicMethod();
//全局模塊
var myModule = (function(){
//模塊對象
var module = {};
privateVariale = "Hello";
function privateMethod(){
//...
}
module.publicproperty = "Foobar";
module.publiceMethod = function(){
}
return module;
})();
聲明全局變量,而不需要實現它們,並可以同樣地支持全局引入的概念
Module模式的還是存在一定的不足:
1. 由於我們訪問公有和私有成員的方式不同,當我們想改變可見性時,實際上我們必須修改每一個曾經使用過該成員的存在。
2. 我們無法訪問那些之後在方法裡面添加的私有成員,
3. 無法為私有成員創建自動化單元測試,bug需要修正補丁時會增加額外的復雜性。
4. 開發人員無法輕易地擴展私有方法
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。