当一个网站复杂度较高需要多人协作开发时，传统的非模块化编程模式容易导致代码冲突和依赖等问题，而模块化编程的诞生正是为了解决此类问题。然而，在ES6之前，原生JavaScript是不支持模块化的，因此就出现了一系列的JavaScript库来实现此功能，这些库主要遵循以下三种规范：
① CommonJS
② AMD
③ CMD
接下来我就粗略地讲讲这三种规范。
一、CommonJS规范
关键词： module，exports，require
CommonJS规范下的模块调用是同步的，也就是说必须等模块加载完成之后，接下来的代码才能继续运行。因此，该规范主要适用于服务端，因为服务端可以直接从硬盘中调用所需要的模块，而这个过程速度是非常快的。相比之下，通过网络调用所需模块的浏览器客户端则不适合使用该规范。
目前使用该规范的典型代表有：Node.js、微信小程序。
下面以Node.js中的两个小例子，简单讲讲CommonJS规范下的模块化编程。
1. 无返回值的模块调用
//module.js
console.log('这是一个模块。');
//main.js
require('./module'); // 或写成 require('./module.js')，但千万注意不能写成 require('module')
以上module.js和main.js两个文件处于同一目录下。
2. 有返回值的模块调用
//module.js
function foo(){
console.log('这是一个模块。');
}
module.exports = { // 此处提供模块对外接口
foo: foo // 此处对外接口中的方法名不一定要与以上定义的方法名一致，比如可以写成 func: foo，那么此时调用时就应该写成 module.func()
};
//main.js
var module = require('./module.js'); // 加载module模块
module.foo(); // 此处调用module模块下的foo方法，该方法名须与模块中对外接口方法名一致
二、AMD规范
关键词： define，require
与CommonJS不同，AMD规范下的模块调用是异步的，主要适用于浏览器客户端。
目前使用该规范的典型代表有：require.js、curl.js。
下面以require.js为例，简单讲讲AMD规范下的模块化编程。
<!--HTML-->
<script src="scripts/require.js"></script>
<script src="scripts/main.js" data-main="scripts/main"></script>
1. 无返回值的模块调用
//module.js
console.log('这是一个模块。');
//main.js
require(['scripts/module']); // 请求的模块路径用数组表示
2. 有返回值的模块调用
//module.js
function foo(){
console.log('这是一个模块。');
}
define(function(){
return {
foo: foo
}
});
//main.js
require(['scripts/module'],function(module){
module.foo();
});
三、CMD规范
关键词： use，define，require，exports，module
CMD规范结合了以上两种规范的特点，既可以同步调用，也可以异步调用，在语法上也非常相似。
目前使用该规范的典型代表有：sea.js。
下面就以sea.js为例，简单讲讲CMD规范下的模块化编程。
<!--HTML-->
<script src="scripts/sea.js"></script>
<!--引入主模块，模块根目录为sea.js所在目录，有点类似于C语言中的main函数-->
<script type="text/javascript">
seajs.use('main');
</script>
1. 无返回值的模块调用
//module.js
console.log('这是一个模块。');
//main.js
define(function(require,exports,module){
require('module');
});
这里需要重点说明一下，define()中回调函数中所传参数名称不允许修改。
2. 有返回值的模块调用
定义模块：
//module.js
function foo(){
console.log('这是一个模块。');
}
define(function(require,exports,module){
//也可以直接通过return方式暴露模块接口，这样就与AMD规范相同
module.exports = {
foo: foo
}
});
调用模块存在同步和异步两种方式：
① 同步调用
//main.js
define(function(require,exports,module){
var module = require('module');
module.foo();
});
② 异步调用
//main.js
define(function(require,exports,module){
require.async('module',function(module){
module.foo();
});
});
本次有关JavaScript模块化编程规范的分享就到这里，若有不到之处，欢迎指正，谢谢！
