彻底弄懂Javascript模块导入导出

　　笔者开始学习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 导出单个变量//a.js 导出一个变量，语法如下 export var site = ＂www.helloworld.net＂  //b.js 中使用import 导入上面的变量 import { site } from ＂/.a.js＂ //路径根据你的实际情况填写 console.log(site)	//输出： www.helloworld.net
　　2 导出多个变量
　　上面的例子是导出单个变量，那么如何导出多个变量呢  //a.js 中定义两个变量，并导出  var siteUrl=＂www.helloworld.net＂  var siteName=＂helloworld开发者社区＂    //将上面的变量导出  export { siteUrl ,siteName }          // b.js 中使用这两个变量  import { siteUrl , siteName } from ＂/.a.js＂ //路径根据你的实际情况填写   console.log(siteUrl)	//输出： www.helloworld.net  console.log(siteName)	//输出： helloworld开发者社区 3 导出函数
　　导出函数和导出变量一样，需要添加 { }  //a.js 中定义并导出一个函数 function sum(a, b) {     return a + b } //将函数sum导出 export { sum }    //b.js 中导入函数并使用 import { sum } from ＂/.a.js＂ //路径根据你的实际情况填写 console.log( sum(4,6) ) //输出： 10
　　4 导出对象
　　js中一切皆对象，所以对象一定是可以导出的，并且有两种写法 4.1 第一种写法
　　使用  export default   关键字导出，如下//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象 export default {     siteUrl:＂www.helloworld.net＂,     siteName:＂helloworld开发者社区＂ }   //b.js 中导入并使用 import obj from ＂./a.js＂   	//路径根据你的实际情况填写 console.log(obj.siteUrl)	//输出：www.helloworld.net console.log(obj.siteName)	//输出：helloworld开发者社区
　　4.2 第二种写法
　　同样是使用 export default   关键字，如下//a.js 中定义对象，并在最后导出 var obj = {    	siteUrl:＂www.helloworld.net＂,     siteName:＂helloworld开发者社区＂ }  export default obj	//导出对象obj   //b.js 中导入并使用 import obj from ＂./a.js＂   	//路径根据你的实际情况填写 console.log(obj.siteUrl)	//输出：www.helloworld.net console.log(obj.siteName)	//输出：helloworld开发者社区 5 导出类
　　导出类与上面的导出对象类似，同样是用  export default   关键字，同样有两种写法5.1 第一种写法//a.js 中定义一个类并直接导出 export default class Person {     //类的属性     site = ＂www.helloworld.net＂      //类的方法     show(){         console.log(this.site)     } }   //b.js 中导入并使用 //导入类 import Person from ＂./a.js＂  //创建类的一个对象person let person = new Person()  //调用类的方法 person.show()  	//输出：www.helloworld.net 5.2 第二种写法//a.js 中定义一个类，最后导出 class Person {     //类的属性     site = ＂www.helloworld.net＂      //类的方法     show(){         console.log(this.site)     } }  //导出这个类 export default Person     //b.js 中导入并使用 //导入类 import Person from ＂./a.js＂  //创建类的一个对象person let person = new Person()  //调用类的方法 person.show()  	//输出：www.helloworld.net 小结
　　下面我们简单总结一下
　　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   ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看
　　最重要的还是要明白为什么要这么写，实在不明白记住就行了。