JavaScript Module

SHOYUF

CommonJS (Sync)

Export:

module.export = `Object` `Function`
exports.module = `Object` `Function`

Import

const module = require('./module')

CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

AMD (Async)

Export: define(id?, dependencies?, factory);

第一个参数 id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。
第二个参数,dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
第三个参数,factory,是一个需要进行实例化的函数或者一个对象。

define("module", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});

Import

require(["module", "./module"], function(module, file) { /* ... */ });

RequireJS (Async)

RequireJS 是一个前端的模块化管理的工具库,遵循AMD规范,它的作者就是AMD规范的创始人 James Burke。所以说RequireJS是对AMD规范的阐述一点也不为过。

CMD (Async)

对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。
CMD推崇依赖就近,AMD推崇依赖前置。

Export:

define(function(require, exports, module) {
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

Import

define(function(require, exports, module) {
  var inc = require('Spinning').doSomething;
  module.id == "program";
});

UMD ()

类似于兼容 CommonJS 和 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 ...
});

EcmaScript 6 Module

Quotes:

  1. Webpack中文指南
  2. AMD, CMD, CommonJS和UMD - SegmentFault
  3. 1

本站使用署名 4.0 国际 (CC BY 4.0) 创作共享协议,转载请署名,图片请转存。

提醒:本文最后更新于 425 天前,文中所描述的信息可能已发生改变,请谨慎使用。