分类 javascript学习 下的文章

javascript模块化规范CommonJS、AMD、CMD、UMD、ES6学习

一、CommonJS

官网:http://www.commonjs.org/

CommonJS主要作为服务器端模块的规范,以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目。Node应用采用 CommonJS 模块规范。

模块必须通过 module.exports 导出对外的变量或接口,通过 require() 来导入其他模块的输出到当前模块作用域中。
根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的。
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

代码示例
// a.js
var a = {
    "a":a,
    "b":b
}
module.export = a //模块导出
// b.js
var b = require('./a.js') //模块引入

二、AMD和RequireJS

CommonJS解决了模块化的问题,但这种同步加载方式并不适合于浏览器端。

AMD是”Asynchronous Module Definition”的缩写,即”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。这里异步指的是不堵塞浏览器其他任务(dom构建,css渲染等),而加载内部是同步的(加载完模块后立即执行回调)。

AMD也采用require命令加载模块,但是不同于CommonJS,它要求两个参数:

require([module], callback);

第一个参数[module],是一个数组,里面的成员是要加载的模块,callback是加载完成后的回调函数。如果将上述的代码改成AMD方式:

require(['math'], function(math) {
  math.add(2, 3);
})

其中,回调函数中参数对应数组中的成员(模块)。

requireJS加载模块,采用的是AMD规范。也就是说,模块必须按照AMD规定的方式来写。
具体来说,就是模块书写必须使用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接写在define()函数之中。




- 阅读剩余部分 -