以下全部是自己的理解
为了更好的引用代码库,模块的概念产生了。为了更好的规范模块,模块标准产生了。常见的是CommonJS, AMD, CMD,ES6 Module.
CommonJS:
javascript只支持在浏览器里执行,为了让js在服务器端也可以执行,CommonJS API定义了一些应用程序常用的一些功能的实现。在浏览器编写程序可以不使用模块化,毕竟前端程序相对简单,可是在服务器端为了和操作系统和其他应用程序交互,就要使用模块。 NodeJS, webpack都是以CommonJS规范写的。
CommonJS有一个全局方法require(),用于加载模块。
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
每个文件就是一个模块,CommonJS规范规定每个模块内部module变量代表当前模块,这个变量是一个对象,exports属性是对外的接口,加载某个模块就是加载该模块的module.exports属性。
AMD:异步模块定义
服务器端编程一般文件已经存在于本地硬盘上,加载起来比较快。在浏览器环境下,要从服务器端加载模块,就要采用非同步模式,所以浏览器端一般采用AMD规范。
AMD规范使用define方法定义模块,define(id?, dependencies?, factory);
实现了AMD规范的库:require.js, curl.js
require.js的诞生,就是为了解决这两个问题:
1. 实现js文件的异步加载,避免网页失去响应;
2. 管理模块之间的依赖性,便于代码的编写和维护。
CMD:通用模块定义
实现了CMD的规范是sea.js
AMD CMD的区别:AMD推崇依赖前置,提前执行,CMD推崇依赖就近,延迟执行
/** AMD写法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {
// 等于在最前面声明并初始化了要用到的所有模块
a.doSomething();
if (false) {
// 即便没用到某个模块 b,但 b 还是提前执行了
b.doSomething()
}
});
/** CMD写法 **/
define(function(require, exports, module) {
var a = require(‘./a‘); //在需要时申明
a.doSomething();
if (false) {
var b = require(‘./b‘);
b.doSomething();
}
});
/** sea.js **/
// 定义模块 math.js
define(function(require, exports, module) {
var $ = require(‘jquery.js‘);
var add = function(a,b){
return a+b;
}
exports.add = add;
});
// 加载模块
seajs.use([‘math.js‘], function(math){
var sum = math.add(1+2);
});
ES6 Module
浏览器和服务器通用的模块解决方案,主要有两个命令组成:export, import. export用于规定模块的对外接口, import用于引入其他模块。
import命令会被javascript引擎静态分析,在编译时就引入模块代码,不是在代码运行时。
缺点:无法实现条件动态加载。
参考文章:http://www.cnblogs.com/chenguangliang/p/5856701.html