ES6 Module 三种暴露方式

0、简介

ES6 新增了模块功能，其中主要有两个：export和import

• export 用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。可以导出常量、函数、文件、模块等。
• import 用于在一个模块中加载另一个含有export接口的模块。

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

前端 JS 模块化对外暴露有三种方式，分别时 默认暴露、统一暴露、分别暴露。

1、默认暴露

使用 export default 关键字导出一个函数或变量，只能在导入时使用任意名称进行引用。

1.在新建的test.js文件中

export default {
  a(){
    console.log(111);
  },
  b(){
    console.log(222);
  }
}

2.在需要使用的页面中

import test from '../../api/test.js'

console.log(test.a()); //111

2、统一暴露

在一个模块中定义多个函数或变量，并使用 export 关键字导出，最后在另一个模块中使用 import * as 语法进行引入或直接导入

1.在新建的test.js文件中

function a(){
  console.log('111');
}
function b(){
  console.log('222');
}
export {a,b}

2.在需要使用的页面中

import {a,b} from '../../api/test.js'

console.log(a()); //111

3、分别暴露

使用 export 关键字导出多个函数或变量，每个导出的函数或变量都需要使用 {} 语法进行引入

1.在新建的test.js文件中

export function a(){
  console.log('111');
}
export function b(){
  console.log('222');
}

2.在需要使用的页面中

import {a,b} from '../../api/test.js'


console.log(a()); //111

4、export与export default

很多时候 export 与 export default 可以实现同样的目的，只是用法有些区别。

相同点：

1. export 与 export default 均可用于导出常量、函数、文件、模块等
2. 你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用

不同点：

1. 在一个文件或模块中，export、import可以有多个，export default仅有一个
2. 通过export方式导出，在导入时要加 { }，export default则不需要
3. 使用 export default 为模块指定默认输出，导入时只需要知道文件名即可，但是使用 export 必须知道导出的变量或者函数等，导入时变量名要一致

//export default:
export default const a = "hello world"
//导入方式
import a from "demo1.js"        // 这里 a 不需要大括号

//export:
export const a = "hello world"
//导入方式
import {a} from "demo1.js"      // 这里的 a 必须和导出时的变量名一致

export default 其他示例

//test.js
export default {
    a:10;
    list:function(){}
}

//index.js
//第一种写法
import {a, list} from ./test.js
console.log(a);
list()

//第二种写法
import * as test from ./test.js
console.log(test);
console.log(test.a);
test.list()

//对应 export default 的导入方式
import test from ./test.js
console.log(test);
console.log(test.a);
test.list()