• require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
  • import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require
  • require / exports :
    遵循 CommonJS/AMD,只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。
    用法只有以下三种简单的写法:

    //导入模块的写法
    const fs = require('fs')
    //导出模块的两种写法
    exports.fs = fs
    module.exports = fs
    

    CommonJS:

  • 通过require引入基础数据类型时,属于复制该变量。
  • 通过require引入复杂数据类型时,数据浅拷贝该对象。
  • 出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂)
  • CommonJS模块默认export的是一个对象,即使导出的是基础数据类型
  • import / export:
    遵循 ES6 规范,支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。
    写法就比较多种多样:

    //导入模块的多种写法
    import fs from 'fs'
    import {default as fs} from 'fs'
    import * as fs from 'fs'
    import {readFile} from 'fs'
    import {readFile as read} from 'fs'
    import fs, {readFile} from 'fs'
    //导出模块的多种写法
    export default fs
    export const fs
    export function readFile
    export {readFile, read}
    export * from 'fs'
    

    ES6模块:

  • 不管是基础(复杂)数据类型,都只是对该变量的动态只读引用。动态在于一个模块中变量的变化会影响到另一个模块;只读在于从某个模块引入一个变量时,不允许修改该变量的值。对于复杂数据类型,可以添加属性和方法,但是不允许指向另一个内存空间。
  • 出现模块之间的循环引用时,只要模块存在某个引用,代码就能够执行。
  • ES6 模块

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。

    ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

    // CommonJS模块
    let { stat, exists, readfile } = require('fs');
    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readfile = _fs.readfile;
    

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

    ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

    // ES6模块
    import { stat, exists, readFile } from 'fs';
    

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

    由于 ES6 模块是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。

    除了静态加载带来的各种好处,ES6 模块还有以下好处。

  • 不再需要UMD模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点。
  • 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者navigator对象的属性。
  • 不再需要对象作为命名空间(比如Math对象),未来这些功能可以通过模块提供。
  • export 命令

    模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

    一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

    // profile.js
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    export var year = 1958;
    

    上面代码是profile.js文件,保存了用户信息。ES6 将其视为一个模块,里面用export命令对外部输出了三个变量。

    export的写法,除了像上面这样,还有另外一种。

    // profile.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export { firstName, lastName, year };
    

    上面代码在export命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在var语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

    import 命令

    使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

    // main.js
    import { firstName, lastName, year } from './profile.js';
    function setName(element) {
      element.textContent = firstName + ' ' + lastName;
    

    上面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

    如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

    import { lastName as surname } from './profile.js';
    

    前面介绍过,import命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行(import命令叫做“连接” binding 其实更合适)。所以,下面的代码会报错。

    // 报错
    if (x === 2) {
      import MyModual from './myModual';
    

    上面代码中,引擎处理import语句是在编译时,这时不会去分析或执行if语句,所以import语句放在if代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,import和export命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。

    ES6 模块与 CommonJS 模块的差异

    ES6 模块与 CommonJS 模块 它们有两个重大差异。

  • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
  • 第二个差异是因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

    下面重点解释第一个差异。

    CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。请看下面这个模块文件lib.js的例子。

    // 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是一个原始类型的值,会被缓存。除非写成一个函数,才能得到内部变动后的值。

    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    module.exports = {
      get counter() {
        return counter
      incCounter: incCounter,
    

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

    $ node main.js
    

    ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的import有点像 Unix 系统的“符号连接”,原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

    还是举上面的例子。

    // 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
    

    上面代码说明,ES6 模块输入的变量counter是活的,完全反应其所在模块lib.js内部的变化。

    再举一个出现在export一节中的例子。

    // m1.js
    export var foo = 'bar';
    setTimeout(() => foo = 'baz', 500);
    // m2.js
    import {foo} from './m1.js';
    console.log(foo);
    setTimeout(() => console.log(foo), 500);
    

    上面代码中,m1.js的变量foo,在刚加载时等于bar,过了 500 毫秒,又变为等于baz。

    让我们看看,m2.js能否正确读取这个变化。

    $ babel-node m2.js
    

    上面代码表明,ES6 模块不会缓存运行结果,而是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。

    由于 ES6 输入的模块变量,只是一个“符号连接”,所以这个变量是只读的,对它进行重新赋值会报错。

    // lib.js
    export let obj = {};
    // main.js
    import { obj } from './lib';
    obj.prop = 123; // OK
    obj = {}; // TypeError
    

    上面代码中,main.js从lib.js输入变量obj,可以对obj添加属性,但是重新赋值就会报错。因为变量obj指向的地址是只读的,不能重新赋值,这就好比main.js创造了一个名为obj的const变量。

    最后,export通过接口,输出的是同一个值。不同的脚本加载这个接口,得到的都是同样的实例。

    // mod.js
    function C() {
      this.sum = 0;
      this.add = function () {
        this.sum += 1;
      this.show = function () {
        console.log(this.sum);
    export let c = new C();
    

    上面的脚本mod.js,输出的是一个C的实例。不同的脚本加载这个模块,得到的都是同一个实例。

    // x.js
    import {c} from './mod';
    c.add();
    // y.js
    import {c} from './mod';
    c.show();
    // main.js
    import './x';
    import './y';
    

    现在执行main.js,输出的是1。

    $ babel-node main.js

    这就证明了x.js和y.js加载的都是C的同一个实例。

    参考文章:
    ECMAScript 6入门