『 刀刀博客 』

主题

Module的语法 ​

概述 ​

JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6之前，最主要的方法有 CommonJs（用于服务器） 和 AMD（用于浏览器） 两种，ES6 后在语言规格层面实现了模块功能，可以取代 CommonJs 和 AMD，成为主流解决方案。

js
// CommonJs
let { stat, exists, readFile } = require('fs');

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

这种方法是 “运行时加载”，只有运行时才能得到这个对象，无法在编译时做 “静态优化”。ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。

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

这个方法属于 “编译时加载” 或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJs 高，当然这也导致了没法引用 ES6 模块本身，因为它不是对象。

除了静态加载，ES6 模块还有以下好处：

  • 不再需要UMD模块格式，将来服务器和浏览器都会支持 ES6 模块格式。
  • 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。
  • 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。

严格模式 ​

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

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

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

export命令 ​

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

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

js
export var a = 1
export var b = 1
export var fn = () => {}

// 等价于
var a = 1
var b = 1
var fn = () => {}
export {a,b,fn}

更推荐下面那种写法，可以直观看到哪些变量被导出了。

一般的，export 输出的变量是其本来的名字，但可以使用 as 关键字重命名。

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

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

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

js
// 报错
export 1;

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

// 正确
export var m = 1;

// 正确
var n = 1;
export {n};

另外，export 输出的接口与值是对应关系，可以获取模块内部的实时值。这与 CommonJs 不同，CommonJs 输出的值是模块内部的值的缓存，不存在动态更新。

js
export var foo = 1
setTimeout(() => foo = 2, 500)

上方代码最开始获取到的 foo 值是1，500ms 后获取到的值是2。

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

js
function fn() {
  export default 123 // Error
}

import命令 ​

使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块。import 接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（export 命令）对外接口的名称相同。同样的，可以使用 as 重命名。

js
import {foo, bar as diy} from './xx.js'

由于 import 命令是编译阶段执行的，因此它能在代码运行前运行，具有变量提升效果，提升到模块头部并优先执行。需要注意的是，由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

js
// 报错
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';
}

最后，import 会执行所加载的模块，因此可以有下面的写法。如果引入多次，则只会执行一次。

js
import './my_module.js';
import './my_module.js';

模块的整体加载 ​

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

js
import * as mod from './my_module.js'

注意，整体模块加载所在的对象是可以静态分析的，所以不允许运行时改变。

js
import * as mod from './my_module.js'
mod.foo = 123 // 报错

export default命令 ​

从前面的例子可以看出，使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。其他模块加载该模块时，import 命令可以为该匿名函数指定任意名字。

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

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

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

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

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

js
// 正确
export var a = 1;

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

// 错误
export default var a = 1;

如果想要在一条 import 语句同时输入默认方法和其他接口，可以写成以下形式：

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

export和import的复合写法 ​

如果一个模块先后输出的模块和输入的模块名称相同，那么 import 和 export 可以写在一起。接口改名和整体输出也可以采用这种写法。

js
export {bar} from 'my_module';
js
import {bar} from 'my_module';
export {bar};

export {foo as bar} from './xx.js';
js
import {foo} from './xx.js';
export {foo as bar};

export * from 'my_module';
js
import * as my_module from 'my_module';
export default my_module;

模块的继承 ​

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

js
// circleplus.js
export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return x * x;
}

上面代码中的 export * 命令用于规定模块的输出。circleplus 模块对 circle 模块的输出做了扩展，并在末尾加上了 e 常数和默认输出。

⚠ 注意

export * 命令会忽略 circle 模块的 default 方法。之后又输出自定义的 e 变量和默认方法。

这时，也可以将 circle 的输出都加到 circleplus 上面。

js
// circleplus.js
export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return x * x;
}

import()函数 ​

由于 import 命令会被 JavaScript 引擎静态分析，所以不能使用表达式和变量，也就不能在运行时加载模块。这种限制实际上对用户不太友好。为了解决这个问题，ES2020 引入了动态 import()，支持动态加载模块。接受的参数与 import 相同，二者的区别主要是 import() 是动态加载。import() 返回一个 Promise 对象。

js
// 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() 的适用场合。

  • 按需加载

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

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

  • 条件加载

    import() 可以放在 Promise 的 resolve 方法中，从而实现条件加载。

    js
    Promise.resolve()
  .then(() => {
    if (Math.random() > 0.5) {
      return import('./moduleA');
    } else {
      return import('./moduleB');
    }
  })
  .then(module => {
    module.doSomething();
  });

  • 动态的模块路径

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

    js
    import(`./${path}/foo.js`)
  .then(module => {
    module.loadPageInto(main);
})

总结 ​

ES6 引入的模块系统，通过 export 和 import 两个命令，实现了代码的模块化。export 命令用于导出模块中的变量、函数或类等，使其可以被其他模块使用。可以单独导出每个成员，也可以使用 export default 导出默认成员，简化导入时的语法。import 命令用于导入其他模块提供的功能，可以指定导入特定成员或使用整体导入，将整个模块导入为一个对象。

与 CommonJS 和 AMD 规范不同，ES6 模块在编译时加载，这意味着模块的依赖关系在代码运行前就已经确定。这种静态加载方式提高了代码的加载效率，但也限制了运行时动态加载模块的能力。不过，ES2020 引入了动态 import() 函数，它返回一个 Promise 对象，允许在运行时根据条件或用户行为动态加载模块，提供了更大的灵活性。

ES6 模块自动采用严格模式，无论是否显式声明，这有助于避免一些常见的编程错误，如未声明的变量、重复的参数名等。严格模式还限制了一些不安全的操作，如对只读属性赋值、删除不可删除的属性等，提高了代码的安全性和可维护性。

Copyright © 2023-present 杜一刀