什麼是es6模組化-前端問答-PHP中文網

什麼是es6模組化

青灯夜游

發布： 2022-04-19 13:42:39

原創

2609 人瀏覽過

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

什麼是es6模組化

本教學操作環境：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模組化的詳細內容。更多資訊請關注PHP中文網其他相關文章！