zengliangxi 2019-11-03
CommonJS 是一个有志于构建 JavaScript 生态圈的组织。它有一个 邮件列表,有很多开发者参与其中。 整个社区致力于提高 JavaScript 程序的可移植性和可交换性,无论是在服务端还是浏览器端。
JavaScript 并没有内置模块系统(反正现在没有),于是 CommonJS 创造了自己的。 传统的 CommonJS 模块如下:
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
仔细看上面的代码,您会注意到 require
是同步的。也就是说, 模块系统需要在 require 方法调用返回 之前,就能判定给定模块是否可用(并初始化它)。
然而,这在浏览器端问题多多。
浏览器端,加载 JavaScript 最佳、最容易的方式是在 document
中插入 <script>
标签。但脚本标签天生异步,传统 CommonJS 模块在此类环境中无法正常加载。
解决思路之一是,开发一个服务器端组件,对模块代码作静态分析,将模块与它的依赖列表一起返回给浏览器端。 这很好使,但需要安装额外的组件,并因此要调整一系列底层架构。
另一种解决思路是,用一套标准模板来封装模块定义:
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 });
若干说明源自 FlyScript 的文档。 非常感谢 Kevin H. Smith。