语法
注意: import 命令具有提升效果, 不管写在哪一行都会提到模块头部首先执行
import
import 模块名 from '路径'
- // 引入变量 默认名称
- import {firstName, lastName, year} from './profile';
- // 需要 更名使用 `as` 关键字
- import { lastName as surname } from './profile';
- // 整体加载模块
- import * as circle from './circle';
- // 直接输出默认 (匿名) 方法(或变量), 可以取一个方法名字, 如 customName
- import customName from './export-default';
- customName();
- // 同时输入默认方法和其他变量
- import customName, { otherMethod } from './export-default';
- export
输出变量
export var firstName = 'Michael';
或
- var firstName = 'Michael';
- export {firstName};
方法也是同样
方法还可以直接以 function 的方式输出, 叫做模块的整体加载
- // test.js
- export function foo() {};
- export function foo1() {};
引入时可以直接使用
- import { foo, foo1 as f } from './test';
- foo();
- f();
输出时可以使用 as 重命名变量名
- export {
- v1 as streamV1
- }
输入默认接口 export default
- // export-default.js
- export default function () {
- console.log('foo');
- }
注意: 输出的必须是一个接口(对象或者类或方法), 而不能直接是一个变量, 如数字, 字符串之类的
支持情况
浏览器
截止 2016.08.02, 所有浏览器均还不支持原生模块化
Node.js
Node.js 6 以上
ES2015 模块加载的本质
ES6 模块加载的机制, 与 CommonJS 模块完全不同 CommonJS 模块输出的是一个值的拷贝, 而 ES6 模块输出的是值的引用
CommonJS 模块输出的是被输出值的拷贝, 也就是说, 一旦输出一个值, 模块内部的变化就影响不到这个值
ES6 模块的运行机制与 CommonJS 不一样, 它遇到模块加载命令 import 时, 不会去执行模块, 而是只生成一个动态的只读引用等到真的需要用到时, 再到模块里面去取值, 换句话说, ES6 的输入有点像 Unix 系统的符号连接, 原始值变了, import 输入的值也会跟着变因此, ES6 模块是动态引用, 并且不会缓存值, 模块里面的变量绑定其所在的模块
模块的继承
- // circleplus.js
- export * from 'circle';
- export var e = 2.71828182846;
- export default function(x) {
- return Math.exp(x);
- }
注意
export * 命令会忽略模块的 default 方法
循环引用
- // a.js
- var b = require('b');
- // b.js
- var a = require('a');
来源: https://www.2cto.com/kf/201802/723553.html