一、第一阶段——无模块化
- 将所有JS文件都放在一块，代码执行顺序就按照文件的顺序执行。
- 缺点是污染全局作用域。每一个模块都是暴露在全局中的，容易产生命名冲突。还有要手动处理各代码的依赖关系。
<script src="jquery.js"></script>
<script src="jquery_scroller.js"></script>
<script src="main.js"></script>
<script src="other.js"></script>
二、第二阶段——commonJS规范
是一个JavaScript模块化的规范，一个文件就是一个模块，内部定义的变量就属于这个模块里的，不会对外暴露，所以不会污染全局变量。
- 通过require引入模块
- 通过module.exports导出模块
//a.js
var num = 100;
var add = function(val){
return val + num
}
module.exports.num = num;
module.exports.add = add ;
//b.js
var moduleA = require('./a.js')
var fn = moduleA.add;
- 同步加载模块，等当前模块加载完成了才进行下一步，服务器端文件都是保存在硬盘上，所以同步加载没问题。但是浏览器上，需要把文件从服务器端请求过来，比较慢，所以同步加载不适合用在浏览器上
三、第三阶段——AMD规范
因为commonJS规范不适用于浏览器，因为要从服务器加载文件，不能用同步模式，所以有了AMD规范，该规范的实现，就是requireJs了。
define(function () {
var alertName = function (str) {
alert("I am " + str);
}
var alertAge = function (num) {
alert("I am " + num + " years old");
}
return {
alertName: alertName,
alertAge: alertAge
};
});
//引入模块：
require(['alert'], function (alert) {
alert.alertName('JohnZhu');
alert.alertAge(21);
});
- 依赖前置，require([dep1, dep2],callback)，先加载依赖再执行回调函数
- 优点是可以在浏览器环境中异步加载模块，而且可以并行加载多个模块
四、第四阶段——CMD规范
和requirejs非常类似，即一个js文件就是一个模块，但是可以通过按需加载的方式，而不是必须在模块开始就加载所有的依赖。
define(function(require, exports, module) {
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
特殊规范——UMD
CommonJS、AMD、CMD并行的状态下，就需要一种方案能够兼容他们，这样我们在开发时，就不需要再去考虑依赖模块所遵循的规范了，而UMD的出现就是为了解决这个问题。
五、第五阶段——ES6的模块化
- 定义：通过import引入依赖，通过export导出依赖
- 机制：ES6的模块机制在依赖模块时并不会先去预加载整个脚本，而是生成一个只读引用，并且静态解析依赖，等到执行代码时，再去依赖里取出实际需要的模块
- 特点：编译时加载，不允许在里边引用变量，必须为真实的文件路径。可以通过调用import()语句，会生成一个promise去加载对应的文件，这样子就是运行时加载，可以在路径里边编写变量
- 缺点：浏览器暂不支持，需要babel编译过
网友评论