What is the principle of es6 module

The design idea of ​​ES6 modules is to be as static as possible, so that the module's dependencies, as well as input and output variables, can be determined at compile time. ES6 modules are not objects. Instead, the output code is explicitly specified through the export command and then input through the import command. Since ES6 modules are loaded at compile time, static analysis is possible; with it, the syntax of JS can be further broadened, such as the introduction of macros and type checking, which can only be achieved through static analysis.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

1. Overview

Historically, JavaScript has not had a module (module) system. It is impossible to split a large program into small files that depend on each other, and then use simple method to assemble. Other languages ​​have this feature, such as Ruby's require, Python's import, and even CSS has @import, but JavaScript does not have any support in this regard, which poses a huge obstacle to the development of large and complex projects.

Before ES6, the community developed some module loading solutions, the most important ones being CommonJS and AMD. The former is used for server, and the latter is used for browser. ES6 implements module functions at the level of language standards, and the implementation is quite simple. It can completely replace CommonJS and AMD specifications and become a universal module solution for browsers and servers.

The design idea of ​​ES6 modules is to be as static as possible, so that the module’s dependencies, as well as input and output variables, can be determined during compilation. Both CommonJS and AMD modules can only determine these things at runtime. For example, CommonJS modules are objects, and object properties must be looked up when input.

// CommonJS模块
let { stat, exists, readfile } = require('fs');


// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

The essence of the above code is to load the fs module as a whole (that is, load all methods of fs), generate an object (_fs), and then read 3 methods from this object. This kind of loading is called "runtime loading", because this object can only be obtained at runtime, making it impossible to do "static optimization" at compile time.

ES6 modules are not objects. Instead, the output code is explicitly specified through the export command and then input through the import command.

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

The essence of the above code is to load 3 methods from the fs module, and other methods are not loaded. This kind of loading is called "compile-time loading" or static loading, that is, ES6 can complete module loading at compile time, which is more efficient than the CommonJS module loading method. Of course, this also results in the inability to reference the ES6 module itself, because it is not an object.

Since ES6 modules are loaded at compile time, static analysis is possible. With it, the syntax of JavaScript can be further broadened, such as the introduction of macros and type systems, which can only be achieved through static analysis.

In addition to the various benefits brought by static loading, ES6 modules also have the following benefits.

• The UMD module format is no longer needed. In the future, servers and browsers will support the ES6 module format. At present, this has been achieved through various tool libraries.
• In the future, new browser APIs will be provided in module format and no longer have to be made into global variables or properties of the navigator object.
• Objects are no longer required as namespaces (such as Math objects), and these functions can be provided through modules in the future.

2. Strict mode

ES6 modules automatically adopt strict mode, regardless of whether you add "use strict"; in the module header.

Strict mode mainly has the following restrictions.

• Variables must be declared before use
• The parameters of the function cannot have attributes with the same name, otherwise an error will be reported
• The with statement cannot be used
• Cannot be used for only Read attribute assignment, otherwise an error will be reported
• The prefix 0 cannot be used to represent an octal number, otherwise an error will be reported
• Undelete attributes cannot be deleted, otherwise an error will be reported
• The variable delete prop cannot be deleted, it will Report an error and can only delete the attribute delete global[prop]
• eval will not introduce variables
• eval and arguments into its outer scope.
• arguments cannot be reassigned. No Changes in function parameters will be automatically reflected
• arguments.callee cannot be used
• arguments.caller cannot be used
• This is prohibited from pointing to the global object
• fn cannot be used. caller and fn.arguments obtain the stack of function calls
• Added reserved words (such as protected, static and interface)

Modules must comply with the above restrictions. Since strict mode was introduced in ES5 and does not belong to ES6, please refer to the relevant ES5 books. This book will not introduce it in detail.

Among them, you need to pay special attention to the restrictions of this. In ES6 modules, the top-level this points to undefined , that is, this should not be used in top-level code.

3. Export command

The module function mainly consists of two commands: export and import. The export command is used to specify the external interface of the module, and the import command is used to import the functions provided by other modules.

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 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 语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

export 命令除了输出变量，还可以输出函数或类（class）。

export function multiply(x, y) {
  return x * y;
};

上面代码对外输出一个函数 multiply 。

通常情况下， export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名。

function v1() { ... }
function v2() { ... }


export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代码使用 as 关键字，重命名了函数 v1 和 v2 的对外接口。重命名后， v2 可以用不同的名字输出两次。

需要特别注意的是， export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错
export 1;


// 报错
var m = 1;
export m;

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量 m ，还是直接输出 1。 1 只是一个值，不是接口。正确的写法是下面这样。

