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關鍵字
##用法:
① 預設導出與預設導入② 按需導出與按需導入③ 直接導入並執行模組中的程式碼
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中文網其他相關文章!