看 React 的代码拆分时,回顾一下 ES6 的模块。
- ES6 模块?
答
:一个大程序
拆分成互相依赖
的小文件
,再用简单的方法拼装
起来。
ES6 模块的设计思想是尽量的静态化
,使得编译时
就能确定模块的依赖关系
,以及输入和输出的变量
。
由于 ES6 模块是编译时加载
,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
- export 命令?
答
:export
命令用于规定模块的对外接口
。
一个模块就是一个独立的文件
。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量
,就必须使用export
关键字输出该变量。
在 export 命令后面,使用大括号
指定所要输出的一组变量。例如 export {variable1, variable2}。
export 命令除了输出变量,还可以输出函数或类(class)
- import 命令?
答
:import 命令接受一对大括号
,里面指定要从其他模块导入的变量名
。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同
。
如果想为输入的变量重新取一个名字,import命令要使用as
关键字,将输入的变量重命名
。
import 命令输入的变量都是只读的
,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。如果 a 是一个对象
,改写a的属性是允许的
。
由于 import 是静态执行,所以不能使用表达式和变量
,这些只有在运行时才能得到结果的语法结构。
note
:这里让我想到了宏
是静态语法,所以宏是里面是不允许有运行时才能的到的语法。
import 命令具有提升效果,会提升到整个模块的头部
,首先执行。
- 模块的整体加载?
答
:即用星号(*)
指定一个对象,所有输出值都加载在这个对象上面
。例如:import * as circle from './circle';
。模块整体加载所在的那个对象(上例是circle),应该是可以静态分析的,所以不允许运行时改变
。
note
:这个功能适合工具类模块。
- export default ?
答
:export default命令,为模块指定默认输出
。
// export-default.js
function foo() {
console.log('foo');
}
export default foo;
这时 import 命令后面,不使用大括号
。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
foo 函数的函数名 foo,在模块外部是无效的。加载的时候,视同匿名函数加载
。
export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出
,因此export default命令只能使用一次。
- import() ?
答
:固然有利于编译器提高效率,但也导致无法在运行时加载模块
。在语法上,条件加载
就不可能实现。如果 import 命令要取代 Node 的require
方法,这就形成了一个障碍。因为require 是运行时加载模块,import 命令无法取代 require 的动态加载功能。有一个提案,建议引入import()
函数,完成动态加载。
- CommonJS 动态加载 VS ES6 静态加载?
答
:为CommonJS加载的是一个对象
(即module.exports属性),该对象只有在脚本运行结束时才会生成。而ES6模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
ES6模块的运行机制与CommonJS不一样。JS引擎对脚本静态分析的时候,遇到模块加载命令import就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用到被加载的模块中取值。
Node对ES6模块的处理比较麻烦,因为它有自己的CommonJS模块格式,与ES6模块格式是不兼容的。目前的解决方案是,将两者分开,ES6模块和CommonJS采用各自的加载方案。