ES6 - module语法(export,import)

926 阅读3分钟

export:导出变量,函数,类等

第一种写法:

 export let name='apple'
 export let age=100
 export let year=2017

第二种写法:更推荐(在最下面使用export导出,能看出究竟哪些变量或其他类型被导出,更直观)

let name1='apple'
let age1=100
let year1=2017
export {name1,age1,year1}

还可以用as重命名,类似sql语句

export {name1 as a,age1 as b}

export命令除了输出变量,还可以输出函数或类(class)

export function multiply(x, y) {
  return x * y;
};

下面代码使用as关键字,重命名了函数v1和v2的对外接口。重命名后,v2可以用不同的名字输出两次。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

注意下面这些情况:

// 报错
export 1;

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

// 报错
let a1=function (){}
 export a1//错误的写法

上面写法都会报错,因为没有提供对外的接口。第一种写法直接输出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必须放在模块顶层,不得放入块级作用域内(报错),因为无法做静态优化;

import 命令

当export导出了模块的对外接口,此时就可以用import导入接口(加载导出的模块)

import {name1,age1,year1} from './es7-1.js'
console.log(name1,age1,year1)//apple 100 2017
// form后面路径可以是相对路径也可以是绝对路径,.js后缀可以省略
// 如果script是行内引用的话,必须加.js后缀,所以建议任何时候都加上后缀

同理import导入时也可以用as重命名:

import {name1 as a1}

同时由于import是静态执行,所以不得对import使用表达式、变量等操作;因为这些都是在运行时执行,并不是编译时(静态)执行

export default

export default可以用在匿名函数之前;当然也可以放在不是匿名函数之前

export default function(){}
// 而导入时,可以import abc from './es7-2' 注意此时的abc没有用大括号括起来,abc可以为任意有效变量名
// 总体来说export default后, import后面可以加上任意变量名,比较方便

比较一下

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

上面代码的两组写法,

  • 第一组是使用export default时,对应的import语句不需要使用大括号;

  • 第二组是不使用export default时,对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能对应一个方法