javascript模块化编程

一、模块的写法

1、原始写法

模块就是实现特定功能的一组方法。

只要把不同的函数简单的放在一起，就是一个模块

function m1(){
  console.dir("111");
}

function m2(){
  console.dir("222");
}

m1（）和m2（）组成了一个模块，使用的时候，直接调用就行了

m1();
=>111

缺点：“污染”了全局变量，无法保证不与其他模块发生变量名的冲突，而且模块成员间看不出直接关系。

2、对象写法

var module1 = new Object({
  count : 0,
  m1 : function(){
    console.dir("111");
  },
  m2 : function(){
    console.dir("222");
  }
});

函数m1（）和m（）被封装在module1对象里，使用的时候直接调用这个对象的属性即可

module.m1();
=>111

缺点：会暴露所有的模块成员，内部状态可以被外部改写

module1.count = 5;

3、立即执行函数写法

可以不暴漏私有成员

var module1 = (function(){
  var count = 0;
  var m1 = function(){
    console.dir('111');
  };
  var m2 = function(){
    console.dir("222");
  };
  return {
     m1 : m1,
    m2 : m2
  }
})();

使用方法

module1.m1();
=>111

此时外部无法读取内部变量

console.dir(module1.count);  //undefined

4、放大模式

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，此时需要放大模式

var module1 = (function (mod)){
  mod.m3 = function(){
    console.dir("3333");
  };
  return mod;
})(module1);   //若是var module3 = ....就是继承=>333

上面的代码为module1添加了一个新方法m3（），然后返回一个新的module1模块

5、宽放大模式

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在的空对象，这时就要采用款放大模式

var module1 = ( function (mod){
　　　　//...
　　　　return mod;
　　})(window.module1 || {});

宽放大模式就是立即执行函数的参数可以是空对象

6、输入全局变量

为了保证模块的独立性，必须显示的将其他变量输入模块

var module1 = (function ($, YAHOO) {
　　　　//...
　　})(jQuery, YAHOO);