前端开发：export 和 export default的区别

前言

在前端开发过程中，实现模块化使用是前端三大重要思想之一，也是前端开发者必须要精通的点，而且在前端求职面试中也是必考知识点。在ES6中，引入了模块化理念，设计思想就是在编译时候就能确定模块的依赖关系，以及输入和输出的变量，其中就包含导出和导入两个模块。那么本篇博文就来分享一下关于导出的时候export 和 export default的区别，关于导入相关的内容会在另外的文章中介绍，这里只介绍导出相关的内容，记录一下，方便查阅使用。

export

1、基本用法

模块通过export导出各种类型的变量，如字符串，数值，函数，类。基本用法如下所示：

导出的函数声明与类声明必须要有名称（export default 另外考虑）。

不仅能导出声明还能导出引用（如函数）。

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

注意：在使用export导出的时候，建议使用大括号指定所要输出的一组变量在文档结尾部分，明确导出的接口；函数和类都要有对应的名称，导出文档尾部会避免无对应的名称的情况。

2、as用法

使用export命令导出接口名称的时候，需要与模块内部的变量有一一对应的关系；导入的变量名称也需要和导出的接口名称一致，但是顺序可以不用一致。

不同模块导出接口名称重复的时候，需要使用as重新定义变量名，相当于做一个“等价转换”的操作。

3、复合使用

在实际使用中，export 与 import 可以在同一模块同时复合使用，复合使用的特点如下所示：

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

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

4、使用示例

示例一：

/*-----export [dome.js]-----*/
 
let name = "Jack";
let age =30;
let fun = function(){ return "My name is" + name + "! I'm '" + age + "years old." }
let mClass = class mClass { static aaa = "Hello!"; }
export { name, age, fun, mClass }

示例二：

/*-----export [demo1.js]-----*/
let name = "Jack";
export { name as exportName }
 
 
/*-----export [demo2.js]-----*/
let name2 = "Jack";
export { name2 }
 
 
/*-----export [demo3.js]-----*/
let name3 = "Jack";
export { name3 }

示例三：

export { foo, bar } from "methods"; // 大约等同于约下面两段语句，不过上面导入导出方式的该模块没有导入 foo 与 bar
 
 
import { foo, bar } from "methods";
export { foo, bar };
export { foo as bar } from "methods";  // 普通情况下的改名
export { foo as default } from "methods";  // 把 foo 转导成 default
export { default as foo } from "methods";  // 把 default 转导成 foo
export * from "methods"; // *号类型

 

export default

1、基本用法

  在一个文件或模块中，export default仅有一个导出，基本用法如下所示：

• export default 中的 default 是对应的导出接口变量。
• 模块在通过export default 在做导出的时候，使用导入时则不需要加{ }。
• 在使用export default 向外暴露的成员的时候，可以使用任意变量来接收。

2、使用示例

var a = "My name is Jack!";
export default a; // 仅有一个导出
 
 
export default var c = "error";  // error，default 已经是对应的导出变量，不能跟着变量声明语句
import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

 

区别

1、相同部分

1⃣️export 和 export default都是通过import导入的；

2⃣️export 和 export default都是用来导出的，如常量、函数、文件、模块等等。

2、不同部分

1⃣️在一个文件或模块中，export的导出可以有多个，但是export default仅有一个导出。也就是输出单个变量使用export default，输出多个变量使用export；

2⃣️模块在通过 export 方式导出的时候，在使用导入时要加{ }，而export default 在做导出的时候，使用导入时则不需要；

3⃣️使用 export default给模块指定默认导出的时候，导入时候只需要拿到文件名字即可；使用 export导出的时候，必须知道导出的函数或者变量等，导入的时候变量名需要和导出时的名字保持一致。

拓展：import导入

1、基本用法

基本用法如下所示：

• 模块通过import导入各种类型的变量，如字符串，数值，函数，类。
• import 命令会提升到整个模块的头部，首先执行。

2、特点

只读属性：不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，但不能改写 import 变量类型为基本类型的值。

单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。

静态执行特性：import 是静态执行，所以不能使用表达式和变量。

3、使用示例

示例一：

import {a} from "./aaa.js"
 
a.foo = "hello";  // a = { foo : 'hello' }

示例二：

import { a, b } from "./xxx.js";  //导入多个变量的写法

 

最后

        通过上面介绍的关于前端开发中export 和 export default的区别的相关知识点，在实际开发中，这也是在开发过程中必用的功能，尤其是对于初中级开发者来说，更应该掌握这些情况的使用，这里不再赘述。

以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！

三掌柜的微信公众号：

 

三掌柜的新浪微博：