Eine kurze Analyse dessen, was CommonJs und Es Module sind? Was ist der Unterschied?

Was sind CommonJs- und Es-Module? Was ist der Unterschied? Im folgenden Artikel erfahren Sie, was CommonJs und Es Module sind und welche Unterschiede sie haben. Ich hoffe, dass er Ihnen weiterhilft!

Warum gibt es CommonJs- und Es-Module?

Wir alle wissen, dass in den frühen Tagen das Konzept des JavaScript-Moduls durch das Tag script eingeführt wurde . >js Dateicode. Natürlich ist es nichts Falsches daran, diese grundlegenden einfachen Anforderungen zu schreiben, aber wenn unsere Projekte immer größer werden, je mehr js-Dateien wir einführen, treten die folgenden Probleme auf: 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

• Der Umfang der JS-Dateien liegt alle auf der obersten Ebene, was zu einer variablen Verschmutzung führt
• Es gibt zu viele JS-Dateien, was die Wartung erschwert
• Das Problem der Abhängigkeit von JS-Dateien, Ein wenig Nachlässigkeit in der Reihenfolge kann zu Fehlern führen, alle Codes melden Fehler

Um die oben genannten Probleme zu lösen, ist die JavaScript-Community CommonJs erschienen, CommonJs ist eine Art Modularisierung. Die Spezifikationen, einschließlich der aktuellen NodeJs, verwenden auch einen Teil der CommonJs-Syntax. Später wurde in der Es6-Version offiziell das Modul Es Module hinzugefügt. Beide lösen die oben genannten Probleme. Welche Probleme lösen sie?

• Lösen Sie das Problem der Variablenverschmutzung. Jede Datei hat einen unabhängigen Bereich, sodass keine Variablenverschmutzung auftritt.
• Lösen Sie das Problem der Codewartung. Der Code in einer Datei ist sehr klarWenn Sie das Problem der Dateiabhängigkeit lösen, können Sie klar erkennen, welche anderen Dateien von einer Datei abhängig sind

Dann lernen wir nacheinander deren Syntax und Nachteile kennenCommonJs grundlegende Syntax🎜🎜🎜🎜🎜Export🎜🎜🎜🎜CommonJs verwendet module.exports, um Variablen und Funktionen und Sie zu exportieren kann auch jeden Typwert exportieren, siehe den folgenden Fall. 🎜

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

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

🎜🎜Direkter Export🎜🎜🎜Sie können das Schlüsselwort module für den Export auch weglassen oder Exporte direkt zum Exportieren schreiben. Siehe den folgenden Fall. 🎜

// 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}

🎜Hinweis: Wenn Sie Exporte zum Exportieren eines einzelnen Werts verwenden, können Sie keinen Objektwert exportieren. Dadurch wird jedoch nur die Objektänderung geändert. Der endgültige Export ist jedoch weiterhin ungültig , da der endgültige Export durch module.exports bestimmt wird. 🎜

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

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

🎜Im obigen Beispiel ändert diese Situation den Referenzwert des Objekts und der Export wird ungültig, sodass der endgültige Export immer noch name, sex ist. Code>. 🎜🎜🎜Hybrid-Export🎜🎜🎜Hybrid-Export, <code>exports und module.exports können problemlos gleichzeitig verwendet werden. 🎜

// 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: "蛙人" }

🎜🎜🎜Import🎜🎜🎜🎜CommonJs kann mit der require-Syntax importiert werden. Wenn Sie einen einzelnen Wert wünschen, können Sie ihn durch Destrukturieren des Objekts erhalten. 🎜

// 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 // 抛出错误

🎜🎜Wiederholter Import🎜🎜🎜Egal, ob es sich um CommonJs oder Es Module handelt, es wird nicht wiederholt importiert, solange die Datei einmal geladen wurde wird es erneut importieren. 🎜

if (true) {
	import xxx from 'XXX' // 报错
}

🎜🎜Dynamischer Import🎜🎜🎜CommonJs unterstützt den dynamischen Import. Was bedeutet das? Sie können die Syntax require in einer Anweisung verwenden Fall. 🎜rrreee🎜🎜Änderungen in importierten Werten🎜🎜🎜CommonJsDie importierten Werte werden kopiert, sodass die kopierten Werte geändert werden können. Dies führt jedoch zu einer variablen Verschmutzung Der Name wird versehentlich wiederholt. 🎜rrreee🎜Im obigen Beispiel können Sie sehen, dass der von exports exportierte Wert eine Kopie des Werts von ++ num ist Ändern, und die importierte num Wir können auch den Wert von ändern Oben wurde auch die grundlegende Syntax eingeführt. Sie kann dynamisch importiert werden (Code erfolgt zur Laufzeit) und kann nicht wiederholt importiert werden. 🎜

🎜Grundsyntax des Es-Moduls🎜🎜🎜🎜🎜Export🎜🎜🎜🎜Der Export im Es-Modul ist in zwei Typen unterteilt: Einzelexport (export), Standardexport (export default), ein einzelner Export importiert nicht alle Werte direkt wie CommonJs beim Importieren, Es Das Modul kann den gewünschten Wert importieren. Dann besteht der Standardexport darin, alles direkt zu importieren. Natürlich kann auch jede Art von Wert aus Es Module exportiert werden. 🎜rrreee🎜🎜Gemischter Export🎜🎜🎜Sie können export und export default gleichzeitig verwenden, ohne dass sie sich gegenseitig beeinflussen. Sie müssen nur beim Import darauf achten, ob dies der Fall ist Handelt es sich um einen gemischten Import in der Datei, müssen Sie zuerst den Standardexport und dann den einzelnen importierten Wert importieren. 🎜rrreee🎜🎜🎜Importieren🎜🎜🎜

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导出是引用值之前都存在映射关系，并且值都是可读的，不能修改

感谢

谢谢各位在百忙之中点开这篇文章，希望对你们能有所帮助，如有问题欢迎各位大佬指正。

我是蛙人，如果觉得写得可以的话，请点个赞吧。

原文地址：https://juejin.cn/post/6938581764432461854

作者：蛙人

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonEine kurze Analyse dessen, was CommonJs und Es Module sind? Was ist der Unterschied?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!