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()函数之中。

假定现在有一个math.js文件,定义了一个math模块。那么,math.js书写方式如下:

// math.js
define(function() {
  var add = function(x, y) {
    return x + y;
  }

  return  {
    add: add
  }
})

加载方法如下:

// main.js
require(['math'], function(math) {
  alert(math.add(1, 1));
})

如果math模块还依赖其他模块,写法如下:

// math.js
define(['dependenceModule'], function(dependenceModule) {
  // ...
})

当require()函数加载math模块的时候,就会先加载dependenceModule模块。当有多个依赖时,就将所有的依赖都写在define()函数第一个参数数组中,所以说AMD是依赖前置的。这不同于CMD规范,它是依赖就近的。

三、CMD和SeaJS

CMD是SeaJS 在推广过程中对模块定义的规范化产出
对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不同)。
CMD推崇依赖就近,AMD推崇依赖前置。

//AMD
define(['./a','./b'], function (a, b) {
 
    //依赖一开始就写好
    a.test();
    b.test();
});
 
//CMD
define(function (requie, exports, module) {
     
    //依赖可以就近书写
    var a = require('./a');
    a.test();
     
    ...
    //软依赖
    if (status) {
     
        var b = requie('./b');
        b.test();
    }
});

虽然 AMD也支持CMD写法,但依赖前置是官方文档的默认模块定义写法。
AMD的API默认是一个当多个用,CMD严格的区分推崇职责单一。例如:AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。

四、UMD

UMD是AMD和CommonJS的糅合

AMD模块以浏览器第一的原则发展,异步加载模块。
CommonJS模块以服务器第一原则发展,选择同步加载,它的模块无需包装(unwrapped modules)。
这迫使人们又想出另一个更通用的模式UMD (Universal Module Definition)。希望解决跨平台的解决方案。

UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。
在判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。

(function (window, factory) {
    if (typeof exports === 'object') {
     
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
     
        define(factory);
    } else {
     
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});

五、ES6

es6通过import、export实现模块的输入输出。其中import命令用于输入其他模块提供的功能,export命令用于规定模块的对外接口。

export

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果希望外部文件能够读取该模块的变量,就需要在这个模块内使用export关键字导出变量。如:

// profile.js
export var a = 1;
export var b = 2;
export var c = 3;

下面的写法是等价的,这种方式更加清晰(在底部一眼能看出导出了哪些变量):

var a = 1;
var b = 2;
var c = 3;
export {a, b, c}

export命令除了输出变量,还可以导出函数或类。

export function foo(){}


function foo(){}
function bar(){}

export {foo, bar as bar2}

其中上面的as表示给导出的变量重命名。
要注意的是,export导出的变量只能位于文件的顶层,如果处于块级作用域内,会报错。如:

function foo() {
  export 'bar'; // SyntaxError
}

导出类

export default class {} // 关于default下面会说

export语句输出的值是动态绑定,绑定其所在的模块。

// foo.js
export var foo = 'foo';

setTimeout(function() {
  foo = 'foo2';
}, 500);

// main.js
import * as m from './foo';

console.log(m.foo); // foo
setTimeout(() => console.log(m.foo), 500); // foo2

import

import命令可以导入其他模块通过export导出的部分。

// abc.js
var a = 1;
var b = 2;
var c = 3;
export {a, b, c}

//main.js
import {a, b, c} from './abc';
console.log(a, b, c);

如果想为导入的变量重新取一个名字,使用as关键字(也可以在导出中使用)。

import {a as aa, b, c};
console.log(aa, b, c)

如果想在一个模块中先输入后输出一个模块,import语句可以和export语句写在一起。

import {a, b, c} form './abc';
export {a, b,  c}

// 使用连写, 可读性不好,不建议
export {a, b, c} from './abc';

模块的整体加载,使用*关键字。

// abc.js
export var a = 1;
export var b = 2;
export var c = 3;

// main.js
import * from as abc form './abc';
console.log(abc.a, abc.b, abc.c);

export default
在export输出内容时,如果同时输出多个变量,需要使用大括号{},同时导入也需要大括号。使用export defalut输出时,不需要大括号,而输入(import)export default输出的变量时,不需要大括号。

// abc.js
var a = 1, b = 2, c = 3;
export {a, b};
export default c;


import {a, b} from './abc';
import c from './abc'; // 不需要大括号
console.log(a, b, c) // 1 2 3

本质上,export default输出的是一个叫做default的变量或方法,输入这个default变量时不需要大括号。

// abc.js
export {a as default};

// main.js
import a from './abc'; // 这样也是可以的

// 这样也是可以的
import {default as aa} from './abc';
console.log(aa);

标签: none

添加新评论