ES6的import与export命令

ES6的import与export命令

18
Apr 2018

在ES6之前,大多数都是通过各种第三方库来实现模块化。在ES6中,模块的功能主要是由exportimport组成,并且每个模块都有自己的单独作用域,模块之间的相互调用关系都是通过export来对外暴露接口的,再通过import来引用模块提供的接口。同时还为模块创造了命名空间来防止函数的命名冲突。

注意:ES6的模块自动采用严格模式,不管你有没有在模块头部加上”use strict”;。所以在编写模块代码时,我们要遵循严格模式的规则,否则代码将会报错。

import命令

既然有export导出命令,那自然也少不了import导入命令。

方式一:在加载模块的时候,大括号里面可以写导出模块的变量名,必须保持与导出模块里变量名称的一致性。

import后面的from来指定模块文件的位置,可以写相对路径,也可以写绝对路。如果只是模块名的话,不带有路径,那么必须有配置文件,告诉javascript该模块的位置。

// a.js
let name = "小明";
let age = 28;
let sex = "男性";
export { name, age, sex }

// b.js
import { name, age, sex } from "./a";
console.log("我叫:" + name + ",今年:" + age + "岁");  // "我叫小明,今年28岁"

方式二:export可以改名导出,import也可以改名导入。

import { name as userName } from "./a";

方式三:同理,如果export导出的变量太多的时候,我们也不可能会每次都要写一个import来进行导入。可以使用*号来进行一次性导入所有,再分别按需调用。

export let name = "小明";
export let age = 28;
export let sex = "男性";

import * as myData from "./a";
console.log(myData.sex);  // "男性"
console.log(myData.sex);  // 28

export命令

方式一:最简单的导出方式,可以函数、变量、class前面加上export命令来导出,提供对外接口。

export let name = "小明";
export let age = 28;
export let sex = "男性";

方式二:如果我们每次都要写一次export命令来进行导出,那需要导出的项目太多的话,那我们是不是要疯了…所以可以使用这种优雅、清晰的方式一次性导出。

let name = "小明";
let age = 28;
let sex = "男性";
export { name, age, sex }

方式三:当我们对外暴露接口的时候,可以使用as关键字为接口取一个好听、好记的名字来使用。也可以使用不同的名字来对同一导出的项目输出两次。

function a1() {}
function b1() {}

export {
    a1 as getUrl,
    b1 as deleteKey,
    b1 as deleteAddress
}

export default命令

有时候我们在使用import的时候,用户需要知道所加载的变量名或者函数名的时候,才可以调用。有没有方法在不需要知道名称的时候也可以导入呢?答案是肯定的。这个时候就要使用export default命令来为模块指定默认输出。

// default.js
export default function() {
    console.log("默认输出");
}

这是一个默认导出模块,当使用import导入该模块时候,可以使用任何名称为该匿名函数指定名称来进行调用。

import getElement from "./default";
getElement();  // "默认输出"

我们可以使用任何名称指定该匿名函数,然后进行执行。这样就不需要知道导出的变量与函数名称是什么了。不过需要注意的是,在使用import导入的时候,不能使用大括号了。

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

/鼻子 /黑头 /黄瓜 /魔鬼 /雪糕 /鄙视 /送花 /耳光 /神气 /石头 /石化 /睡觉 /爱心 /点赞 /死去 /无语 /捂眼 /拥抱 /打你 /感动 /感冒 /怒火 /微笑 /害羞 /奸笑 /唉呀 /哭泪 /吐血 /吐口水 /吐你 /口水 /勾引 /剪刀手 /出拳 /冰冻 /亲亲 /中指 /不想看 /不开心