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命令后面才不用加大括号,因为只可能对应一个方法。