首頁  >  文章  >  web前端  >  什麼是es6模組化

什麼是es6模組化

青灯夜游
青灯夜游原創
2022-04-19 13:41:472716瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn