import、export、export default的用法

前言

很多时候都会将一个模块，一条数据或者是工具方法抽离出来，在我们需要的时候再导入到我们需要的页面中，但总是记不清什么时候用export 什么时候用export default，什么时候需要{}，什么时候又不需要，今天就来梳理一下

---

---

一、export 与 export default的区别

先来说一说export 与 export default的区别，以便我们更好的知道在什么时候什么场景去使用。

1、export与export default均可用于导出常量、函数、文件、类等；

2、你可以在其它文件或模块中通过import 导入名 form '文件路径'的方式将其导入使用；

3、在一个文件或模块中，export、import可以有多个，export default仅有一个；

4、通过export方式导出，在导入时要加{}，export default则不需要；

5、使用export 导出后，import {}可以按需导入，减小项目大小，而 export default 是全部导入，开发中更推荐 export，这也是为什么我们引入的大多数第三方包的时候都是通过import {}的方式导入的；

---

二、export 与import

通过 export 方式导出，在导入时要加 大括号 { } ，可以通过该方式实现按需加载，一般会用于项目的工具模块，需要哪个方法就引入哪个方法；

导出

//  say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

const name = 'alex';

export {sayHi, sayBye, name}; // 导出变量列表

或者

export function sayHi(user) {
	alert(`Hello, ${user}!`);
}
export function sayBye(user) {
  alert(`Bye, ${user}!`);
}
export const name = 'bob';

导入 导入名称要与导出名称一样

//  main.js
import {sayHi, sayBye, name} from './say.js';

sayHi(name); // Hello, bob!
sayBye(name); // Bye, bob!

二、“as” 别名

Import “as”

我们也可以使用 as 让导入具有不同的名字，例如：

//  main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('bob'); // Hello, bob!
bye('John'); // Bye, John!

Export “as”

导出也具有类似的语法。

我们将函数导出为 hi 和 bye：

//  say.js
...
export {sayHi as hi, sayBye as bye};

//  main.js
import {hi, bye} from './say.js';

三、Import *

通常，我们把要导入的东西列在花括号 import {…} 中，但是如果有很多要导入的内容，我们可以使用 import * as 将所有内容导入为一个对象，例如：

//  main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

但是我们通常不会这样去写，原因如下：

1、现代的构建工具（webpack 和其他工具）将模块打包到一起并对其进行优化，以加快加载速度并删除未使用的代码，这样全都引入的话就没法达到这种效果。

2、明确列出要导入的内容会使得名称较短：sayHi() 而不是 say.sayHi()。

3、导入的显式列表可以更好地概述代码结构：使用的内容和位置。它使得代码支持重构，并且重构起来更容易。

四、Export default 与 import

该方式导入导出都不需要 { }

在实际中，主要有两种模块。

• 包含库或函数包的模块，像上面的 say.js。
• 声明单个实体的模块，例如模块 user.js 仅导出 class User。

大部分情况下，开发者倾向于使用第二种方式，以便每个“东西”都存在于它自己的模块中。

当然，这需要大量文件，因为每个东西都需要自己的模块，但这根本不是问题。实际上，如果文件具有良好的命名，并且文件夹结构得当，那么代码导航（navigation）会变得更容易。

模块提供了一个特殊的默认导出 export default 语法，以使“一个模块只做一件事”的方式看起来更好。

例如下面的apiUrl.js文件

导出

//  say.js
let url = 'https://xxxx.xxxx.cn/api/'
let apiUrl = {
	// 为你优选
	getpreferurl: url + 'forshop/getprefer',
	// 商家列表
	getwxshop: url + 'forshop/wxshop',
	// 综合排序
	poststaring: url + 'forshop/starting'
}

export default apiUrl;

或者

//  say.js
let url = 'https://xxxx.xxxx.cn/api/'
export default apiUrl = {
	// 为你优选
	getpreferurl: url + 'forshop/getprefer',
	// 商家列表
	getwxshop: url + 'forshop/wxshop',
	// 综合排序
	poststaring: url + 'forshop/starting'
}

导入这里不需要与导出名一样，因为默认只导出这一个，总能找到

import api from './say.js';  //  api就相当于 apiUrl

参考文章：https://zh.javascript.info/import-export