前端模块规范:AMD规范、CMD规范、CommonJS规范、ES6 Module
CommonJS规范
CommonJS对模块的定义主要分为模块引用、模块定义和模块标识3个部分。
1、模块引用
模块引用的示例代码如下:
var math = require('math');
在CommonJS规范中,存在require()方法,这个方法接受模块标识,以此引入一个模块的API到当前上下文中。
2、模块定义
在模块中,上下文提供require()方法来引入外部模块。对应引入的功能,上下文提供了exports对象用于导出当前模块的方法或者变量,并且它是唯一导出的出口。在模块中,还存在一个module对象,它代表模块自身,而exports是module的属性。在Node中,一个文件就是一个模块,将方法挂载在exports对象上作为属性即可定义导出的方式:
// math.js
exports.add = function () {
var sum = 0,
i = 0,
args = arguments,
l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
在另一个文件中,我们通过require()方法引入模块后,就能调用定义的属性或方法了:
// program.js
var math = require('math');
exports.increment = function (val) {
return math.add(val, 1);
};
模块标识
模块标识其实就是传递给require()方法的参数,它必须是符合小驼峰命名的字符串,或者以’.’、’..'开头的相对路径,或者绝对路径。它可以没有文件名后缀.js。
它的意义在于将类聚的方法和变量等限定在私有的作用域中,同时支持引入和导出功能以顺畅地连接上下游依赖。
AMD规范
AMD规范的全称是“Asychronous Module Definition”,即“异步模块定义”。
它的模块定义如下:
define(id?, dependencies?, factory);
其中模块id和依赖是可选的,factory的内容就是实际代码的内容。
如:
define(function() {
var exports = {};
exports.sayHello = function() {
alert('Hello from module: ' + module.id);
};
return exports;
});
和CommonJS不同之处在于AMD模块需要define来明确定义一个模块(Node是隐式包装),目的是进行作用域隔离,仅在需要的时候被引入,避免掉全局变量污染和不小心被修改;
另一个区别是内容需要通过返回值的方式实现导出。
AMD规范需要再声明模块的时候指定所有依赖,通过形参传到模块内容中。
define(['dep1', 'dep2'], function (dep1, dep2) {
return function() {};
})
CDM规范
和AMD规范的主要区别在于定义模块和依赖引入的部分。
CMD支持动态引入。
define (function(require, export , module) {
// 模块代码
}
require,exports, module通过形参传递给模块,在需要依赖模块时,随时调用require()引入即可(更接近CommomJS)
define(function(require, exports) {
// 同步获取模块 a 的接口
var a = require('./a');
// 调用模块 a 的方法
a.doSomething();
// 异步加载多个模块,在加载完成时,执行回调
require.async(['./b', './c'], function(b, c) {
b.doSomething();
c.doSomething();
});
});
注意 :
require 是同步往下执行,require.async 则是异步回调执行。require.async 一般用来加载可延迟异步加载的模块。
如何兼容多种模块规范
以hello()方法定义到不同运行环境中,兼容Node、AMD、CMD以及常见的浏览器环境中:
;(function (name, definition) {
// 检测上下文环境是否为AMD或CMD
var hasDefine = typeof define === 'function',
// 检查上下文环境是否为Node
hasExports = typeof module !== 'undefined' && module.exports;
if (hasDefine) {
// AMD环境或CMD环境
define(definition);
} else if (hasExports) {
// 定义为普通Node模块
module.exports = definition();
} else {
// 将模块的执行结果挂在window变量中,在浏览器中this指向window对象
this[name] = definition();
}
})('hello', function () {
var hello = function () {};
return hello;
});
总结
AMD和require.js
AMD是“异步模块定义”,浏览器模块开发的规范。
特点:
- 实现js文件的异步加载(避免加载时网页失去响应);
- 声明模块时需要先指定依赖,推崇依赖前置,提前执行。
define(['dep1', 'dep2'], function (dep1, dep2) {
return function() {};
})
RequireJS核心原理是什么?(如何动态加载的?如何避免多次加载的?如何缓存的?)
RequireJS是基于AMD模块加载规范,使用回调函数来解决模块加载问题。
动态加载原理:RequireJS是使用创建script元素, 通过指定script元素的src属性来实现加载模块的。
特点:
实现js文件的异步加载(避免加载时网页失去响应);
管理模块直接的依赖,便于代码的编写和维护。
CMD和sea.js
CMD是“通用模块”定义。浏览器模块开发的规范。
CMD推崇依赖就近、延迟执行。
AMD和CMD区别是:AMD是依赖提前定义;CMD是使用的时候再require。
自身可以
CommonJS和Node.js
CommonJS是服务器端模块的规范,Node.js采用了这个规范。
CommonJS规范一个单独的文件就是一个模块,加载模块使用require方法,该方法读取一个文件并执行。最后返回文件内部的exports对象。
CommonJS是同步加载模块的。所以只有加载完才能继续后面的操作。
Node.js主要是服务端编程,所以加载的模块一般存于本地磁盘,加载起来比较快,不用考虑异步加载的方式。
ES6 Module
ES6在语言的标准上实现模块功能,而且实现的很简单,
ES6模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
ES6的设计思想,是尽量静态化,使得编译时就可以确认模块的依赖关系,以及输入和输出的变量。
ES6模块不是对象,而是通过export命令显示指定输出的代码,输入也使用静态命令的形式。
ES6 Module可以在编译时就完成模块编译,效率比CommonJS要高。