JS学习之模块导入导出

首先要知道export，import 是什么

我们知道，JS 模块导入导出，使用 import , export 这两个关键字

• export 用于对外输出本模块
• import 用于导入模块

也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了

下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）

1 导出单个变量

• a中定义变量，并通过export导出

  //a.js 导出一个变量，语法如下
  export var site = "www.baidu.net"

• b中使用变量，并通过import导入

  //b.js 中使用import 导入上面的变量
  import { site } from "/.a.js" //路径根据你的实际情况填写
  console.log(site)    //输出： www.baidu.net

2 导出多个变量

上面的例子是导出单个变量，那么如何导出多个变量呢

• a中定义多个变量，并通过export{ } 导出
  

   //a.js 中定义两个变量，并导出
   var siteUrl="www.baidu.net"
   var siteName="baidu开发者社区"
   //将上面的变量导出
   export { siteUrl ,siteName }  

• b中使用多个变量，并通过import{ } 导入
  

   // b.js 中使用这两个变量
   import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写
  
   console.log(siteUrl)    //输出： www.baidu.net
   console.log(siteName)    //输出： baidu开发者社区

3 导出函数

导出函数和导出变量一样，需要添加{ }

• a中定义函数，并通过export{ } 导出
  

  //a.js 中定义并导出一个函数
  function sum(a, b) {
      return a + b
  }
  //将函数sum导出
  export { sum } 

• b中使用函数，并通过import{ } 导入
  

  //b.js 中导入函数并使用
  import { sum } from "/.a.js" //路径根据你的实际情况填写
  console.log( sum(4,6) ) //输出： 10

4 导出对象

js中一切皆对象，所以对象一定是可以导出的，并且有两种写法

4.1、第一种写法

使用 export default 关键字导出，如下

• a中定义对象，并通过export{ } 导出

  //a.js中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
  export default {
      siteUrl:'www.baidu.net',
      siteName:'baidu开发者社区'
  }

• b中使用对象，并通过import{ } 导入

  //b.js 中导入并使用
  import obj from './a.js'       //路径根据你的实际情况填写
  console.log(obj.siteUrl)    //输出：www.baidu.net
  console.log(obj.siteName)    //输出：baidu开发者社区

4.2、第二种写法

同样是使用export default 关键字，如下

• a中定义对象，并通过export default 导出
  

  //a.js 中定义对象，并在最后导出
  var obj = {
         siteUrl:'www.baidu.net',
      siteName:'baidu开发者社区'
  }
  export default obj    //导出对象obj

• b中使用函数，并通过import{ } 导入

  //b.js 中导入并使用
  import obj from './a.js'       //路径根据你的实际情况填写
  console.log(obj.siteUrl)    //输出：www.baidu.net
  console.log(obj.siteName)    //输出：baidu开发者社区

5 导出类

导出类与上面的导出对象类似，同样是用 export default 关键字，同样有两种写法

5.1 第一种写法

• a中定义对象，并通过export 导出

  //a.js 中定义一个类并直接导出
  export default class Person {
      //类的属性
      site = "www.baidu.net"
      //类的方法
      show(){
          console.log(this.site)
      }
  }

• b中使用对象，并通过import{ } 导出

  //b.js 中导入并使用
  //导入类
  import Person from './a.js'
  //创建类的一个对象person
  let person = new Person()
  //调用类的方法
  person.show()   //输出：www.baidu.net

5.2 第二种写法

• a中定义对象，并通过export default导出
  

  //a.js 中定义一个类，最后导出
  class Person {
      //类的属性
      site = "www.baidu.net"
      //类的方法
      show(){
          console.log(this.site)
      }
  }

  //导出这个类
  export default Person 

• b中使用对象，并通过import{ } 导出
  

  //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文件中只支持出现一个