CommonJS与ES6模块规范

发表于 | | 阅读次数 | 本文总阅读量 次

在ES6之前，模块规范最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 –《ES6标准入门》

以上大体说明了ES6的模块规范和其他主流的规范剑的区别，接下来结合这几天的学习，总结下CommonJS和ES6这两种规范，以及它们的差异和优缺点，纯属个人学习总结，不喜勿喷哦！

CommonJS模块规范

一个文件就是一个模块，每个模块内部都有一些默认定义好的变量和方法。

CommonJS模块的特点如下：

  1. 所有代码都运行在模块作用域，不会污染全局作用域。

  2. 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

  3. 模块加载的顺序，按照其在代码中出现的顺序。

1.module对象

module变量代表当前模块，是一个对象。它有以下属性：

  • module.id 模块的识别符，通常是带有绝对路径的模块文件名。
  • module.filename 模块的文件名，带有绝对路径。
  • module.loaded 返回一个布尔值，表示模块是否已经完成加载。
  • module.parent 返回一个对象，表示调用该模块的模块。
    • 在命令行下调用某个模块，比如node something.js，那么module.parent就是undefined，
    • 在脚本之中调用，比如require(‘./something.js’)，那么module.parent就是调用它的模块。
    • 利用这一点，可以判断当前模块是否为入口脚本。
  • module.children 返回一个数组，表示该模块要用到的其他模块。
  • module.exports 表示模块对外输出的值，加载某个模块，其实是加载该属性。

下面是一个示例文件，最后一行输出module变量

1
2
3
4
// example.js
var jquery = require('jquery');
exports.$ = jquery;
console.log(module);
执行这个文件，命令行会输出如下信息：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{ id: '.',
  exports: { '$': [Function] },
  parent: null,
  filename: '/path/to/example.js',
  loaded: false,
  children:
   [ { id: '/path/to/node_modules/jquery/dist/jquery.js',
       exports: [Function],
       parent: [Circular],
       filename: '/path/to/node_modules/jquery/dist/jquery.js',
       loaded: true,
       children: [],
       paths: [Object] } ],
  paths:
   [ '/home/user/deleted/node_modules',
     '/home/user/node_modules',
     '/home/node_modules',
     '/node_modules' ]
}

2.require命令

2.1.require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错

2.2.require命令调用自身，等于是执行module.exports

1
2
3
4
5
module.exports = function () {
  console.log("hello world")
}
require('./example2.js')() //输出 hello world。

2.3 加载规则

  1. 如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require(‘/home/marco/foo.js’)将加载/home/marco/foo.js。
  2. 如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require(‘./circle’)将加载当前脚本同一目录的circle.js。
  3. 如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。
  4. 如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require(‘example-module/path/to/file’)，则将先找到example-module的位置，然后再以它为参数，找到后续路径。
  5. 如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。
  6. 如果想得到require命令加载的确切文件名，使用require.resolve()方法。
举例来说，脚本/home/user/projects/foo.js执行了require(‘bar.js’)命令，Node会依次搜索以下文件.
1
2
3
4
5
/usr/local/lib/node/bar.js
/home/user/projects/node_modules/bar.js
/home/user/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

2.4 模块的缓存

第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。

2.5 require.main

require方法有一个main属性，可以用来判断模块是直接执行，还是被调用执行。

直接执行的时候（node module.js），require.main属性指向模块本身。

1
2
require.main === module
// true

调用执行的时候（通过require加载该脚本执行），上面的表达式返回false。

ES6模块规范

以上主要阐述了CommonJS的规范，接下来将从ES6模块的规范和CommonJS规范的差异处进入，一点点剖析二者的不同。

1. 加载方式

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确
定这些东西。

1
2
3
4
5
// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

上面代码的实质是整体加载fs模块**（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

1
2
3
// ES6模块
import { stat, exists, readFile } from 'fs';
上

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”，即ES6可以在编译时就完成模块加载，效率要比CommonJS
模块的加载方式高。当然，这也导致了没法引用ES6模块本身，因为它不是对象。

2.ES6模块加载的实质

ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。，而ES6模块输出的是值的引用。

  1. CommonJS的例子
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // lib.js
    var counter = 3;
    function incCounter() {
    counter++;
    }
    module.exports = {
    counter: counter,
    incCounter: incCounter,
    };
    上面代码输出内部变量counter和改写这个变量的内部方法incCounter。然后，在main.js里面加载这个模块。
    // main.js
    var mod = require('./lib');
    console.log(mod.counter); // 3
    mod.incCounter();
    console.log(mod.counter); // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非
