ES6:export和import

ES6:export和import

  • 2018年4月21日

ES6模块主要有两个功能:export和importexport用于定义模块对外的接口(一般而言,一个独立的js文件对应一个模块),import用于在一个模块中加载另一个含有export接口的模块。

1.export和import

1.导入和导出单个变量

export.js

1
export var name='LoliMay' //导出name变量

import.js

1
2
3
4
5
6
7
8
9
import { name } from './export.js' //从export.js中导入name变量
export default {
data() {
return { }
},
created: function() {
alert(name) //弹出'LoliMay'
}
}

2.导入和导出多个变量

export.js

1
2
3
var name1 = 'George'
var name2 = 'LoliMay'
export { name1, name2 } //导出多个变量

import.js

1
2
3
4
5
6
7
8
9
10
import { name1, name2 } from './export.js' //从export.js中导入多个变量
export default {
data () {
return { }
},
created: function() {
alert(name1) //弹出'George'
alert(name2) //弹出'LoliMay'
}
}

3.导入和导出函数

export.js

1
2
3
4
function add(x, y) {
return x+y
}
export { add } //导出add函数

import.js

1
2
3
4
5
6
7
8
9
import { add } from './export.js' //导入add函数
export default {
data () {
return { }
},
created: function() {
alert(add(4,6)) //弹出'10'
}
}

由此可见,函数也是对象,它的导入和导出的格式同1一样。

2. export与export default的区别

  • 在一个文件模块中,exportimport可以有多个,export default仅有一个
  • 通过export方式导出,在导入时要加{},export default则不需要
  • 使用export default指定默认输出,导入时允许为这个模块取任意名字
  • export不能与var,let,const一起用
1
2
3
4
5
6
7
8
9
10
11
12
//export.js
export const str = 'I am LoliMay.' //在同一个文件模块中export可以出现多次
export function log(sth) {
return sth
}
var name = 'LoliMay'
export default name //在同一个文件模块中export default只能出现一次
export default var age //错误,export不能与var、let或const一起用

//import.js
import { str, log } from './export.js' //通过export方式导出,在导入时要加{}
import myName from './export.js' //通过export default方式导出,在导入时不需要加{},且可以取任意名字