ES6 模块化【暴露、引入、引入并暴露】

ES6 模块化

什么是模块化？

将一个js文件按照功能作用分解为多个js文件

为什么要使用模块化

使用模块化可以对不同的功能点进行统一管理，降低耦合性，减少同名的影响。每一个模块都有单独的空间。

常用模块化分类

1.CommonJS

暴露

module.exports = function add (a, b) { return a + b; }
module.exports = {
		........
}

引入

const result = require('./test')

2.ES6 模块化

分别暴露：

分别暴露

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}}

统一暴露：

统一暴露

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 {
    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引入的文件会自动收集在文件的最上方，并按照引入的顺序执行