export和export default区别
一.背景
最近好几个小兄弟都问了我export 和export default导出的时候的区别,当时跟他们也只是说了个大概,今天这里多总结一下.
二.论区别
这个export的由来是来源于ES6的模块功能,ES6的模块功能主要由2个命令构成:
export和import
- export命令用于固定模块的对外接口
- import命令用于引入其他模块提供的功能
1.export
export可以导出常量,变量,函数,文件,类,模块等等
export const msg = 'hello';
export var hello='1234';
export function foo(){
}
export class Person{
}
上述代码中,使用export抛出了常量,变量,函数,类,一个js文件中,可以使用export抛出多个数据(指变量常量函数等等).这种写法还有另一种写法:
const msg = 'hello';
var hello = '1234';
function foo() {
}
class Person {
}
export {
msg as info, hello, foo, Person
}
在最底部抛出,使用大括号包起来,相当于抛出了一个大对象,一般我们建议这么写,这样很容易清楚的知道抛出去了什么.另外,我们还可以使用 msg as info 来起别名
2.export default
一个文件或模块中,export 可以有多个,但是export default仅有一个
var world = '2345';
export default world;
//实际上这里的default是给抛出去的数据起了一个系统默认的名字,所以只能有一个,不能有多个
PS: export default 后面千万不要加大括号 {},我已经采坑了
3.import
ES6 中,使用import导入模块,可以导入export抛出来的任何东西,也可以导入路径,比如样式文件
使用 import xxxx from 'xxxxxx'导入模块,在我们使用import导入的时候,导入方式是对应着export如何导出的.
如果是用export导出
import { msg, hello, foo, Person } from './test';
//也可以分批导入
import { msg} from './test';
import { hello} from './test';
import { foo} from './test';
import { Person} from './test';
使用这种方式导出的,我们在import接收的时候,必须使用大括号接收,因为export导出,相当于导出了一个大的对象,我们需要使用解构的方式来接收.
如果是export default导出
//变量名可以随便写
import obj from './test';
使用这种方式导出的,没有必要使用大括号,因为导出时就是一个默认的default名字,所有不需要写大括号
三.总结
1.export与export default都可用于导出常量、函数、类、文件、模块等
2.通过import (常量,函数,文件,类,模块,)名的方式,还可以根据路径导入样式文件，导入
3.一个文件模块中,export和import可以有多个,但是export default只能有一个
4.export default 暴露的成员可以用任意变量来接收
5.一个文件模块中,可以同时使用export和export default向外暴露成员,只不过接收方式不一样
6.通过export方式导出,在导入时必须要使用大括号{}来接收,export default则不需要
7. 通过export方式导出,可以使用 as起别名进行导出