module · 前端笔记

[TOC] # 概述在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。 ``` // CommonJS模块 let { stat, exists, readFile } = require('fs'); // 等同于 let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile; ``` 上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。 由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。 # 严格模式 ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。 ``` // index.html <script type=module src="./index.js"></script> // index.js import { ha } from './module1.js'; console.log(ha()) // undefined // module1.js function ha () { return this } export {ha} ``` # export命令模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。 ## 直接导出变量、函数 ``` // profile.js export var firstName = 'Michael'; export function multiply(x, y) { return x * y; }; ``` ## export {...} 导出在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在var语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。 ``` var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year}; ``` ## as 重命名使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。 ``` function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; ``` ## 对外接口规范 export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。 ``` // 报错 export 1; // 报错 var m = 1; export m; // 报错 function f() {} export f; ``` 上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。 ``` // 写法一 export var m = 1; // 写法二 var m = 1; export {m}; // 写法三 var n = 1; export {n as m}; // 正确 export function f() {}; // 正确 function f() {} export {f}; ``` ## 动态绑定 export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。 ``` export var foo = 'bar'; setTimeout(() => foo = 'baz', 500); ``` 上面代码输出变量foo，值为bar，500 毫秒之后变成baz。 这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新。 ## 定义在模块顶层 export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。 ``` function foo() { export default 'bar' // SyntaxError } foo() ``` # import命令 import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。 ``` // main.js import {firstName, lastName, year} from './profile.js'; ``` ## 重命名如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。 ``` import { lastName as surname } from './profile.js'; ``` ## 改写 import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。 ``` import {a} from './xxx.js' a = {}; // Syntax Error : 'a' is read-only; ``` 上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。 ``` import {a} from './xxx.js' a.foo = 'hello'; // 合法操作 ``` 上面代码中，a的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，轻易不要改变它的属性。 ## 提升 import命令具有提升效果，会提升到整个模块的头部，首先执行。 ``` foo(); import { foo } from 'my_module'; ``` 上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。 ## 静态执行由于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'; } ``` ## 其他最后，import语句会执行所加载的模块，因此可以有下面的写法。 ``` import 'lodash'; ``` 上面代码仅仅执行lodash模块，但是不输入任何值。 如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。 ``` import 'lodash'; import 'lodash'; ``` 上面代码加载了两次lodash，但是只会执行一次。 ``` import { foo } from 'my_module'; import { bar } from 'my_module'; // 等同于 import { foo, bar } from 'my_module'; ``` 上面代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。 ## 模块的整体加载除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。 ``` // circle.js export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; } import * as circle from './circle'; console.log('圆面积：' + circle.area(4)); console.log('圆周长：' + circle.circumference(14)); ``` # export default 命令 export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。 ``` // export-default.js export default function foo() { console.log('foo'); } // 或者写成 function foo() { console.log('foo'); } export default foo; ``` foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。 本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。 ``` // export-default.js export default function foo() { console.log('foo'); } // 或者写成 function foo() { console.log('foo'); } export default foo; ``` 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。这时import命令后面，不使用大括号。 ``` // import-default.js import customName from './export-default'; customName(); // 'foo' ``` 同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。 ``` // 错误 export 42; // 错误 export default var a = 1; // 正确 export var a = 1; // 正确 export default 42; // 正确 var a = 1; export default a; ``` # export 与 import 的复合写法如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。 ``` export { foo, bar } from 'my_module'; // 可以简单理解为 import { foo, bar } from 'my_module'; export { foo, bar }; ``` 上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。 模块的接口改名和整体输出，也可以采用这种写法。 ``` // 接口改名 export { foo as myFoo } from 'my_module'; // 整体输出 export * from 'my_module'; ``` # 参考资料 [ECMAScript 6入门](http://es6.ruanyifeng.com/#docs/module)