青山

模块加载方案的比较与分析

2021/01/07 Blog 共 3076 字，约 9 分钟

什么是模块？

在程序设计中，为完成某一功能所需的一段程序或子程序被称为模块。通过导出/导入模块，可以方便地复用与组织代码。Javascript 在设计之初并没有加入模块化设计，但是随着 web 应用越来越复杂，模块化编程也变得不可或缺。

无规矩不成方圆，必须先定义模块开发规范。因此 CommonJS, AMD, CMD, ESModule 便应运而生。

CommonJS

传统 Javascript 运行于 web 浏览器客户端，依托于宿主环境运行。CommonJS API 的目的是脱离浏览器，使用 JS 开发更加丰富的应用程序，例如服务端应用程序，命令行工具，图形界面，混合应用开发。NodeJS 是 CommonJS 的一种实现。

CommonJS 定义了如下模块规范：

  • require: 全局函数，用以加载其他模块
    const fs = require('fs')
  • exports: 全局对象，用以对外导出 API
    exports.add = function(x,y){
  return x + y
}
  • module: 全局对象，指代模块本身
    module.id = 'aModule'

示例如下

// math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

// increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

// program.js
var inc = require('increment').increment;
var a = 1;
inc(a); // 2

module.id == "program";
  • require 函数导入模块时，需传入模块ID，以下是对模块ID的相关规定：
    1. 模块名是由一个或多个单词以正斜杠为分隔符拼接成的字符串： a/b
    2. 每个单词是小驼峰形式，或者是 ‘.’ 或 ‘..’
    3. 模块ID不需要带上文件扩展名：.js
    4. 模块名可以为 “相对的” 或 “顶级的”。如果首字符为”.”或”..”则为”相对的”模块名
    5. 顶级的模块名从根命名空间的概念模块解析
    6. 相对的模块名从 “require” 书写和调用的模块解析
  • CommonJS 中模块的加载是同步的

AMD

Asynchronous Module Definition(AMD) 制定了定义模块的规范，这样模块和模块的依赖可以被异步加载。 因为 CommonJS 模块是同步加载的，并不适用于前端环境，因此才会出现前端异步加载方案。

require.js 实现了 AMD。

  • define: 规范仅定义了这一个全局函数
define(id?:string, dependencies?: dep[], factory)

  • id: 其为此模块的名字，AMD 模块命名是 CommonJS 模块命名的超集，可以参考上面。

  • dependencies: 是当前定义模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。

    本规范定义了三种特殊的依赖关键字。如果”require”,”exports”, 或 “module”出现在依赖列表中，参数应该按照CommonJS模块规范自由变量去解析。

    依赖参数是可选的，如果忽略此参数，它应该默认为[“require”, “exports”, “module”]。然而，如果工厂方法的形参个数小于3，加载器会选择以函数指定的参数个数调用工厂方法。

  • factory: 模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

    如果工厂方法返回一个值（对象，函数，或任意强制类型转换为true的值），应该设置为模块的输出值。

    如果依赖性参数被忽略，模块加载器可以选择扫描工厂方法中的require语句以获得依赖性（字面量形为require(“module-id”)）。第一个参数必须字面量为require从而使此机制正常工作。

// 一个返回对象的匿名模块：
define(["alpha"], function (alpha) {
    return {
        verb: function(){
        return alpha.verb() + 2;
        }
    };
});

// 一个没有依赖性的模块可以直接定义对象：
define({
    add: function(x, y){
    return x + y;
    }
});

// 一个使用了简单 CommonJS 转换的模块定义：
define(function (require, exports, module) {
    var a = require('a'),
        b = require('b');

    exports.action = function () {};
});

// 创建一个名为"alpha"的模块，使用了require，exports，和名为"beta"的模块:
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
    exports.verb = function() {
        return beta.verb();
        //Or:
        return require("beta").verb();
    }
});

CMD

Common Module Definition(CMD), 与 AMD 类似，兼容了 CommonJS 的优点。

sea.js 便是此规范的实现。

  • define: 全局函数

define(function(require, exports, module) {
  // The module code goes here
});
  • 使用方式：
// math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

// increment.js
define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

// program.js
define(function(require, exports, module) {
  var inc = require('increment').increment;
  var a = 1;
  inc(a); // 2

  module.id == "program";
});

ESModule

ES6 中为 JS 引入模块，通过 import / export 进行模块的导入/导出:

// import
import v from "mod"
import * as ns from "mod";
import {x} from "mod";
import {x as v} from "mod";
import "mod";

// export
export var v;
export default function f() {}
export default function () {}
export default 42;
export {x};
export {v as x};
export {x} from "mod";
export {v as x} from "mod";
export * from "mod";
export * as ns from "mod";

文档信息

Search

    Table of Contents