ES6 模块化暴露语法是一种用于在模块之间共享数据的语法。

前端JS的模块化主要有 CommenJS(node)、JS module(es6)两种。

它允许将模块中的数据暴露给其他模块，以便在其他模块中使用该数据。

以下是一个简单的 JS module(es6)模块化暴露语法示例:

分别暴露

就是允许页面中有多个export，每个export都暴露各自的方法或者变量。
方式一

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

引入方法：

import {a,b} from './text.js'
 
a() // 'a'
b() // 'b'

方式二

分别暴露

export const a = 10
export const getData = () => { }
// 对外暴露的实质是 {a,getData}

引入

// 按需引入【逐个引入】
import {a,getData} from './test'
// 全部引入【统一引入】
import * as Dome from './test'

引入并暴露

export {a,getData} from './test' 【暴露的为多个单个数据，模块化不合适】

export * as Dome from './test' 【暴露的为一个模块】

// 对外暴露的实质是 ： {Dome:{a,getData}}

统一暴露

统一暴露和分别暴露方法差不多，区别就是分别有多个export，统一只需要一个，他们的import都需要一个对象{ }来接受暴露的对象名。
方式一

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

引入方法：

import {a,b} from './text.js'
 
a() // 'a'
b() // 'b'

方式二

统一暴露

const a = 10
const getApp = () => { }
export {
	a,
    getApp
}
// 对外暴露的实质是 ： {a,getApp}

引入

// 按需引入【逐个引入】
import {a,getApp} from './test'
// 全部引入【统一引入】
import * as Dome from './test'

引入并暴露

export {a,getAPP} from './test' 【暴露的为多个单个数据，模块化不合适】

export * as Dome from './test' 【暴露的为一个模块，模块化常用】

// 对外暴露的实质是： {Dome:{a,getApp}}

默认暴露

默认暴露（export default）和他们的区别就是一个页面只能有一个export暴露方法
方法一

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

引入方法：

import qwe from './text.js'
 
qwe.a() // 'a'
qwe.b() // 'b'

方法二

默认暴露

=========== 书写方法一 ==========
export default {
    getBpp(){
        
    },
    a:20
}
========== 书写方法二 ==============
const a = 10,
const getBpp = () => {}
export default {
    a,
    getBpp
}
// 对外暴露的实质是 ： {default:{a,getBpp}}

引入

// 简写形式
import Dome from './test'
// 完整形式
import {default as Dome} from './test'

引入并暴露[不可使用简写形式]

export {default as Dome} from './test'
// 暴露的实质是：{Dome:{a,getBpp}}

总结

• 对外暴露出的都是一个对象，但是不同的暴露方法实际暴露的对象有所不同
• 默认并暴露的实质就是使用 export 去除import关键字后的引入写法
• 默认暴露在进行引入并暴露时不能进行简写
• import引入的文件会自动收集在文件的最上方，并按照引入的顺序执行