export和export default不再傻傻分不清了

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起别名进行导出