es6模块export 与 import 的使用

export 与 import

基本用法

模块导入导出各种类型的变量,如字符串,数值,函数,类。

导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。 

不仅能导出声明还能导出引用(例如函数)。

export 命令可以出现在模块的任何位置,但必需处于模块顶层。

import 命令会提升到整个模块的头部,首先执行。


/*-----export [test.js]-----*/

let myName = "Tom";

let myAge = 20;

let myfn = function(){

    return "My name is" + myName + "! I'm '" + myAge + "years old."

}

let myClass =  class myClass {

    static a = "yeah!";

}

export { myName, myAge, myfn, myClass }

 

/*-----import [xxx.js]-----*/

import { myName, myAge, myfn, myClass } from "./test.js";

console.log(myfn());// My name is Tom! I'm 20 years old.

console.log(myAge);// 20

console.log(myName);// Tom

console.log(myClass.a );// yeah!


调用方式

<script type="module" src="index.js"></script>



as 的用法

export 命令导出的接口名称,须和模块内部的变量有一一对应关系。


导入的变量名,须和导出的接口名称相同,即顺序可以不一致。


/*-----export [test.js]-----*/

let myName = "Tom";

export { myName as exportName }

 

/*-----import [xxx.js]-----*/

import { exportName } from "./test.js";

console.log(exportName);// Tom

使用 as 重新定义导出的接口名称,隐藏模块内部的变量

/*-----export [test1.js]-----*/

let myName = "Tom";

export { myName }

/*-----export [test2.js]-----*/

let myName = "Jerry";

export { myName }

/*-----import [xxx.js]-----*/

import { myName as name1 } from "./test1.js";

import { myName as name2 } from "./test2.js";

console.log(name1);// Tom

console.log(name2);// Jerry


export default 命令

在一个文件或模块中,export、import 可以有多个,export default 仅有一个。

export default 中的 default 是对应的导出接口变量。

通过 export 方式导出,在导入时要加{ },export default 则不需要。

export default 向外暴露的成员,可以使用任意变量来接收。


export 与 import 可以在同一模块使用,使用特点:


可以将导出接口改名,包括 default。

复合使用 export 与 import ,也可以导出全部,当前模块导出的接口会覆盖继承导出的。


export { foo, bar } from "methods";

 

// 约等于下面两段语句,不过上面导入导出方式该模块没有导入 foo 与 bar

import { foo, bar } from "methods";

export { foo, bar };

 

/* ------- 特点 1 --------*/

// 普通改名

export { foo as bar } from "methods";

// 将 foo 转导成 default

export { foo as default } from "methods";

// 将 default 转导成 foo

export { default as foo } from "methods";

 

/* ------- 特点 2 --------*/

export * from "methods";


下一篇:ES6 Class 类
TOP