1.commonJS语法:
暴露模块:module.exports = value或exports.xxx = value
引入模块:require(xxx),如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径
每个模块内部,module对象代表当前模块,它的exports属性(即module.exports)是对外的接口(暴露出去)。
加载某个模块,其实是加载该模块的module.exports属性。
// example.js
var x = 5;
var addX = function (value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
通过module.exports输出变量x和函数addX。
var example = require('./example.js');//如果参数字符串以“./”开头,则表示加载的是一个位于相对路径
console.log(example.x); // 5
console.log(example.addX(1)); // 6
require命令用于加载模块文件。require命令的基本功能是,读入并执行一个javascript文件,然后返回该模块的exports对象,如果没有的话就会报错。
2.AMD语法
定义没有依赖的模块
//定义没有依赖的模块
```define(function(){
return 模块
})
定义有依赖的模块
//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){
return 模块
})
引入模块
require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})
3.CMD
CMD规范专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行。
CMD规范整合了CommonJS和AMD规范的特点。
定义暴露模块:
//定义没有依赖的模块
define(function(require, exports, module){
exports.xxx = value
module.exports = value
})
//定义有依赖的模块
define(function(require, exports, module){
//引入依赖模块(同步)
var module2 = require('./module2')
//引入依赖模块(异步)
require.async('./module3', function (m3) {
})
//暴露模块
exports.xxx = value
})
引入模块
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
4.ES6
export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
ele.textContent = add(99 + basicNum);
}
注意:使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。
另一种方式
// export-default.js
export default function () {
console.log('foo');
}
模块默认输出, 其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
其他
如果当前的module文件非常大,可能造成堵塞可以如下操作
defer:等到整个页面正常渲染结束才会执行,
async:一旦下载完成,渲染引擎就会中断渲染,执行这个脚本以后再继续渲染。
如果有多个defer脚本,则会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的。
浏览器加载ES6模块时也使用script标签,但是要加入type=”module”属性。
由于type属性设为module,所以浏览器知道这是一个ES6模块
ES6模块与CommonJS模块的差异
CommonJS模块输出的是一个值的复制,ES6模块输出的是值的引用。
CommonJS模块是运行时加载,ES6模块是编译时输出接口。
因为CommonJS加载的是一个对象(即module.exports属性),该对象只有在脚本运行结束时才会生成。而ES6模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
总结
CommonJS 用于 node 端,是同步加载的
AMD 依赖于 requirejs,是异步加载的,是提前加载,立即加载
CMD 依赖于 seajs ,是异步加载,延后加载,就近加载,用时加载