// 写法一
export var m = 1;


// 写法二
var m = 1;
export {m};


// 写法三
var n = 1;
export {n as m};

上面三种写法都是正确的，规定了对外的接口 m 。其他脚本可以通过这个接口，取到值 1 。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。

同样的， function 和 class 的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f;


// 正确
export function f() {};


// 正确
function f() {}
export {f};

另外， export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量 foo ，值为 bar ，500 毫秒之后变成 baz 。

这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新。

最后， export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的 import 命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

上面代码中， export 语句放在函数之中，结果报错。

4. 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 命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。

import {a} from './xxx.js'


a = {}; // Syntax Error : 'a' is read-only;

上面代码中，脚本加载了变量 a ，对其重新赋值就会报错，因为 a 是一个只读的接口。但是，如果 a 是一个对象，改写 a 的属性是允许的。

import {a} from './xxx.js'


a.foo = 'hello'; // 合法操作

上面代码中， a 的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。

import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径， .js 后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import {myMethod} from 'util';

上面代码中， util 是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。

注意， import 命令具有提升效果，会提升到整个模块的头部，首先执行。

foo();


import { foo } from 'my_module';

上面的代码不会报错，因为 import 的执行早于 foo 的调用。这种行为的本质是， import 命令是编译阶段执行的，在代码运行之前。

由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from 'my_module';


// 报错
let module = 'my_module';
import { foo } from module;


// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

上面三种写法都会报错，因为它们用到了表达式、变量和 if 结构。在静态分析阶段，这些语法都是没法得到值的。

最后， import 语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash';

上面代码仅仅执行 lodash 模块，但是不输入任何值。

如果多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。

import 'lodash';
import 'lodash';

上面代码加载了两次 lodash ，但是只会执行一次。

import { foo } from 'my_module';
import { bar } from 'my_module';


// 等同于
import { foo, bar } from 'my_module';

上面代码中，虽然 foo 和 bar 在两个语句中加载，但是它们对应的是同一个 my_module 实例。也就是说， import 语句是 Singleton 模式。

目前阶段，通过 Babel 转码，CommonJS 模块的 require 命令和 ES6 模块的 import 命令，可以写在同一个模块里面，但是最好不要这样做。因为 import 在静态解析阶段执行，所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

5. 模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（ * ）指定一个对象，所有输出值都加载在这个对象上面。

下面是一个 circle.js 文件，它输出两个方法 area 和 circumference 。

// circle.js


export function area(radius) {
  return Math.PI * radius * radius;
}


export function circumference(radius) {
  return 2 * Math.PI * radius;
}

现在，加载这个模块。

// main.js


import { area, circumference } from './circle';


console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

上面写法是逐一指定要加载的方法，整体加载的写法如下。

import * as circle from './circle';


console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

注意，模块整体加载所在的那个对象（上例是 circle ），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle';


// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

6. export default 命令

从前面的例子可以看出，使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件 export-default.js ，它的默认输出是一个函数。

其他模块加载该模块时， import 命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代码的 import 命令，可以用任意名称指向 export-default.js 输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时 import 命令后面，不使用大括号。

export default 命令用在非匿名函数前，也是可以的。

// export-default.js
export default function foo() {
  console.log('foo');
}


// 或者写成


function foo() {
  console.log('foo');
}


export default foo;

上面代码中， foo 函数的函数名 foo ，在模块外部是无效的。加载的时候，视同匿名函数加载。

下面比较一下默认输出和正常输出。

// 第一组
export default function crc32() { // 输出
  // ...
}


import crc32 from 'crc32'; // 输入


// 第二组
export function crc32() { // 输出
  // ...
};


import {crc32} from 'crc32'; // 输入

上面代码的两组写法，第一组是使用 export default 时，对应的 import 语句不需要使用大括号；第二组是不使用 export default 时，对应的 import 语句需要使用大括号。

export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应 export default 命令。

本质上， export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;


// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

正是因为 export default 命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。

// 正确
export var a = 1;


// 正确
var a = 1;
export default a;


// 错误
export default var a = 1;

上面代码中， export default a 的含义是将变量 a 的值赋给变量 default 。所以，最后一种写法会报错。

同样地，因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一个值写在 export default 之后。

// 正确
export default 42;


// 报错
export 42;

上面代码中，后一句报错是因为没有指定对外的接口，而前一句指定对外接口为 default 。

有了 export default 命令，输入模块时就非常直观了，以输入 lodash 模块为例。

import _ from 'lodash';

如果想在一条 import 语句中，同时输入默认方法和其他接口，可以写成下面这样。

import _, { each, forEach } from 'lodash';

对应上面代码的 export 语句如下。

export default function (obj) {
  // ···
}


export function each(obj, iterator, context) {
  // ···
}


export { each as forEach };

上面代码的最后一行的意思是，暴露出 forEach 接口，默认指向 each 接口，即 forEach 和 each 指向同一个方法。

export default 也可以用来输出类。

// MyClass.js
export default class { ... }


// main.js
import MyClass from 'MyClass';
let o = new MyClass();

7. export 与 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块， import 语句可以与export 语句写在一起。

export { foo, bar } from 'my_module';


// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

上面代码中， export 和 import 语句可以结合在一起，写成一行。但需要注意的是，写成一行以后， foo 和 bar 实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用 foo 和 bar 。

模块的接口改名和整体输出，也可以采用这种写法。

// 接口改名
export { foo as myFoo } from 'my_module';


// 整体输出
export * from 'my_module';

默认接口的写法如下。

export { default } from 'foo';

具名接口改为默认接口的写法如下。

export { es6 as default } from './someModule';


// 等同于
import { es6 } from './someModule';
export default es6;

同样地，默认接口也可以改名为具名接口。

export { default as es6 } from './someModule';

ES2020 之前，有一种 import 语句，没有对应的复合写法。

import * as someIdentifier from "someModule";

ES2020补上了这个写法。

export * as ns from "mod";


// 等同于
import * as ns from "mod";
export {ns};

8. 模块的继承

模块之间也可以继承。

假设有一个 circleplus 模块，继承了 circle 模块。

// circleplus.js


export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return Math.exp(x);
}

上面代码中的 export ，表示再输出 circle 模块的所有属性和方法。注意， export 命令会忽略 circle 模块的 default 方法。然后，上面代码又输出了自定义的 e 变量和默认方法。

这时，也可以将 circle 的属性或方法，改名后再输出。

// circleplus.js


export { area as circleArea } from 'circle';

上面代码表示，只输出 circle 模块的 area 方法，且将其改名为 circleArea 。

加载上面模块的写法如下。

// main.js


import * as math from 'circleplus';
import exp from 'circleplus';
console.log(exp(math.e));

上面代码中的 import exp 表示，将 circleplus 模块的默认方法加载为 exp 方法。

9. 跨模块常量

本书介绍 const 命令的时候说过， const 声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。

// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;


// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3


// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

如果要使用的常量非常多，可以建一个专门的 constants 目录，将各种常量写在不同的文件里面，保存在该目录下。

// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};


// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];

然后，将这些文件输出的常量，合并在 index.js 里面。

// constants/index.js
export {db} from './db';
export {users} from './users';

使用的时候，直接加载 index.js 就可以了。

// script.js
import {db, users} from './constants/index';

10. import()

简介

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

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

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

这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果 import 命令要取代 Node 的 require 方法，这就形成了一个障碍。因为 require 是运行时加载模块， import 命令无法取代 require 的动态加载功能。

const path = './' + fileName;
const myModual = require(path);

上面的语句就是动态加载， require 到底加载哪一个模块，只有运行时才知道。 import 命令做不到这一点。

ES2020提案 引入 import() 函数，支持动态加载模块。

import(specifier)

上面代码中， import 函数的参数 specifier ，指定所要加载的模块的位置。 import 命令能够接受什么参数， import() 函数就能接受什么参数，两者区别主要是后者为动态加载。

import() 返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector('main');


import( ./section-modules/${someVariable}.js )
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import() 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外， import() 函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。 import() 类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。

适用场合

下面是 import() 的一些适用场合。

（1）按需加载。

import() 可以在需要的时候，再加载某个模块。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

上面代码中， import() 方法放在 click 事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。

（2）条件加载

import() 可以放在 if 代码块，根据不同的情况，加载不同的模块。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

上面代码中，如果满足条件，就加载模块 A，否则加载模块 B。

（3）动态的模块路径

import() 允许模块路径动态生成。

import(f())
.then(...);

上面代码中，根据函数 f 的返回结果，加载不同的模块。

注意点

import() 加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

上面代码中， export1 和 export2 都是 myModule.js 的输出接口，可以解构获得。

如果模块有 default 输出接口，可以用参数直接获得。

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

上面的代码也可以使用具名输入的形式。

import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

如果想同时加载多个模块，可以采用下面的写法。

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

import() 也可以用在 async 函数之中。

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

【相关推荐：javascript视频教程、编程视频】

The above is the detailed content of What is the principle of es6 module. For more information, please follow other related articles on the PHP Chinese website!