CommonJs和Es Module有哪些區別

這篇文章主要為大家展示了“CommonJs和Es Module有哪些區別”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CommonJs和Es Module有哪些區別”這篇文章吧。

為什么會有CommonJs和Es Module呢

我們都知道在早期JavaScript模塊這一概念，都是通過script標簽引入js文件代碼。當然這寫基本簡單需求沒有什么問題，但當我們的項目越來越龐大時，我們引入的js文件就會越多，這時就會出現以下問題：

• js文件作用域都是頂層，這會造成變量污染

• js文件多，變得不好維護

• js文件依賴問題，稍微不注意順序引入錯，代碼全報錯

為了解決以上問題JavaScript社區出現了CommonJs，CommonJs是一種模塊化的規范，包括現在的NodeJs里面也采用了部分CommonJs語法在里面。那么在后來Es6版本正式加入了Es Module模塊，這兩種都是解決上面問題，那么都是解決什么問題呢。

• 解決變量污染問題，每個文件都是獨立的作用域，所以不存在變量污染

• 解決代碼維護問題，一個文件里代碼非常清晰

• 解決文件依賴問題，一個文件里可以清楚的看到依賴了那些其它文件

那么我們下面來一一了解它們的語法及弊端吧

CommonJs 基本語法

導出

CommonJs中使用module.exports導出變量及函數，也可以導出任意類型的值，看如下案例。

// 導出一個對象
module.exports = {
    name: "蛙人",
    age: 24,
    sex: "male"
}

// 導出任意值
module.exports.name = "蛙人"
module.exports.sex = null
module.exports.age = undefined

直接導出

導出也可以省略module關鍵字，直接寫exports導出也可以，看如下案例。

exports.name = "蛙人"
exports.sex = "male"

注意：如果使用exports導出單個值之后，就不能在導出一個對象值，這只會修改exports的對象改變，然而修改無效，最終導出還是name，和sex，因為最終的導出是由module.exports決定的。

exports.name = "蛙人"
exports.sex = "male"
exports = {
    name: "蛙人"
}

上面example中，這種情況會改變對象的引用值則導出無效，所以最后導出的還是name，sex。

混合導出

混合導出，exports和module.exports可以同時使用，不會存在問題。

exports.name = "蛙人"
module.exports.age = 24

導入

CommonJs中使用require語法可以導入，如果想要單個的值，可以通過解構對象來獲取。

// index.js
module.exports.name = "蛙人"
module.exports.age = 24

let data = require("./index.js")
console.log(data) // { name: "蛙人", age: 24 }

重復導入

不管是CommonJs還是Es Module都不會重復導入，就是只要該文件內加載過一次這個文件了，我再次導入一次是不會生效的。

let data = require("./index.js")
let data = require("./index.js") // 不會在執行了

動態導入

CommonJs支持動態導入，什么意思呢，就是可以在語句中，使用require語法，來看如下案例。

let lists = ["./index.js", "./config.js"]
lists.forEach((url) => require(url)) // 動態導入

if (lists.length) {
    require(lists[0]) // 動態導入
}

導入值的變化

CommonJs導入的值是拷貝的，所以可以修改拷貝值，但這會引起變量污染，一不小心就重名。

// index.js
let num = 0;
module.exports = {
    num,
    add() {
       ++ num 
    }
}

let { num, add } = require("./index.js")
console.log(num) // 0
add()
console.log(num) // 0
num = 10

上面example中，可以看到exports導出的值是值的拷貝，更改完++ num值沒有發生變化，并且導入的num的值我們也可以進行修改

總結

CommonJs解決了變量污染，文件依賴等問題，上面我們也介紹了它的基本語法，它可以動態導入(代碼發生在運行時)，不可以重復導入。

Es Module 基本語法

導出

在Es Module中導出分為兩種，單個導出(export)、默認導出(export default)，單個導出在導入時不像CommonJs一樣直接把值全部導入進來了，Es Module中可以導入我想要的值。那么默認導出就是全部直接導入進來，當然Es Module中也可以導出任意類型的值。

// 導出變量
export const name = "蛙人"
export const age = 24

// 導出函數也可以
export function fn() {}
export const test = () => {}


// 如果有多個的話
const name = "蛙人"
const sex = "male"
export { name, sex }

混合導出

可以使用export和export default同時使用并且互不影響，只需要在導入時地方注意，如果文件里有混合導入，則必須先導入默認導出的，在導入單個導入的值。

export const name = "蛙人"
export const age = 24

export default {
    fn() {}，
    msg: "hello 蛙人"
}

導入

Es Module使用的是import語法進行導入。如果要單個導入則必須使用花括號{} ，注意：這里的花括號跟解構不一樣。

// index,js
export const name = "蛙人"
export const age = 24

import { name, age } from './index.js'
console.log(name, age) // "蛙人" 24

// 如果里面全是單個導出，我們就想全部直接導入則可以這樣寫
import * as all from './index.js'
console.log(all) // {name: "蛙人", age: 24}

混合導入

混合導入，則該文件內用到混合導入，import語句必須先是默認導出，后面再是單個導出，順序一定要正確否則報錯。

// index,js
export const name = "蛙人"
export const age = 24
export default {
    msg: "蛙人"
}

import msg, { name, age } from './index.js'
console.log(msg) // { msg: "蛙人" }

上面example中，如果導入的名稱不想跟原本地名稱一樣，則可以起別名。

// index,js
export const name = "蛙人"
export const age = 24
export default {
    msg: "蛙人"
}

import { default as all,  name, age } from './index.js'
console.log(all) // { msg: "蛙人" }

導入值的變化

export導出的值是值的引用，并且內部有映射關系，這是export關鍵字的作用。而且導入的值，不能進行修改也就是只讀狀態。

// index.js
export let num = 0;
export function add() {
    ++ num
}

import { num, add } from "./index.js"
console.log(num) // 0
add()
console.log(num) // 1
num = 10 // 拋出錯誤

Es Module是靜態

就是Es Module語句``import只能聲明在該文件的最頂部，不能動態加載語句，Es Module`語句運行在代碼編譯時。

if (true) {
	import xxx from 'XXX' // 報錯
}

總結

Es Module也是解決了變量污染問題，依賴順序問題，Es Module語法也是更加靈活，導出值也都是導出的引用，導出變量是可讀狀態，這加強了代碼可讀性。

CommonJs和Es Module的區別

CommonJs

• CommonJs可以動態加載語句，代碼發生在運行時

• CommonJs混合導出，還是一種語法，只不過不用聲明前面對象而已，當我導出引用對象時之前的導出就被覆蓋了

• CommonJs導出值是拷貝，可以修改導出的值，這在代碼出錯時，不好排查引起變量污染

Es Module

• Es Module是靜態的，不可以動態加載語句，只能聲明在該文件的最頂部，代碼發生在編譯時

• Es Module混合導出，單個導出，默認導出，完全互不影響

• Es Module導出是引用值之前都存在映射關系，并且值都是可讀的，不能修改

以上是“CommonJs和Es Module有哪些區別”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！