export 与export default 的作用，区别

学习时候，第一次看到的是 export default 后面跟个大括号，然后里面定义了一些数据，完全不知道它的含义，如何使用它，找了一些资料学习一下：有一些关键字：

export   import    export default

export  是es6中新增的模块。ES6 模块不是对象；我带着下面列出的问题去寻找答案：

1、模块是什么，有什么用？再哪里可以使用它？

这是Es6中 Module 的语法的知识；

模块化就是使项目简便化？

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量

// ES6模块
import { stat, exists, readFile } from 'fs';

 

除了静态加载带来的各种好处，ES6 模块还有以下好处。

• 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。

• 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。

• 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。

2、export 的用法：

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

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//也可以这样写
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

 

3、import的用法

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

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

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

4、export default的用法，他与export的区别是啥？

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

区别：

export的使用                                              export default  的使用        

a.js                                                                a.js

let fun1=(a)=>{                                             let fun1=(a)=>{

return a;                                                          return a;

}                                                                   } 

export { fun1}   //导出                                          export default { fun1}       //导出                                           

在b.js页面的引用                                          在b.js页面的引用

import {fun1} from "a.js"    //导入                      import fun from "a.js"  //导入 

使用时候   fun1(2)                                         fun.fun1(2)

上面可以看到在导出时候右边的加了default ，右边的使用时候用了。去使用，

这里使用了一个看不出多大的区别，我们想想如果a.js中有很多个方法需要导出

export { fun1,fun2,fun3,......}                                               export default { fun1,fun2,fun3,......}    

import { fun1,fun2,fun3,......}  from "a.js"                               import fun from "a.js"

使用时候   fun1(2)  ,   fun2(2) ,fun3(2)                                     fun.fun1(2)，fun.fun2(2)，fun.fun3(2)