ECMAScript 6 Module的语法和加载实现

2024-04-12 22:50:20

Module的语法和加载实现

一、ES6模块的简单介绍

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

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

ES6模块封装的一个小示例

将常用的、公共的数据封装在a.js中：

// 使用export关键词导出封装的数据
export let str = '当你凝望着深渊时，深渊也在凝望你';
export let num = 100;
export let bol = true;
export function fn() {
    console.log('i am a fn');
}

在b.js中直接导入a.js中的数据使用，无须将两个JS文件引入到同一个HTML文件中：

// 使用import关键词按需引入你需要的数据
import {str, num, bol, fn} from './a.js';
console.log(str, num, bol);

fn();

但是我们发现，在任意一个HTML中，通过传统方式引入b.js，并不能直接使用，而是会直接报错。

<html>
    <head></head>
    <body>
        <!-- 报错 -->
        <script src="b.js"></script>
    </body>
</html>

ES6的模块需要使用特殊方式调用才可以生效。

二、ES6模块的加载实现

<html>
    <head></head>
    <body>
        <script type="module" src="b.js"></script>
        <!-- 也可以将module代码内嵌在网页中 -->
        <script type="module">
            import { str } from './a.js';
            console.log(str);
        </script>
    </body>
</html>

当把script标签的type属性设置为module时，浏览器知道这是一个 ES6 模块，会按照ES6模块的规则解析其中的代码，模块代码就能正常执行了。

注:

浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。
如果网页有多个<script type="module">，它们会按照在页面出现的顺序依次执行。
<script>标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。
一旦使用了async属性，<script type="module">就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块。
一旦使用了async属性，<script type="module">就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块。
ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。

Node环境也可以使用ES6的模块，具体使用在框架期详解。

三、严格模式

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

严格模式主要有以下限制:

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

上面这些限制，模块都必须遵守。其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。

四、export、export default、import、import()

模块功能主要由两个命令构成：export(导出)和import(导入)。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

1. export命令

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

// module.js
export let str = 'Michael';
export let num = 108;
export let year = 2019;

export除了可以单个导出变量外，它还可以导出一个列表，在列表中一一列出要导出的数据。

let str = 'Michael';
let num = 108;
let year = 2019;

export {
    str,
    num,
    year
}

建议优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

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

function sum(x, y) {
    return x + y;
}

class Point {}

export {
    sum,
    Point
}

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

// module.js
let str = '我本将心付明月，奈何明月照沟渠';
function sum(x, y) {
    return x + y;
}

export {
    str as anotherStr,
    sum as getSum
}

在其他文件中引用：

import {getSum, anotherStr} from './module.js';
console.log(getSum(34, 56));
console.log(anotherStr);

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

export的错误使用：

// 报错
export 1;

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

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

// 写法一
export let m = 1;

// 写法二
let n = 1;
export {n};

// 写法三
let a = 1;
export {a as b};

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

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

// module.js中，export一个变量，并且在500ms后改变其值
export let num = 100;
setTimeout(() => num = 303, 500);

在另一个JS中使用module.js：

import { num } from './m1.js';
console.log(num); // 100

setTimeout(function (){
   console.log(foo); // 303
}, 600);

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。

2. import命令

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

// module.js
let str = 'Michael';
let num = 108;
let year = 2019;

export {
    str,
    num,
    year
}

// index.js
import { str, num } from './module.js';

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

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

import { str as anotherStr } from './module.js';
console.log(str);

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口，但是如果是为一个被导入的对象改写属性，是可以的。

import { str } from './module.js';

// 报错
str = 'hello';

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

由于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语句会执行所加载的模块，因此可以有下面的写法。

// Math.js
function fn(x, y) {
    return x + y;
}
let res = fn(23, 4);
console.log(res);

// index.js
import './Math.js'; // Math.js中的代码会被执行

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

3. 模块的整体加载

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

// module.js
export function sum(x, y) {
    return x + y;
}

export function rn(x, y) {
    return Math.round(Math.random() * (y - x) + x);
}

// index.js
import * as Math from './module.js'

let a = Math.sum(23, 67);
let b = Math.rn(34, 99);

console.log(a, b);

4. export default 命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是这种方式需要花费更多时间去阅读别人封装的JS文档，所以ES提供export default命令，为模块指定默认输出。

// module.js
export default function(x, y) {
    return x + y;
}

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

// index.js
import sum from './module.js';

let a = sum(34, 67);
console.log(a);

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

// module.js
export default function sum(x, y) {
    return x + y;
}
let a = sum(23, 45); 
console.log(a);

在module.js中，sum可以被正常调用，但是导出时，函数名sum，在模块外部是无效的，加载的时候，视同匿名函数加载。

// index.js
import fn from './module.js'
let a = fn(34, 5);
console.log(a);

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

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

let obj = {};
export { obj as default }

import {default as a} from './module.js';

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

// 正确
export let a = 1;

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

// 错误
export default let a = 1;

export default命令和export可以同时使用。

// module.js
export default {
    str: 'hello',
    num: 108,
    fn() {
        console.log(this.str);
    }
}
let bol = true;
function sum(x, y) {
    return x + y;
}
export {
    bol,
    sum
}

在导入时，如果导入默认内容，就不加大括号，其余的加大括号。

只引入默认模块。

// index.js
import obj from './module.js';
console.log(obj.num);
obj.fn();

只引入非默认模块。

// index.js
import {bol, sum} from './module.js';
console.log(bol);
sum(23, 78);

引入module.js中所有的导出。

// index.js
import obj, {bol, sum} from './module.js';

5. export和import同时使用

一个JS文件中，除了可以导出其文件中原本就声明的一些变量之外，还可以导出这个文件导入的数据。

// a.js
let str = 'hello';
let num = 108;
let bol = true;

export {str, num, bol}

// b.js
import {str, num, bol} from "./a.js";
let obj = {
    name: 'tom'
};

export {str, num, bol, obj}

// c.js
import {str, num, bol, obj} from "./b.js";

b.js 中的代码还可以简化，将import和export结合在一起使用。

// b.js
let obj = {
   name: 'tom'
};

export {str, num, bol} from "./a.js"; // 相当于先从a.js中导入，再导出
export {obj}; // 由于obj是本文件的数据，所以不能在上一行一起导出，需要单独导出

c.js 对于 b.js 的使用不变。

6. 模块的继承

像上面那样，如果一个模块B导入了另一个模块A中的数据，又将其导出，我们就说模块B继承了模块A。模块B可以继承模块A的所有数据，也可以有选择性的继承模块B的部分数据。

// a.js
let str = 'hello';
let num = 108;
let bol = true;

export {str, num, bol}

// 继承所有
export * from './a.js';

// 继承部分并为继承的部分单独命名使用
export {str as anotherStr} from './a.js'

注：

模块B继承模块A的所有时，不包含模块A的的default变量。

7. import()

import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。但是如果代码逻辑需要在导入数据之前做一些判断或者其他代码约束，import命令会报错。

// module.js
export let num = 100;

// index.js
if(true) { 
    // 报错
    import { num } from './module.js';
}

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

这样虽然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。

ES6提供import()函数来解决这个问题，可以实现条件加载或按需加载。

// index.js
if(true) {
    let res = import('./module.js');
    // res是一个promise对象，想要从中获取数据需要，使用到then函数。
    res.then((module) => {
    console.log(module); // Module
    console.log(a.num); // 100
    });
}

码农公寓

Module的语法和加载实现

一、ES6模块的简单介绍

二、ES6模块的加载实现

三、严格模式

四、export、export default、import、import()

相关文章