前端模块化介绍

前端模块化实现

1）CommonJS

	CommonJS 是一个服务器端的同步模块化规范
	实现者：Node.js

//a.js
module.exports = {
 	a:function(){}
 	b:'xxx'
}

加载方式：

//b.js
var m = require('./a');
m.a();

2) AMD

	AMD 就是异步模块定义规范，是一个客户端的JS模块化规范。
	具体说就是模块必须采用特定的 define()  函数来定义。
	实现者：require.js
	假定现在有一个 math.js 文件，它定义了一个 math 模块。写法如下：

//math.js
define(function () {
    var add = function (x, y) {
        return x + y;
    };
    return {
        add: add
    }
})

加载方法如下：

//main.js
require(['math'],function(math){
    alert(math.add(1,1))
})

如果这个模块还依赖其他模块，那么 define() 函数的第一个参数必须是一个数组，指明该模块的依赖性。

define(['myLib'], function (myLib) {
    function foo() {
        myLib.doSomething();
    }
    return {
        foo: foo
    }
})

当require() 函数加载上面这个模块的时候，就会先加载 myLib.js 文件。

3) CMD

	CMD 是国内的程序员提出的通用模块定义，可用于客户端，也容易转换成服务器端
	实现者：sea.js

4) ES6 的模块化

	w3c 官方提出的新一代JS规范，包含了模块化规范语法
	实现者：Babel