写成一个函数，才能得到内部变动后的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get counter() {
return counter
},
incCounter: incCounter,
};
//$ node main.js
//3
//4

上面代码中，输出的counter属性实际上是一个取值器函数。现在再执行main.js，就可以正确读取内部变量counter的变动了。

ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到
时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引
用，并且不会缓存值，模块里面的变量绑定其所在的模块。

  1. ES6模块的例子
1
2
3
4
5
6
7
8
9
10
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

2. 循环加载

2.1 CommonJS模块的加载原理

CommonJS的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。

require命其实不是一个全局命令，而是指向当前模块的module.require命令，而后者又调用Node的内部命令Module._load。

1
2
3
4
5
6
7
8
9
Module._load = function(request, parent, isMain) {
  // 1. 检查 Module._cache，是否缓存之中有指定模块
  // 2. 如果缓存之中没有，就创建一个新的Module实例
  // 3. 将它保存到缓存
  // 4. 使用 module.load() 加载指定的模块文件，
  //    读取文件内容之后，使用 module.compile() 执行文件代码
  // 5. 如果加载/解析过程报错，就从缓存删除该模块
  // 6. 返回该模块的 module.exports
};

上面的第4步，采用module.compile()执行指定模块的脚本，逻辑如下。

1
2
3
4
5
6
Module.prototype._compile = function(content, filename) {
  // 1. 生成一个require函数，指向module.require
  // 2. 加载其他辅助方法到require
  // 3. 将文件内容放到一个函数之中，该函数可调用 require
  // 4. 执行该函数
};

上面的第1步和第2步，require函数及其辅助方法主要如下。

1
2
3
4
5
require(): 加载外部模块
require.resolve()：将模块名解析到一个绝对路径
require.main：指向主模块
require.cache：指向所有缓存的模块
require.extensions：根据文件的后缀名，调用不同的执行函数

循环加载

  • CommonJS

CommonJS模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部
分，还未执行的部分不会输出。

让我们来看，Node官方文档里面的例子。脚本文件a.js代码如下。

1
2
3
4
5
exports.done = false;
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 执行完毕');

上面代码之中，a.js脚本先输出一个done变量，然后加载另一个脚本文件b.js。注意，此时a.js代码就停在这里，等待b.js执行完毕，再往下执行。

再看b.js的代码。

1
2
3
4
5
exports.done = false;
var a = require('./a.js');
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕');

上面代码之中，b.js执行到第二行，就会去加载a.js，这时，就发生了“循环加载”。系统会去a.js模块对应对象的exports属性取值，可是因为a.js还
没有执行完，从exports属性只能取回已经执行的部分，而不是最后的值。

a.js已经执行的部分，只有一行。

1
exports.done = false;

然后，b.js接着往下执行，等到全部执行完毕，再把执行权交还给a.js。于是，a.js接着往下执行，直到执行完毕。我们写一个脚本main.js，验证
这个过程。

1
2
3
var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);

执行main.js，运行结果如下。

1
2
3
4
5
6
$ node main.js
在 b.js 之中，a.done = false
b.js 执行完毕
在 a.js 之中，b.done = true
a.js 执行完毕
在 main.js 之中, a.done=true, b.done=true

上面的代码证明了两件事。一是，在b.js之中，a.js没有执行完毕，只执行了第一行。二是，main.js执行到第二行时，不会再次执行b.js，而是输
出缓存的b.js的执行结果，即它的第四行。

1
exports.done = true;
  • ES6

ES6模块是动态引用，如果使用import从一个模块加载变量（即import foo from ‘foo’），那些变
量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

请看下面这个例子。

1
2
3
4
5
6
7
8
9
10
// a.js如下
import {bar} from './b.js';
console.log('a.js');
console.log(bar);
export let foo = 'foo';
// b.js
import {foo} from './a.js';
console.log('b.js');
console.log(foo);
export let bar = 'bar';

上面代码中，a.js加载b.js，b.js又加载a.js，构成循环加载。执行a.js，结果如下。

1
2
3
4
5
$ babel-node a.js
b.js
undefined
a.js
bar

上面代码中，由于a.js的第一行是加载b.js，所以先执行的是b.js。而b.js的第一行又是加载a.js，这时由于a.js已经开始执行了，所以不会重复执
行，而是继续往下执行b.js，所以第一行输出的是b.js。
接着，b.js要打印变量foo，这时a.js还没执行完，取不到foo的值，导致打印出来是undefined。b.js执行完，开始执行a.js，这时就一切正常了。

坚持原创技术分享，您的支持将鼓励我继续创作！