es6模块化export命令

2018-11-10  本文已影响0人  OnePiece索隆

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
export命令输出主要有以下几种方式:
变量输出:

export let a = 1;
export let b = 2;
或
let a = 1;
let b = 2;
export { a, b };

函数输出:

function v1() { ... }
function v2() { ... }
export { v1 , v2 };
或
export function v1() { ... }

as关键字重命名

let a = 1;
export { a as b };

export default 命令

export default function () {
  console.log('foo');
}
import使用:
import customName from './export-default' //注意没有大括号,因为一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。

注意事项:
export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系,export命令输出的接口与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值在编译时确定接口,这点与commonjs不同。
所以以下写法都是错误的:
因为没有提供对外的接口,第一种写法直接输出 1,第二种写法通过变量m,还是直接输出 1。1只是一个值,不是接口。正确的写法是下面这样。

// 报错
export 1;

// 报错
var m = 1;
export m;

参考链接:http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-%E5%91%BD%E4%BB%A4

上一篇 下一篇

猜你喜欢

热点阅读