export和export default

1. 概述

   在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言标准的层面上，实现了模块功能，而且实现的相当简单，完全可以取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

   在ES6中，export和export default都可以用于导出常量、文件、函数、模块等。

2. export命令

   模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其它模块提供的功能。

   一个模块就是一个独立的文件。该文件内部的所有变量，外部无法直接获取。如果外部要获取模块内部的某个变量，就必须使用export关键字输出该变量。

   例如：

   // a.js
   export var str = '内容'
   export var number = 0
   export function message(sth){
   	return sth
   }
   

   或

   //a.js
   var str = '内容'
   var number = 0
   function message(sth){
       return sth
   }
   export {str,number,message}
   

   通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

   //a.js
   var str = '内容'
   var number = 0
   function message(sth){
       return sth
   }
   export {
   	str as newname1,
       number as newname2,
       message as newname3
   }
   

   上面代码使用as关键字，重命名了变量str、number、message的对外接口。

3. export default命令

   export default命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此，export default命令只能使用一次。所以，import命令后面不用加大括号。

   一个文件内有且只能有一个export default

   //a.js
   const str = '内容'
   export default str
   
   //在另一个文件中的导入方式
   //b.js
   import strFile from 'a'
   //导入的时候没有{}
   //本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你引入的时候为它去任意名字
   

4. import命令

   使用export命令定义了模块的对外接口后，其它JS文件就可以通过import命令加载这个模块。

   //b.js
   import {str,number,message} fron './a'
   //也可以分开写两次，导入的时候带花括号，将每个变量函数名写清楚
   

   上面代码的import命令，用于加载a.js文件，引入后就可以在b.js中使用a.js文件中的变量、函数、类等。import命令接受一对大括号，里面指定要从其它模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。

   如果想为输入的变量重新去一个名字，import命令要使用as关键字，将输入的变量重命名。

   //b.js
   import {
       str as newname1,
       number as newname2,
       message as newname3
   } from './a'
   

   import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉JavaScript引擎该模块的位置。

   //import引入一个依赖包，不需要相对路径
   import axios from 'axios'
   //import引入一个自己写的js文件，是需要相对路径的
   import AppService from './appService'
   

5. 简述区别

   • export与export default均可用于导出常量、函数、文件、模块等
   • 在一个文件或模块中，export、import可以有多个，export default有且仅有一个
   • 通过export方式导出，在导入时要加{}，export default则不需要，并可以起任意名称
   • 输出单个值，使用export default
   • 输出多个值，使用export
   • export default与普通的export不要同时使用