一、CommonJS(同步加载模块)
允许模块通过require方法来同步加载所要依赖的其他模块,然后通过exports或者module.exports来导出需要暴露的接口。
使用方式:
//导入 require('module'); require('../app.js'); //导出 exports.getInfo=function(){}; module.exports=someValue;
CommonJS必须在node环境下才能使用,而浏览器是不支持CommonJS的,必须使用一些转换工具,将我们服务器端的CommonJS语法转化为浏览器识别的语句。
二、AMD
Common为服务器端而生,采用同步加载的方式,因此不适用浏览器。
AMD规范则是异步加载模块,允许指定回调函数,等模块异步加载完成后即可调用回调函数。
AMD的核心思想是通过define来定义一个模块,然后使用require来加载模块。
使用方式:
//Math.js define([], function(){ return { 'add': function(a, b) { return a + b; } } }) //main.js require.config({ paths : { "math" : "Math" } }); require(['math'], function (math) { console.log(math.add(2, 3)); }); console.log('done'); //done //5
三、CMD
CMD跟AMD的主要区别在于:
(1)对于以来的模块,AMD是提前执行,提前加载依赖,CMD是延迟执行;
(2)AMD推崇依赖前置,而CMD推崇依赖就近,按需加载。
四、ES6
ES6自带模块化,可以使用import关键字引入模块,通过export关键字导出模块,但由于ES6目前无法在浏览器中执行,所以只能通过babel将不被支持的import编译成当前受到广泛支持的require。
ES6和CommonJS模块的差异
(1)CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值得引用;
CommonJS对于基本数据类型,属于复制,同时在另一个模块可以对该模块输出的变量重新复制;
对于复杂数据类型,属于浅拷贝,由于两个模块引用的对象指向同一内存空间,因此对该模块的值做修改会影响另一个模块;
ES6模块中的值属于【动态只读引用】
- 对于只读来说,即不允许修改引入变量的值,import的变量是只读的,不论是基本数据类型还是复杂数据类型。当模块遇到import命令时,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。
- 对于动态来说,原始值发生变化,import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
(2)CommonJS模块是在运行时加载,而ES6模块是在编译时输出接口。因为CommonJS加载的是一个对象(module.exports属性),该对象只有在脚本运行完才会生成;而ES6模块不是一个对象,他的对外接口只是一种静态定义,在代码静态解析阶段就会生成。