ES6中export 和 import

简介在ES6中我们可以通过export导出一个模块,有一下几种方法:  1.1  export default xx ,默认导出一个模块[AppleScript] 纯文本查看 复制代码?123export default function(a, b) {  console.log(a + b);}在另一个页面导入这个js文件:[AppleScript] 纯文本查看 复制代码?12// import

  在ES6中我们可以通过export导出一个模块,有一下几种方法:
  1.1  export default xx ,默认导出一个模块

[AppleScript] 纯文本查看 复制代码

?

1
2
3
export default function(a, b) {
  console.log(a + b);
}


在另一个页面导入这个js文件:

[AppleScript] 纯文本查看 复制代码

?

1
2
// import a from "./base.mjs";
// a(1, 2);



这里我们要注意的是,此处我们引入的是export default默认的模块,所以我们这里要给引入的东西起一个名字。

1.2  注意,一个文件只能export default 一次 ,如果多次导出default就会报错
Identifier '*default*' has already been declared

显示default已经被声明的错误。

1.3  export default {} 还可以导出一个对象模块

[AppleScript] 纯文本查看 复制代码

?

1
2
3
4
5
6
export default {
  name: "jack",
  tell: function() {
    console.log(this.name);
  }
};


在引入代码的地方依旧是起一个别名

[AppleScript] 纯文本查看 复制代码

?

1
import a from 'base.mjs'



1.4 如果要导出多个数据,可以使用export xx
比如:

[AppleScript] 纯文本查看 复制代码

?

1
export const a = function(){}



注意: 这种可以导出很多个
1.5  上述代码是直接在导出声明,你也可以先声明,再一起导出:

[AppleScript] 纯文本查看 复制代码

?

1
2
3
4
5
6
// 4. export 可以 导出一些其他数据
const name = "harry";
const age = 19;
// 错误写法 要么直接声明在export中要么用类对象的形式表示
// export name,age
export { name, age };



注意: 不过export name,age的写法是错误的 。要用一个类似对象的格式接收要导出的对象。

1.6 在导入页面:
我们可以同时引入 default暴露的数据和export的数据

[AppleScript] 纯文本查看 复制代码

?

1
2
3
4
5
// 可以和default导入的模块共存
// 使用es6的解构方式把导出的数据传递出来
// import { name, age } from "./base";
// 也可以简写到一起
// import a, { name, age } from "./base";



1.7 可以起一个别名:

[AppleScript] 纯文本查看 复制代码

?

1
2
3
// 也可以导出部分属性 用别名表示 及时和a重名也没关系
// import { name as a, age } from "./base";
// console.log(a);



但是不可以重名。

1.8 如果想导入全部数据:

[AppleScript] 纯文本查看 复制代码

?

1
2
3
4
// 一次性大丰收 获取全部数据
// 但是由于我们导出的模块不是当前页面全部都要用到,所以不建议使用这种全部导入的方式,选择按需导入 es6的解构方式会好很多
import * as a from "./base";
console.log(a);




最后: 在node中,es6中的module语法处于试验阶段,所以在node中运行的代码要把后缀名js 改成 mjs


本文转自:https://blog.51cto.com/14360146/2430780