es 6 大幅度优化了模块化编程的规范.
写在前面: 在 es6 之前, 说起 js 的模块化, 一般都避不开 CommonJs 和 AMD 两种方案. 这两种方案, 前者应用于服务器, 后者应用于浏览器. 而 es 6 通过 export 和 import 这两个关键字, 完全取代上面两种方案, 且使用起来更简单.
一, export 命令
出口, 用于规定模块的对外接口 (这就意味着数据必须被包装成对象的格式).
一个模块就是一个独立的文件, 该文件内部的所有变量, 外部无法获取. 如果希望能获取到内部的某个变量, 就必须使用 export 将变量输出:
- // profile.js
- export var firstName = 'Michael';
- export var lastName = 'Jackson';
- export var year = 1958;
通常写成, 也建议这样写:
- // profile.js
- var firstName = 'Michael';
- var lastName = 'Jackson';
- var year = 1958;
- export {firstName, lastName, year};
以及输出函数或者类:
- function v1() { ... }
- function v2() { ... }
- export {
- v1 as streamV1,
- v2 as streamV2,
- v2 as streamLatestVersion
- };
export 输出时, 只有三种固定格式, 其他均会报错:
- // 写法一
- export var m = 1; // 声明时输出
- // 写法二
- var m = 1;
- export {m}; // 包装成数据对象输出
- // 写法三
- var n = 1;
- export {n as m}; // 使用别名输出, 基本上相当于第二种
- // 报错
- export 1;
- // 报错
- var m = 1;
- export m;
还有一点就是, export 输出的接口, 与其对应的值是动态绑定关系, 即通过接口, 可以获取到模块内部实时的值:
- export var foo = 'bar';
- setTimeout(() => foo = 'xyz', 500);
- // 输出变量 foo, 值为 bar , 500 ms 后变成 xyz
二, import 命令
入口, 加载 export 的模块中的变量, 方法等.
- // main.js
- import {firstName, lastName, year} from './profile.js';
- function setName(element) {
- element.textContent = firstName + ' ' + lastName;
- }
当然, 引入的变量也可以修改变量名:
import { lastName as surname } from './profile.js';
一个规范: import 进来的变量, 方法, 对象本身无法修改, 但是, 如果是对象的话, 其中的某个属性还是可以修改的, 但但是, 从规范上, 不要进行任何修改, 将引入的全部当做只读, 否则改 bug 会很头疼.
如果 export 时未采用 {xxx,xxx} 方式, 那么在 import 时, 想要引入所有值, 可以使用 * 来代替:
- // main.js
- import { area, circumference } from './circle';
- console.log('圆面积:' + area(4));
- console.log('圆周长:' + circumference(14));
- // 可以简写成
- import * as circle from './circle';
- console.log('圆面积:' + circle.area(4));
- console.log('圆周长:' + circle.circumference(14));
三, export default 命令
使用 import 的时候会有一个问题, 如果不知道需要加载的模块中的变量名或者函数名, 那就很尴尬. 小模块没什么, 点进去翻翻就知道, 但是像 vue,ElementUI 这种框架的时候, 想要快速上手, 先去翻翻文档?
来源: http://www.bubuko.com/infodetail-2637286.html