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

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、珠海網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為珠海等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

es6模塊化是瀏覽器端與服務(wù)器端通用的模塊化開發(fā)規(guī)范，其設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，及輸入和輸出的變量。在ES6模塊化中，每個(gè)js文件都是一個(gè)獨(dú)立的模塊，導(dǎo)入模塊用import關(guān)鍵字，導(dǎo)出用expost關(guān)鍵字。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

前端模塊化規(guī)范的分類

在 ES6 模塊化規(guī)范誕生之前，JavaScript 社區(qū)已經(jīng)嘗試并提出了AMD、CMD、CommonJS等模塊化規(guī)范。

但是，這些由社區(qū)提出的模塊化標(biāo)準(zhǔn)，還是存在一定的差異性與局限性、并不是瀏覽器與服務(wù)器通用的模塊化標(biāo)準(zhǔn)，例如：

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

• CommonJS 適用于服務(wù)器端的 Javascript 模塊化

什么是es6模塊化    

ES6 模塊化是瀏覽器端與服務(wù)器端通用的模塊化開發(fā)規(guī)范。

它的出現(xiàn)極大的降低了前端開發(fā)者的模塊化學(xué)習(xí)成本，開發(fā)者不需要再額外學(xué)習(xí)AMD、CMD或CommonJS等模塊化規(guī)范

ES6 模塊的設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。

ES6模塊化規(guī)范中定義:

• 每個(gè)js文件都是一個(gè)獨(dú)立的模塊

• 導(dǎo)入其它模塊成員使用import關(guān)鍵字

• 向外共享模塊成員使用expost關(guān)鍵字

用法：

① 默認(rèn)導(dǎo)出與默認(rèn)導(dǎo)入

② 按需導(dǎo)出與按需導(dǎo)入

③ 直接導(dǎo)入并執(zhí)行模塊中的代碼

默認(rèn)導(dǎo)出與默認(rèn)導(dǎo)入

默認(rèn)導(dǎo)出的語法：

export default 默認(rèn)導(dǎo)出的成員

默認(rèn)導(dǎo)入的語法：

import 接收名稱 from '模塊標(biāo)識(shí)符'

let n1 = 10 //定義模塊私有成員n1
let n2 = 20 //定義模塊私有成員n2 (外界訪問不到n2 因?yàn)樗麤]有共享出去)

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

export default { //使用export default 默認(rèn)導(dǎo)出語法 向外共享n1 和 show 兩個(gè)成員
    n1,show
}

注意點(diǎn)：

① 每個(gè)模塊中，只允許使用唯一的一次export default，否則會(huì)報(bào)錯(cuò)

② 默認(rèn)導(dǎo)入時(shí)的接收名稱可以任意名稱，只要是合法的成員名稱即

按需導(dǎo)入與按需導(dǎo)出

按需導(dǎo)入語法：

export 類型 成員

按需導(dǎo)出語法：

import { 成員 } from '模塊標(biāo)識(shí)符'

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

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

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

注意：

① 每個(gè)模塊中可以使用多次按需導(dǎo)出

② 按需導(dǎo)入的成員名稱必須和按需導(dǎo)出的名稱保持一致

③ 按需導(dǎo)入時(shí)，可以使用 as 關(guān)鍵字進(jìn)行重命名

④ 按需導(dǎo)入可以和默認(rèn)導(dǎo)入一起使用

以上就是“es6模塊化指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。