2019独角兽企业重金招聘Python工程师标准>>>
在es6之前存在AMD(浏览器)和CommonJS(服务器)模块加载方案,而ES6的模块加载方案使其成为通用方案。ES6的模块加载机制在编译时就能确定模块的依赖关系,而AMD和CommonJS规范则在运行时才能确定加载依赖,因此ES6的模块规范是静态化的,编译时直接加载对应模块,具有天然的编译优势。
自动采用严格模式,在模块头部自动添加 "use strict",export和import必须在模块顶层,不能再块级作用域中。
ES6中的_import_(输入其他模块的功能) 和 export(对外提供接口)
Export
_ 输出一组变量:_
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};// profile.js
输出函数或类(class):
export function multiply(x, y) {
return x * y;
};
使用as关键字重命名:
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
export对外的接口,必须与模块内部的变量建立一一对应关系
错误写法:
// 报错
export 1;
// 报错
var m = 1;
export m;
正确写法:
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
Import命令具有提升效果,会提升到整个模块的头部,首先执行。路径中可以是相对路径和绝对路径,不带有路径必须通过配置,告诉引擎怎么取到这个模块。由于ES6中的模块加载时静态执行过程,因此不允许表达式。
输入变量
// main.js 注意需要与export中的暴露的接口名称保持一致
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
// circle.js export暴露接口
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
// main.js import整体加载
import * as circle from './circle';
console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));
export default命令输出的是模块默认值,import该模块时不需要大括号{}!!!
export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;