es6模塊化指的是什么

今天小編給大家分享一下es6模塊化指的是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

es6模塊化是瀏覽器端與服務器端通用的模塊化開發規范，其設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，及輸入和輸出的變量。在ES6模塊化中，每個js文件都是一個獨立的模塊，導入模塊用import關鍵字，導出用expost關鍵字。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

前端模塊化規范的分類

在 ES6 模塊化規范誕生之前，JavaScript 社區已經嘗試并提出了AMD、CMD、CommonJS等模塊化規范。

但是，這些由社區提出的模塊化標準，還是存在一定的差異性與局限性、并不是瀏覽器與服務器通用的模塊化標準，例如：

• AMD 和 CMD 適用于瀏覽器端的 Javascript 模塊化

• CommonJS 適用于服務器端的 Javascript 模塊化

什么是es6模塊化    

ES6 模塊化是瀏覽器端與服務器端通用的模塊化開發規范。

它的出現極大的降低了前端開發者的模塊化學習成本，開發者不需要再額外學習AMD、CMD或CommonJS等模塊化規范

ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。

ES6模塊化規范中定義:

• 每個js文件都是一個獨立的模塊

• 導入其它模塊成員使用import關鍵字

• 向外共享模塊成員使用expost關鍵字

用法：

① 默認導出與默認導入

② 按需導出與按需導入

③ 直接導入并執行模塊中的代碼

默認導出與默認導入

默認導出的語法：

export default 默認導出的成員

默認導入的語法：

import 接收名稱 from '模塊標識符'

let n1 = 10 //定義模塊私有成員n1
let n2 = 20 //定義模塊私有成員n2 (外界訪問不到n2 因為他沒有共享出去)

function show() {} //定義模塊私有方法 show

export default { //使用export default 默認導出語法 向外共享n1 和 show 兩個成員
    n1,show
}

注意點：

① 每個模塊中，只允許使用唯一的一次export default，否則會報錯

② 默認導入時的接收名稱可以任意名稱，只要是合法的成員名稱即

按需導入與按需導出

按需導入語法：

export 類型 成員

按需導出語法：

import { 成員 } from '模塊標識符'

import aixos from '@/utils/request.js'

// login 請求
export const userLogin = (data) => {
    return aixos({
        method: 'post',
        url: '/login',
        data
    })
}

// register 請求
export const userRegister = (data) => {
    return aixos({
        method: 'post',
        url: '/register',
        data
    })
}

注意：

① 每個模塊中可以使用多次按需導出

② 按需導入的成員名稱必須和按需導出的名稱保持一致

③ 按需導入時，可以使用 as 關鍵字進行重命名

④ 按需導入可以和默認導入一起使用

以上就是“es6模塊化指的是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。