笔者开始学习Javascript的时候，对模块不太懂，不知道怎么导入模块，导出模块，就胡乱一通试
比如 import xx from 'test.js' 不起作用，就加个括号 import {xx} from 'test.js'
反正总是靠蒙，总有一种写法是对的，其实还是没有理解，还是不懂
尤其是在当初写 www.helloworld.net 网站的时候，一遇到这种问题，就懵逼了，尤其是引入第三方库的时候
这种情况下更多，此篇文章也是为了怕以后忘记，自查用的，也希望能帮助更多的朋友，此篇文章只是针对ES6的模块相关知识
首先要知道export，import 是什么
我们知道，JS 模块导入导出，使用 import , export 这两个关键字
- export 用于对外输出本模块
- import 用于导入模块
也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了
下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）
1 导出单个变量
1//a.js 导出一个变量，语法如下 2export var site = "www.helloworld.net" 3 4//b.js 中使用import 导入上面的变量 5import { site } from "/.a.js" //路径根据你的实际情况填写 6console.log(site) //输出： www.helloworld.net
2 导出多个变量
上面的例子是导出单个变量，那么如何导出多个变量呢
1 //a.js 中定义两个变量，并导出 2 var siteUrl="www.helloworld.net" 3 var siteName="helloworld开发者社区" 4 5 //将上面的变量导出 6 export { siteUrl ,siteName } 7 8 9 10 // b.js 中使用这两个变量 11 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写 12 13 console.log(siteUrl) //输出： www.helloworld.net 14 console.log(siteName) //输出： helloworld开发者社区 15
3 导出函数
导出函数和导出变量一样，需要添加{ }
1//a.js 中定义并导出一个函数 2function sum(a, b) { 3 return a + b 4} 5//将函数sum导出 6export { sum } 7 8 9//b.js 中导入函数并使用 10import { sum } from "/.a.js" //路径根据你的实际情况填写 11console.log( sum(4,6) ) //输出： 10
4 导出对象
js中一切皆对象，所以对象一定是可以导出的，并且有两种写法
4.1 第一种写法
使用 export default 关键字导出，如下
1//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象 2export default { 3 siteUrl:'www.helloworld.net', 4 siteName:'helloworld开发者社区' 5} 6 7 8//b.js 中导入并使用 9import obj from './a.js' //路径根据你的实际情况填写 10console.log(obj.siteUrl) //输出：www.helloworld.net 11console.log(obj.siteName) //输出：helloworld开发者社区
4.2 第二种写法
同样是使用export default 关键字，如下
1//a.js 中定义对象，并在最后导出 2var obj = { 3 siteUrl:'www.helloworld.net', 4 siteName:'helloworld开发者社区' 5} 6 7export default obj //导出对象obj 8 9 10//b.js 中导入并使用 11import obj from './a.js' //路径根据你的实际情况填写 12console.log(obj.siteUrl) //输出：www.helloworld.net 13console.log(obj.siteName) //输出：helloworld开发者社区 14
5 导出类
导出类与上面的导出对象类似，同样是用 export default 关键字，同样有两种写法
5.1 第一种写法
1//a.js 中定义一个类并直接导出 2export default class Person { 3 //类的属性 4 site = "www.helloworld.net" 5 6 //类的方法 7 show(){ 8 console.log(this.site) 9 } 10} 11 12 13//b.js 中导入并使用 14//导入类 15import Person from './a.js' 16 17//创建类的一个对象person 18let person = new Person() 19 20//调用类的方法 21person.show() //输出：www.helloworld.net 22
5.2 第二种写法
1//a.js 中定义一个类，最后导出 2class Person { 3 //类的属性 4 site = "www.helloworld.net" 5 6 //类的方法 7 show(){ 8 console.log(this.site) 9 } 10} 11 12//导出这个类 13export default Person 14 15 16 17//b.js 中导入并使用 18//导入类 19import Person from './a.js' 20 21//创建类的一个对象person 22let person = new Person() 23 24//调用类的方法 25person.show() //输出：www.helloworld.net 26
小结
下面我们简单总结一下
export与export default的区别
- export与export default均可用于导出常量、函数、文件、模块等
- 可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
- export default后面不能跟const或let的关键词
- export、import可以有多个，export default仅有一个。
- 通过export方式导出，在导入时要加 { }，export default则不需要
- export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
- 模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个
对于 import ,export , export default ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看
最重要的还是要明白为什么要这么写，实在不明白记住就行了。