Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist der Unterschied zwischen CommonJS- und ES6-Modularität?
Unterschiede: 1. CommonJS-Module werden zur Laufzeit geladen, während ES6-Module zur Kompilierungszeit Ausgabeschnittstellen sind. 2. require() des CommonJS-Moduls lädt Module synchron, während der Importbefehl des ES6-Moduls asynchron lädt. 3. CommonJS ist eine flache Kopie von Modulen , ES6 ist die Einführung von Modulen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
CommonJS
Für grundlegende Datentypen handelt es sich um eine Kopie. Das heißt, es wird vom Modul zwischengespeichert. Gleichzeitig können die von diesem Modul ausgegebenen Variablen in einem anderen Modul neu zugewiesen werden.
Bei komplexen Datentypen handelt es sich um eine flache Kopie. Da die von den beiden Modulen referenzierten Objekte auf denselben Speicherplatz verweisen, wirken sich Änderungen am Wert des Moduls auf das andere Modul aus.
Wenn ein Modul mit dem Befehl require geladen wird, wird der Code des gesamten Moduls ausgeführt.
Wenn der Befehl require zum Laden desselben Moduls verwendet wird, wird das Modul nicht erneut ausgeführt, sondern der Wert im Cache wird abgerufen. Mit anderen Worten: Unabhängig davon, wie oft das CommonJS-Modul geladen wird, wird es beim ersten Laden nur einmal ausgeführt. Wenn es später geladen wird, wird das Ergebnis des ersten Laufs zurückgegeben, es sei denn, der Systemcache ist vorhanden manuell gelöscht.
Beim Laden in einer Schleife wird es beim Laden ausgeführt. Das heißt, wenn der Skriptcode erforderlich ist, wird er vollständig ausgeführt. Sobald ein Modul „in einer Schleife geladen“ ist, wird nur der ausgeführte Teil ausgegeben und der nicht ausgeführte Teil wird nicht ausgegeben.
ES6-Modul
Die Werte im ES6-Modul gehören zu [dynamische schreibgeschützte Referenz].
Für schreibgeschützt, das heißt, der Wert der importierten Variablen darf nicht geändert werden. Die importierte Variable ist schreibgeschützt, unabhängig davon, ob es sich um einen Basisdatentyp oder einen komplexen Datentyp handelt. Wenn ein Modul auf einen Importbefehl trifft, wird eine schreibgeschützte Referenz generiert. Wenn das Skript tatsächlich ausgeführt wird, wird der Wert basierend auf dieser schreibgeschützten Referenz aus dem geladenen Modul abgerufen.
Wenn sich bei Dynamiken der ursprüngliche Wert ändert, ändert sich auch der durch den Import geladene Wert. Ob es sich um einen Basisdatentyp oder einen komplexen Datentyp handelt.
Beim Laden in einer Schleife werden ES6-Module dynamisch referenziert. Solange zwischen den beiden Modulen eine Referenz besteht, kann der Code ausgeführt werden.
Der Unterschied zwischen ES6-Modulen und CommonJS-Modulen
1 CommonJS-Module werden zur Laufzeit geladen, während ES6-Module zur Kompilierungszeit Ausgabeschnittstellen sind.
2. Der Befehl require() des CommonJS-Moduls lädt das Modul synchron, während der Importbefehl des ES6-Moduls asynchron lädt, mit einer unabhängigen Auflösungsphase für Modulabhängigkeiten.
3. CommonJS ist eine flache Kopie des Moduls, und das ES6-Modul ist nur schreibgeschützt und kann seinen Wert nicht ändern , ähnlich wie const.
4. Die Importschnittstelle ist schreibgeschützt (Nur-Lese-Status) und ihr Variablenwert kann nicht geändert werden. Das heißt, der Zeiger, der auf seine Variable zeigt, kann nicht geändert werden, der interne Zeiger, der auf die Variable zeigt, kann jedoch geändert werden. Sie können ein commonJS-Paar neu zuweisen (die Zeigerrichtung ändern), aber die Zuweisung eines Werts zu einem ES6-Modul führt zu einem Kompilierungsfehler.
Was ES6-Module und CommonJS-Module gemeinsam haben:
1. Sowohl CommonJS- als auch ES6-Module können importierten Objekten Werte zuweisen, also die Werte der internen Eigenschaften der Objekte ändern.
【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen CommonJS- und ES6-Modularität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!