说明#

  所谓的模块化，是换功能去划分模块，现在的网页越来越像桌面应用程序，随着团队协作、进度管理、单元测试等等开发模式，网页开发变得越来越复杂，引入的javascript文件越来越多。
  模块化是软件工程的方法，开发者只需开发自己的核心模块，其他模块只需通过引入的方式即可（jquery、vue.js也是module）

原始模块写法#

1
var v1;
2
function f1(){
3

4
}
5
function f2(){
6

7
}

  上面的简单放在一起就是一个module了，需要调用直接f1()和f2()调用就可以了。
  但是这样的写法会污染全局变量，而且 变量名也有可能与其他模块冲突，而且模块之间看不出直接的关系。

对象写法#

1
var module=new Object{
2
    _count:0,
3
    f1:function(){
4

5
    },
6
    f2:function(){
7

8
    }
9
}

  像上面的写法，只需module.f1()即可调用函数，但是缺点是可以直接访问，对象内的私有变量，内部状态可以被外部直接编写。

1
module._count=5;

立即执行函数写法(javascript模块化的基本写法)#

这样的写法，外部无法直接获取内部变量

1
var module=(function(){
2
    var _count=0;
3
    var f1=function(){
4
        return _count;
5
    };
6
    var f2=function(){
7
        _count++;
8
    };
9
    return {f1:f1,f2:f2};
10
})();
11
//外部无法直接获取内部变量
12
　console.info(module1._count); //undefined

放大模式(augmentation)#

如果一个模块很大，需要分成几个小模块，或者需要一个模块继承另一个模块

1
var module=(function(mod){
2
    mod.m3=function(){
3

4
    }
5

6
})(module);

module新增一个m3，并返回给新的module。

宽放大模式（Loose augmentation）#

  在开发中，大部分模块可能是直接网上获取的，所以我们无法保证哪一个预先加载完，也就是有可能会加载到一个module空对象，所以需要使用宽放大模式。

1
var module=(function(mod){
2
    mod.m3=function(){
3

4
    }
5

6
})(window.module||{});

  与”放大模式”相比，＂宽放大模式＂就是”立即执行函数”的参数可以是空对象。

模块内输入全局变量#

  模块内部最好不要直接引用全局变量

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

  上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。