模块化

为什么要使用模块化

在以前，网页功能很简单，几行JS就能满足交互需求。
现在网页变得越来越复杂，JS也变得越来越庞大，这个时候就要对JS进行模块化的管理，把不同功能的JS划分为不同模块，需要什么功能只要调用该模块就可以。
模块化以后，提高了代码的复用性，同时也能更好的管理文件与文件之间的依赖。

CMD、AMD、CommonJS

编写模块需要遵守一些规范，大家都按照一个规范进行模块的编写，这样才能相互调用。假如每个人都按自己的规范编写模块，就会变得混乱，失去了模块化的初衷。
CommonJS
Node.js的模块系统，就是参照CommonJS规范实现的
假如有这么一个Math模块，可以这样调用

var Math = require('Math')
Math.add(1,1)

通过require()这个方法加载模块，然后就可以使用该模块的功能
而在Math这个模块中，需要使用exports来输出该模块提供的功能

exports.add = function() {
    //code..
}

但是该规范在浏览器中有个缺陷，以上面的例子，当我require('Math')时，Math这个模块是存放在服务器中的，只有当Math模块下载完成了，Math.add(1,1)才会执行，就是所谓的“同步加载”。
假设我网速很慢，Math模块加载时间相当长，浏览器就会进入“假死状态”，这显然不是我们想要的。
这个问题在服务器端就不存在，因为服务器的模块都存在本地，加载模块的时间就是读取硬盘数据的时间。
AMD
AMD（Asynchronous Module Definition），意为"异步模块定义"。
在前端中，模块的加载都需要采取“异步加载”，避免出现假死的情况，因此诞生了AMD规范
而requie.js是遵循AMD的库之一
requie.js和CommonJS一样，都采用require()方法进行模块的加载，但是其接受不一样的参数

require([module], callback);

[module]为模块名，callback为模块加载成功后需要执行的函数，因此Math的例子可以写为

require(['Math'],function(Math){
    Math.add(1,1)
})

模块则要按ADM规范写

define(id?, dependencies?, factory);

id是可选参数，为该模块名称，不提供该参数，则模块名默认为该脚本的名字
dependencies?为该模块的依赖，依赖模块标识的数组字面量，如果该模块不依赖其他模块，这可忽略该参数，
如果忽略此参数，它应该默认为["require", "exports", "module"]
factory是工厂函数，是该模块的初始化函数或对象
上面的Math模块假设依赖了jQuery，在AMD规范中该这样写

define(['jquery'],function($) {
    var Math = (function() {
        return {
            add: function() {
                //code...
            }
        }
    })()
    return Math
})

CMD
CMD是Sea.js推广的过程中产生的，与AMD只是语法上的区别
ADM是预先加载好所有的依赖模块，而CMD是当我需要这个模块时，才进行加载
像上面到Math模块在CMD中这样写

define(function(require, exports, module){
    exports.add = function() {
        //code..
    }
})

require是一个方法，接受模块标识 作为唯一参数，用来获取其他模块提供的接口
exports是一个对象，用来向外提供模块接口
module是一个对象，上面存储了与当前模块相关联的一些属性和方法
调用Math时

var math = require('Math')
math.add()

由于github链接太慢，可能会出现bug
本地测试功能完整！
预览Demo
源码