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引入的文件會自動收集在文件的最上方，并按照引入的順序執行

總結

以上是生活随笔為你收集整理的ES6 模块化【暴露、引入、引入并暴露】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。