這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)ECMAScript模塊化和CommonJS模塊化的區(qū)別，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專注于科爾沁左翼網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供科爾沁左翼營銷型網(wǎng)站建設(shè)，科爾沁左翼網(wǎng)站制作、科爾沁左翼網(wǎng)頁設(shè)計、科爾沁左翼網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造科爾沁左翼網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供科爾沁左翼網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

CommonJS 模塊化

采用CommonJS模塊規(guī)范的應(yīng)用，每個文件就是一個模塊，具有自己的私有作用域，不會污染全局作用域。模塊的加載是同步的而且可以加載多次，但在第一次加載后就會被緩存，后面再次被加載時會直接從緩存中讀取。CommonJS主要用于服務(wù)器Node.js編程。

一、 require  與 module.exports

require 在 ES6（bable將import轉(zhuǎn)化為require） 和 CommonJS 中都支持

// 導(dǎo)出 a.js

let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

module.exports = obj

// 引入 b.js

let obj = require('./a.js')

ES6 模塊化

在ES6中每一個模塊即是一個文件，在文件中定義的變量，函數(shù)，對象在外部是無法獲取的。如果你希望外部可以讀取模塊當(dāng)中的內(nèi)容，就必須使用export來對其進(jìn)行暴露（輸出）。

ES6模塊化具有以下特點：

使用依賴 預(yù)聲明的方式導(dǎo)入模塊

依賴延遲聲明 （CommonJS CMD）

優(yōu)點：某些時候可以提高效率

缺點： 無法在一開始確定模塊依賴關(guān)系

依賴預(yù)聲明：（AMD，ES6）

優(yōu)點：一開始可以確定模塊依賴關(guān)系

缺點：某些時候效率低

靈活的多種導(dǎo)入導(dǎo)出方式

閨房的路徑表示法： 所有路徑必須以 ./ 或 ../ 開頭

import命令用于輸入其他模塊提供的功能;export命令用于規(guī)定模塊的對外接口。

一、 import  與 export

// 導(dǎo)出 a.js

/** 寫法一 **/
var name = 'sheep'
function getSheep() {
    name = 'hourse'
}
export {getSheep}

// 引入 b.js
import {getSheep} from '.／a.js'


/** 寫法二 **/
var name = 'sheep'
export function getSheep() {
    name = 'hourse'
}

// 引入 b.js

import {getSheep} from '.／a.js'

二、 import  與 export defalut

export 可以有多個，export default 僅有一個

// 導(dǎo)出 a.js
let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

export default obj

// 引入 b.js

import obj from './a.js'

總結(jié)

• 即使我們使用了 ES6 的模塊系統(tǒng)，如果借助 Babel 的轉(zhuǎn)換，ES6 的模塊系統(tǒng)最終還是會轉(zhuǎn)換成 CommonJS 的規(guī)范。

• Babel5 中使用 require 時，引入值是 module.export 返回的值或者是 export default 返回的值。

• Babel6中，使用 import 引入時，可以直接獲取到 export default 的值 ； 但是如果是 require 導(dǎo)入的組件， 無論導(dǎo)出是 module.export 、export 、 export default可以直接獲取到 export default 的值都必須要加上一個 default。

上述就是小編為大家分享的ECMAScript模塊化和CommonJS模塊化的區(qū)別，如果您也有類似的疑惑，不妨參照上述方法進(jìn)行嘗試。如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊。