[JavaScript知识库]十. ES6中的export和import的几种方式汇总

1. 前言

学习vue的时候，总是碰到好几种花样的export和import的方式！这里来总结一下

2. export暴露数据的语法汇总（3种）

（1）分别暴露

• 语法：在定义变量或函数的前面加export关键字！
• 举例：

export let a = 1;
export function b() {
	~~~
}

（2）统一暴露

• 语法：用export关键字单独写一行用于暴露数据。
• 举例：

let a = 1;
function b() {
	~~~
}
export {a,b};

注意事项

• export统一暴露时，若某些成员在import导入时不需要，可以不在{ }中定义
• 使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

（3）默认暴露

• 语法：用export default关键字包含所有要暴露的数据。
• 举例：

export default {
	//let a = 1, 错误形式
	//正确
	function b() {
		~~~
	},
	//正确，对象形式
	c: 'hello',
	//正确，对象形式
	d: function() {
		~~~
	}
}

注意事项：

• 对于这样的方式，若想要通过引入模块import调用里面的具体数据的话，就要多加一层default。例：模块名.default.函数名()或模块名.default.变量名
• export default内包含的数据可以是对象形式（键值对），可以是函数形式。并且要用逗号分割，不是分号。
• 若在html文件中使用<script>标签中import模块的话，要设置<script>标签的type属性为module，因为默认不能使用module形式，即不能使用import导入文件
• export default 向外暴露的成员，可以使用任意变量来接收
• 在一个模块中，export default 只允许向外暴露一次
• 在一个模块中，可以同时使用export default 和export 向外暴露成员

2. import引入数据模块的语法汇总（3种）

（1）通用导入方式

import * as 模块别名 from '相对地址';

（2）解构赋值形式

import {暴露的变量名} from '相对地址';

若要引入的两个模块有相同的变量名，则用as关键字起别名。例：

import {a } from './m1.js';
import {a as b} from './m2.js';

（3）简便形式（只适用于默认暴露）

import 模块别名 from '相对地址';

（4）import导入模块注意事项：

1）使用vue-cli脚手架扫描js代码部分的规则：在全部的js的代码中，会优先执行import，然后执行其他代码，而执行import导入模块时，会将要导入的模块从上至下执行一遍（因为要找到什么数据暴露了）
2）import导入模块的相对地址，有不写文件名的情况，如stroe/index.js文件，只需要这样写即可import ~ from './stroe'，不用写文件名。因为会默认扫描index.js文件