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