javascript export和export default

时间:2022-09-28 三掌柜666 人气:0

前言

在前端开发过程中，实现模块化使用是前端三大重要思想之一，也是前端开发者必须要精通的点，而且在前端求职面试中也是必考知识点。在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的区别的相关知识点，在实际开发中，这也是在开发过程中必用的功能，尤其是对于初中级开发者来说，更应该掌握这些情况的使用，更多相关javascript export和export default内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

加载全部内容