模塊是任何強(qiáng)大應(yīng)用程序中不可或缺的一部分，它通常能幫助我們清晰地分離和組織項(xiàng)目中的代碼單元。

js中實(shí)現(xiàn)模塊的方法：
 1.對(duì)象字面量表示法
 2.Module模式
 3.AMD模塊
 4.CommonJS模塊
 5.ECMAScript Harmony 模塊

對(duì)象字面量

對(duì)象字面量不需要使用new運(yùn)算符進(jìn)行實(shí)例化，但不能用在一個(gè)語(yǔ)句的開頭，因?yàn)殚_始的可能被解讀為一個(gè)塊的開始，在對(duì)象的外部，新成員可以使用如下賦值語(yǔ)句添加到對(duì)象字面量上，myModule.property = “someValue”。

var myModule = {
 myProperty:"someValue",
 myConfig:{
 useCaching:true,
 language:"en"
 },
 //基本方法
 myMethod:function(){
 //...
 },
 //根據(jù)當(dāng)前配置輸出信息
 myMethod2:function(){
  console.log("Caching is:"+(this.myConfing.useCaching) ? "enabled":"disabled");
 },

 //重寫當(dāng)前配置
 myMethod3:function(newConfig) {
 if(typeof newConfig ==="object"){
  this.myConfig = newConfig;
  console.log(this.myConfig.language);
  }
 },


};
myModule.myMethod3({
language:"fr",
usecaching:false
})

使用對(duì)象字面量有助于封裝和組織代碼。

在javascript中，Module模式用于進(jìn)一步模擬類的概念，通過這種方式，能夠使一個(gè)單獨(dú)的對(duì)象擁有公有/私有方法和變量，從而屏蔽來自全局作用域的特殊部分。

module模式使用了閉包封裝“私有”狀態(tài)和組織。它提供了一種包裝混合公有/私有方法和變量的方式，防止起泄露至全局作用域，并與別的開發(fā)人員的接口發(fā)生沖突。通過該模式，只需要返回一個(gè)公有的API，而其他的一切則都維持在私有閉包里。
在module模式內(nèi)，由于閉包的存在，聲明變量和方法只在該模式內(nèi)部可用，但在返回對(duì)象上定義的變量和方法，則對(duì)外部使用者都是可用的

module模式的實(shí)現(xiàn)

var testModule = (function(){
 var counter = 0;
 return {
  incrementCounter:function(){
   return ++counter;
  },
  resetCounter:function(){
   console.log("counter value prior to reset" + counter);
   counter = 0;
  }
 }
})();

//增加計(jì)數(shù)器
testModule.incrementCounter();

//檢查計(jì)數(shù)器值并重置
testModule.resetCounter();

代碼的其他部分是無法直接讀取incrementCounter()和resetCounter()。counter變量實(shí)際上是完全與全局作用域隔離的，因此它表現(xiàn)的就像是一個(gè)私有變量，它的存在被局限于模塊的閉包內(nèi)，因?yàn)槲ㄒ荒軌蛟L問其作用域的代碼就是這兩個(gè)函數(shù)。上述方法進(jìn)行了有效的命名空間設(shè)置，所以在測(cè)試代碼中，所有的調(diào)用都需要加上前綴。

//包含命名空間、公有、和私有變量的Module模式
var myNamspace = (function(){
 //私有計(jì)數(shù)器變量
 var myPrivateVar = 0;

 //記錄素有參數(shù)的私有函數(shù)
 var myPrivateMethod = function(foo){
  console.log(foo);
 };

 return {
  //公有變量
  muPublicVar:"foo",

  //調(diào)用私有變量和方法的公有函數(shù)
  myPublicFunction:function(bar){
   myPrivateVar++;
   myPrivateMethod(bar);

  }
 }
})();

引用全局變量
JavaScript有一個(gè)特性叫做隱式全局變量，不管一個(gè)變量有沒有用過，JavaScript解釋器反向遍歷作用域鏈來查找整個(gè)變量的var聲明，如果沒有找到var，解釋器則假定該變量是全局變量，如果該變量用于了賦值操作的話，之前如果不存在的話，解釋器則會(huì)自動(dòng)創(chuàng)建它，這就是說在匿名閉包里使用或創(chuàng)建全局變量非常容易，不過比較困難的是，代碼比較難管理，尤其是閱讀代碼的人看著很多區(qū)分哪些變量是全局的，哪些是局部的。

不過，好在在匿名函數(shù)里我們可以提供一個(gè)比較簡(jiǎn)單的替代方案，我們可以將全局變量當(dāng)成一個(gè)參數(shù)傳入到匿名函數(shù)然后使用，相比隱式全局變量，它又清晰又快，我們來看一個(gè)例子：

//全局模塊
var myModule = (function(jQ,_){

  function privateMethod1(){
    jQ(".container").html(test);
  }
  return {
    publicMethod:function(){
      privateMethod1();
    }
  }
})(jQuery,_);
myModule.publicMethod();

//全局模塊 
var myModule = (function(){
//模塊對(duì)象
var module = {};
privateVariale = "Hello";

function privateMethod(){
  //...
}
module.publicproperty = "Foobar";
module.publiceMethod = function(){
}  
return module;

 })(); 

聲明全局變量，而不需要實(shí)現(xiàn)它們，并可以同樣地支持全局引入的概念

Module模式的還是存在一定的不足：
1. 由于我們?cè)L問公有和私有成員的方式不同，當(dāng)我們想改變可見性時(shí)，實(shí)際上我們必須修改每一個(gè)曾經(jīng)使用過該成員的存在。
2. 我們無法訪問那些之后在方法里面添加的私有成員，
3. 無法為私有成員創(chuàng)建自動(dòng)化單元測(cè)試，bug需要修正補(bǔ)丁時(shí)會(huì)增加額外的復(fù)雜性。
4. 開發(fā)人員無法輕易地?cái)U(kuò)展私有方法

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論