Javascript設計模式學習之Module(模塊)模式

javascript實現模塊的幾種方法:

• 對象字面量表示法

• Module模式

• AMD模式

• CommonJS模式

• ECMAScript Harmony模塊

1. 對象字面量

/*1.對象字面量型*/
var myObjectLiteral = {

    variableKey: variableValue,

    functionKey: function(){

    }
}

//完整版
var myModule = {

    myProperty: "someValue",

    //配置對象
    myConfig: {
        useCaching: true,
        language: "zh-cn"
    },

    //基本方法
    myMethod: function(){
        //todo ..
    },

    //根據配置信息輸出內容
    myMethod2: function(){
        console.log("caching is:"+(this.myConfig.useCaching)?"enabled":"disabeld");
    },

    //重寫當前的配置信息
    myMethod3: function(newConfig){
        if(typeof newConfig === "object"){
            this.myConfig = newConfig;
            console.log(this.myConfig.language);
        }
    }


};

/*輸出結果值*/
myModule.myMethod();
myModule.myMethod2();  //caching is enabled;
var config = {
    useCaching: false,
    language: "en"
}
myModule.myMethod3(config);  //en

2. Module模式

最初被定義爲一種在傳統軟件工程中爲類提供私有和公有封裝的方法。
方式: Module模式用於進一步模擬類的概念,
好處: 可以使一個單獨的對象擁有公有/私有方法和變量,從而屏蔽來自全局做用域的特殊部分
結果: 函數名與在頁面上其餘腳本定義的函數衝突的可能性下降

2.1 私有

只須要返回一個公有API,其餘的一切均可以放在私有必包裏。該模式返回一個對象。

var testModule = (function(){
     var counter = 0;
     
     return {
         incrementCounter: function(){
              return ++counter;
         },
         resetCounter: function(){ 
              console.log("value: "+counter);
              counter = 0;
         }
    }
})();
console.log(testModule);  //打印出來的結果是一個對象
//Object {} incrementCounter: () resetCounter: ()

testModule.incrementCounter();    //增長計數器
testModule.resetCounter();        //充值計數器

在上面的例子中,counter變量實際上徹底與全局做用域隔離,進而表現的像一個私有變量。代碼的其餘部分沒法直接讀取incrementCounter()和resetCounter()。

包含命名空間,公有和私有變量的Module模式:

var myNamespace = (function(){
    var myPrivateVar = 0;
    var myPrivateMethod = function(foo){
        console.log(this+"/"+arguments.caller+"/"+arguments.callee);
        console.log(foo);
        console.log(myPrivateVar);
    };
    
    return {
         //公有變量
         myPublicVar: "foo",
         //調用私有變量和私有方法的公有函數
         myPublicFunction: function(bar){
              myPrivateVar++;
              myPrivateMethod(bar);
         }
    };
})();
console.log(myNamespace);
myNamespace.myPublicFunction("liuyidi");

2.2 使用Module模式實現一個購物車模塊

var basketModule = (function(){
    //定義一個私有數組
    var basket = [];
    
    function doSomethingPrivate(){
       //...
    }
    
    function doSomethingElsePrivate(){
       //...
    }
    
    //返回一個暴露出的公有對象
    return {
       //添加item到購物車
       addItem: function(values){
          basket.push(values);
       },
       
       //從購物車刪除item
       delItem: function(values){
          basket.pop(values);
       },
       
       //獲取購物車裏的item數
       getItemCount: function(){
          return basket.length;
       },
       
       //私有函數的公有形式別名
       doSomething: doSomethingPrivate,
       
       //獲取購物車裏全部item的價格總值
       getTotal: function(){
          var itemCount = this.getItemCount(),
              total = 0;
          while(itemCount--){
              total += basket[itemCount].price;
          }
          
          return total;
       }
    };    
})();
console.log(basketModule);
basketModule.addItem({item:"xs",price: 0.5});
basketModule.addItem({item:"bc",price: 0.6});
basketModule.addItem({item:"dj",price: 0.8});
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());
basketModule.delItem({item:"bc",price: 0.6});

(未完待續)

2.3 Module模式變化

2.3.1 引入混入

var myModule = (function($,_){
    
    function privateMethod1(){
        $(".container").html("test");
    }
    
    function privateMethod2(){
        console.log(_.min([10, 5, 100, 2, 1000]));
    }
    
    return {
        publicMethod: function(){
           privateMethod1();
        }
    }
})(jQuery,_);

2.3.2 引出

聲明一個全局對象以後,再返回

var myModule = (function(){
   //模塊對象
   var module = {},
       privateVar = "hello,world";
   
   function privateMethod(){
      //...
   }

   module.publicProperty = "Foobar";
   module.publicMethod = function(){
      console.log(privateVar);
   };

   return module;
})();

2.3.3 工具包和特定框架的Module模式實現

Dojo,ExtJS,YUI,jQuery