js模块化

AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别,AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);
AMD的问题是每次在使用的时候必须引入实现了AMD规范的一些库,比如require.js
CMD规范和AMD规范类似,cmd 的产物是 seajs,同样是受 commonjs 启发,主要区别是CMD规范是就近加载依赖,延迟执行,只有到require时依赖才执行。
而CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行
AMD定义模块
define(id?, dependencies?, factory);
AMD加载模块
require([module], callback);
在 CMD 规范中,一个模块就是一个文件。
CMD定义模块
define(factory);
我们可以通过 SeaJs 的 use 方法加载模块
seajs.use([module], callback);

UMD 是 (Universal Module Definition) 通用模块定义 的缩写。UMD 是 AMD 和 CommonJS 的一个糅合。AMD 是浏览器优先,异步加载;CommonJS 是服务器优先,同步加载。既然要通用,怎么办呢?那就先判断是否支持 node 的模块,支持就使用 node;再判断是否支持 AMD,支持则使用 AMD 的方式加载。这就是所谓的 UMD。
umd
if (typeof exports === 'object' && typeof module === 'object') {
// CommonJS
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
// AMD
define(factory);
} else {
}
ES6 模块化
ES6 模块的设计思想是尽量的 静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象
在 ES6 中,我们使用 export 关键字来导出模块,使用 import 关键字来引入模块
Commonjs输出值的拷贝,ESModule输出值的引用
实际时ESModule最终会被转化为Commonjs投入生产,实际的转化过程应该是: 提升所有的 import,将使用 export const的转化为exports.xxx,export default转化为exports.default,
注意:CommonJS中导出是module.exports,ES6中导出是export,
模块的循环加载
a.js require了b.js,同时b.js require了a.js,此时就会出现模块的循环加载
Commonjs的解决机制:一旦发现模块循环加载,就只输出已执行的部分,还未执行的部分不会输出

你可能感兴趣的:(js模块化)