Export/Import

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 导出函数导出函数和导出变量一样，需要添加`{ }` ````js //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` 关键字导出，如下 ````js //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` 关键字，如下 ````js //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 第一种写法 ````js //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 第二种写法 ````js //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` ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看最重要的还是要明白为什么要这么写，实在不明白记住就行了。常见考点 1. export 的基本使用 export 用于导出模块中的内容（如变量、函数、类等），使得其他模块能够导入这些内容。 ...