ES6 Module

ES Module 是在 ECMAScript 6 中引入的模块化功能。模块功能主要由两个命令构成,分别是 export 和 import。export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。
那么在遇到 import 和 export 时发生了什么呢?ES6 的模块加载机制可以概括为四个字 一静一动 。
一静:import 静态执行
一动:export 动态绑定
import 静态执行是指,import 命令会被 JavaScript 引擎静态分析,优先于模块内的其他内容执行。
export 动态绑定是指,export 命令输出的接口,与其对应的值是动态绑定关系,通过该接口可以实时取到模块内部的值。
其使用方式如下:

//foo.js
console.log('foo is running');
import {bar} from './bar'
console.log('bar = %j', bar);
setTimeout(() => console.log('bar = %j after 500 ms', bar), 500);
console.log('foo is finished');

//bar.js
console.log('bar is running');
export let bar = false;
setTimeout(() => bar = true, 500);
console.log('bar is finished');

//执行 node foo.js 时会输出如下内容:
bar is running
bar is finished
foo is running
bar = false
foo is finished
bar = true after 500 ms

import 命令是在编译阶段执行,在代码运行之前先被 JavaScript 引擎静态分析,所以优先于 foo.js 自身内容执行。同时我们也看到 500 毫秒之后也可以取到 bar 更新后的值也说明了 export 命令输出的接口与其对应的值是动态绑定关系。这样的设计使得程序在编译时就能确定模块的依赖关系,这是和 CommonJS 模块规范的最大不同。还有一点需要注意的是,由于 import 是静态执行,所以 import 具有提升效果即 import 命令的位置并不影响程序的输出。
export 和 export default
在一个文件或模块中,export 可以有多个,export default 仅有一个, export 类似于具名导出,而 default 类似于导出一个变量名为 default 的变量。同时在 import 的时候,对于 export 的变量,必须要用具名的对象去承接,而对于 default,则可以任意指定变量名

循环依赖

//foo.js
console.log('foo is running');
import {bar} from './bar'
console.log('bar = %j', bar);
setTimeout(() => console.log('bar = %j after 500 ms', bar), 500);
export let foo = false;
console.log('foo is finished');

//bar.js
console.log('bar is running');
import {foo} from './foo';
console.log('foo = %j', foo)
export let bar = false;
setTimeout(() => bar = true, 500);
console.log('bar is finished');

//执行 node foo.js 时会输出如下内容:
bar is running
foo = undefined
bar is finished
foo is running
bar = false
foo is finished
bar = true after 500 ms

foo.js 和 bar.js 形成了循环依赖,但是程序却没有因陷入循环调用报错而是执行正常,这是为什么呢?还是因为 import 是在编译阶段执行的,这样就使得程序在编译时就能确定模块的依赖关系,一旦发现循环依赖,ES6 本身就不会再去执行依赖的那个模块了,所以程序可以正常结束。这也说明了 ES6 本身就支持循环依赖,保证程序不会因为循环依赖陷入无限调用。虽然如此,但是我们仍然要尽量避免程序中出现循环依赖,因为可能会发生一些让你迷惑的情况。注意到上面的输出,在 bar.js 中输出的 foo = undefined ,如果没注意到循环依赖会让你觉得明明在 foo.js 中 export foo = false ,为什么在 bar.js 中却是 undefined呢,这就是循环依赖带来的困惑。在一些复杂大型项目中,你是很难用肉眼发现循环依赖的,而这会给排查异常带来极大的困难。对于使用 webpack 进行项目构建的项目,推荐使用 webpack 插件 circular-dependency-plugin来帮助你检测项目中存在的所有循环依赖,尽早发现潜在的循环依赖可能会免去未来很大的麻烦。

https://www.colabug.com/2227753.html

推荐阅读更多精彩内容

  • 系列文章导航 模块(一) CommonJs,AMD, CMD, UMD 本文参考阮一峰 ES6入门 Module的...
    合肥黑阅读 4,412评论 0 2
  • 先给 module 在网上找个自己感觉妥当的定义,module: 开发者将程序分解成离散功能块,这些功能块就称为 ...
    YeLqgd阅读 804评论 0 2
  • 已默认读者了解本篇自言自语的context,且对于module有所了解,对于module的相关扩展说明将穿插在内容...
    蒋启钲阅读 686评论 0 4
  • Node.js Buffer(缓冲区)01、创建 Buffer 类JavaScript 语言自身只有字符串数据类型...
    夜幕小草阅读 71评论 0 0
  • docker可以将我们配置好的开发环境打包成镜像文件。将镜像文件运行于主系统中,从而减少环境的配置工作。 该配置适...
    Aidenboss阅读 95评论 0 0