ECMAScript模塊化和CommonJS模塊化的區(qū)別是什么

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

CommonJS 模塊化

采用CommonJS模塊規(guī)范的應(yīng)用，每個(gè)文件就是一個(gè)模塊，具有自己的私有作用域，不會(huì)污染全局作用域。模塊的加載是同步的而且可以加載多次，但在第一次加載后就會(huì)被緩存，后面再次被加載時(shí)會(huì)直接從緩存中讀取。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中每一個(gè)模塊即是一個(gè)文件，在文件中定義的變量，函數(shù)，對(duì)象在外部是無法獲取的。如果你希望外部可以讀取模塊當(dāng)中的內(nèi)容，就必須使用export來對(duì)其進(jìn)行暴露（輸出）。

ES6模塊化具有以下特點(diǎn)：

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

依賴延遲聲明 （CommonJS CMD）

優(yōu)點(diǎn)：某些時(shí)候可以提高效率

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

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

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

缺點(diǎn)：某些時(shí)候效率低

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

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

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

一、 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 可以有多個(gè)，export default 僅有一個(gè)

// 導(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)最終還是會(huì)轉(zhuǎn)換成 CommonJS 的規(guī)范。

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

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

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