学习阮一峰老师 ES6 系列(Module 的语法)

266 阅读12分钟

1.概述

ES6 之前,有 CommonJS 和 AMD 两种模块加载方案,前者用于服务器,后者用于浏览器。在ES6 上,实现了功能模块,使得其成为浏览器和服务器都通用的模块解决方案。

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

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

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

上面的代码本质上就是整体加载fs模块,生成一个对象,然后再从对象上读取 3 个方法,这种加载被称为“运行时加载”,因为只有运行时才能得到这个对象。

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

import { stat, exists, readFile } from 'fs';

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

2.严格模式

ES6 模块自动采用严格模式,严格模式主要的限制有以下几个:

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性,否则报错
  • 不能使用with语句
  • 不能对只读属性赋值,否则报错
  • 不能使用前缀 0 表示八进制数,否则报错
  • 不能删除不可删除的属性,否则报错
  • 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
  • eval不会在它的外层作用域引入变量
  • evalarguments不能被重新赋值
  • arguments不会自动反映函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.callerfn.arguments获取函数调用的堆栈
  • 增加了保留字(比如protectedstaticinterface

尤其是需要注意 this 的限制,ES6 模块之中,顶层的 this 指向 undefined,即不应该在顶层代码中使用 this

3. export 命令

模块功能主要有 export 和 import 命令组成, export 命令用于规定模块的对外接口, import 命令用于输入其他模块提供的功能。一个模块就是一个独立的问题, 改文件内部的所有变量,外部无法获取,如果想要外部能够读取模块内部的某个变量,必须使用export关键字导出该变量。

export const firstName = 'Michael';
export const lastName = 'Jackson';
export const year = 1000;

const firstName = 'Mike';
const lastName = 'Tom';
const year = 1;
export { firstName, lastName, year };

上面两种方法都可以导出变量,但是优先考虑底部的这种方法,因为这样可以一眼看清楚输出了哪些变量。

export 命令除了可以输出变量,还可以输出函数或者(类);

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

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

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

export {
	v1 as stream1;
	v2 as stream2;
	v2 as streamLatesVersion;
}

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

export 语句输出的接口,与其对应的值是动态绑定关系,即可以通过该接口,取到模块内部实时的值。这一点与 CommonJS 规范完全不同,CommonJS模块输出的是值的缓存,不存在动态更新。

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

4. import 命令

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

import { firstName, lastName, year } from './profile.js';

function setName(element) {
	element.textContent = firstName + '' + lastName;
}

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

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

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

import 命令输入的变量都是只读的,因为它本质上是输入接口,所以不允许在加载模块的脚本里面,改写接口。

⚠️: import 命令具有提升效果,会提升到整个模块的头部,首先执行

foo();

import { foo } from 'my_module';

上面的diamanté不会报错,因为 import 的执行是早于 foo 的调用,这种行为的本质是 import 命令是编译阶段执行的,在代码运行之前。由于 import 是静态执行, 所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。

import { 'f' + 'oo' } from 'my_module'; //error

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

//error
 if (x === 1) {
	 import { foo } from 'module1';
	}

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

import 语法会执行所加载的模块,因此可以有下面的写法

import 'lodash';
import 'lodash';

上面的代码仅仅执行lodash模块,但是不输入任何值,如果多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。

5. 模块的整体加载

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

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

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

export function circumferene(radius) {
	return 2 * Match.PI * radius;
}

加载这个模块

//逐一加载写法
import { area, circumferene } from 'circle.js';

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

//整体加载写法
import * as circle from './circle.js';

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

6. export default 命令

export default 命令,为模块指定默认输出

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

上面的代码是一个模块文件export- default.js,它的默认输出是一个函数。其他模块加载该模块时,import命令可以为该匿名函数指定任意名字

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

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

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

export default function foo() {
	console.log('foo');
}
// 或者写成
function foo() {
	console.log('foo');
}

export default foo;

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

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

// 默认输出
export default function crc32() {
	//
}

import crc32 from 'crc32';

// 正常输出
export function crc32() {
	//
}

import { aaa } from 'crc32'

可以通过上面代码看到,使用默认输出时,对应的import 语句不需要大括号;而使用普通输出的时候,对应的 import 语句需要大括号。

export default 命令用于指定模块的默认输出,一个模块只能有一个默认输出,所以export defalut 命令只能使用一次,正是因为这样,import 命令后面才可以不用加大括号,因为只可能对应一个import 命令。

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

function add(x, y) {
	return x * y;
}

export { add as default };
// 等同于 export default add;

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

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

export const a = 1;

const a = 1;
export default a;

// error
export default const a = 1;

7. export 与 import 的复合写法

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

export { foo, bar } from 'module';

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

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

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

// 接口改名
export { foo as myFoo } from 'module';
// 整体输出
export * from 'module';
// 默认接口
export { deafult } from 'module'

// 具名接口改为默认接口
export { es5 as default } from 'module';

// 默认接口改为具名接口
export { default as es6 } from 'module';

// import 所有复合写法
export * as ns from 'module';
//等同于
import * as ns from 'module';
export {ns};

8. 模块继承

模块之间也可以继承,假设有一个circleplus 模块,继承了 circle 模块

// circleplus.js

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

上面的代码 export * 表示在输出 circle 模块的所有属性和方法。

export * 命令会忽略circle 模块的default 方法,然后上面的代码又输出了自定义的变量e和默认方法

这个时候,可以将cricle 的属性或方法,改名后在输出,下面的代码表示,只输出circle模块的 area 方法,且将其改名为 circleArea

// circleplus.js

export { area as circleArea } from 'circle';

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

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

9. 跨模块常量

const 声明的常量只在当前代码块有效,如果想设置跨模块的常量,或者是一个值被多个模块共享,可以采用下面的写法

// constants 模块
export const A = 1;
export const B = 2;
export const C = 3;

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

import { A, B } from './constants';
console.log(A);
console.log(B);

如果要使用的常量非常多,可以建立一个专门的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 就可以

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

10. import()

import 命令只能放在模块的顶层,在编译时执行。这样的设计,有利于编译器提高效率,但也导致无法在运行时加载模块。

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()返回 Promise 对象,所以需要使用then()方法指定处理函数。考虑到代码的清晰,更推荐使用await命令。

async function renderWidget() {
  const container = document.getElementById('widget');
  if (container !== null) {
    // 等同于
    // import("./widget").then(widget => {
    //   widget.render(container);
    // });
    const widget = await import('./widget.js');
    widget.render(container);
  }
}

renderWidget();

上面示例中,await命令后面就是使用import(),对比then()的写法明显更简洁易读。

适用场合

下面是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的返回结果,加载不同的模块。

11. import.meta

开发者使用一个模块时,有时需要知道模板本身的一些信息(比如模块的路径)。ES2020 为 import 命令添加了一个元属性import.meta,返回当前模块的元信息。

import.meta只能在模块内部使用,如果在模块外部使用会报错。

这个属性返回一个对象,该对象的各种属性就是当前运行的脚本的元信息。具体包含哪些属性,标准没有规定,由各个运行环境自行决定。一般来说,import.meta至少会有下面两个属性。

(1)import.meta.url

import.meta.url返回当前模块的 URL 路径。举例来说,当前模块主文件的路径是[<https://foo.com/main.js>](<https://foo.com/main.js>)import.meta.url就返回这个路径。如果模块里面还有一个数据文件data.txt,那么就可以用下面的代码,获取这个数据文件的路径。

new URL('data.txt', import.meta.url)

注意,Node.js 环境中,import.meta.url返回的总是本地路径,即file:URL协议的字符串,比如file:///home/user/foo.js

(2)import.meta.scriptElement

import.meta.scriptElement是浏览器特有的元属性,返回加载模块的那个<script>元素,相当于document.currentScript属性。

// HTML 代码为
// <script type="module" src="my-module.js" data-foo="abc"></script>

// my-module.js 内部执行下面的代码
import.meta.scriptElement.dataset.foo
// "abc"