Was ist der Unterschied zwischen es6 und commonjs?

Unterschiede: 1. CommonJS gibt eine Kopie des Werts aus und ES6 gibt einen Verweis auf den Wert aus. 2. CommonJS wird zur Laufzeit geladen, und ES6 ist eine Ausgabeschnittstelle zur Kompilierungszeit. 3. CommonJS erfordert das Laden des Moduls synchron, und der Import von ES6 ist ein asynchrones Laden und verfügt über eine Auflösungsphase für unabhängige Modulabhängigkeiten.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.

Was ist der Unterschied zwischen es6 und commonjs? 1 Das CommonJS-Modul gibt eine Kopie des Werts aus, und das ES6-Modul gibt einen Verweis auf den Wert aus. Erstellen Sie zunächst eine lib.js-Datei

// lib.js
const counter = 3;
const incCounter = ()=>{
  counter++
}
module.exports = {
  counter,
  incCounter
}

2. Erstellen Sie erneut eine main.js und importieren Sie sie mit commonjs

// main.js
var lib = require('./lib');
console.log(lib)
console.log(lib.counter);  // 3
lib.incCounter();
console.log(lib.counter); // 3

Nachdem das lib.js-Modul geladen wurde, haben seine internen Änderungen keinen Einfluss auf die Ausgabe von lib.counter. Dies liegt daran, dass mod.counter ein primitiver Typwert ist und zwischengespeichert wird. Schauen wir uns die Verwendung von

esmodule

// lib.js
export let counter = 3;
export function incCounter () {
  counter++;
}

rreee

ES6-Modul an, das die laufenden Ergebnisse nicht zwischenspeichert, sondern dynamisch den Wert des geladenen Moduls erhält Variablen sind immer an das Modul gebunden, in dem sie sich befinden.

Hinzugefügt: Über esmodule importierte Variablen können nicht neu zugewiesen oder geändert werden.

2. CommonJS-Module werden zur Laufzeit geladen und ES6-Module sind Ausgabeschnittstellen zur Kompilierungszeit

// main.js
import { counter, incCounter } from './util.mjs'
console.log(counter);  //3 
incCounter()
console.log(counter)  //4

Der Kern des obigen Codes besteht darin, das fs-Modul als Ganzes zu laden (d. h. alle Methoden zum Laden von fs). , generieren Sie ein Objekt (_fs) und lesen Sie dann 3 Methoden aus diesem Objekt. Diese Art des Ladens wird als „Laufzeitladen“ bezeichnet, da dieses Objekt nur zur Laufzeit abgerufen werden kann und eine „statische Optimierung“ zur Kompilierungszeit nicht möglich ist. Daher ist commonjs eine Methode zum Laden von Modulen nur, wenn es ausgeführt wird.

// CommonJS模块
let { stat, exists, readFile } = require('fs');
 
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

Die Essenz des obigen Codes besteht darin, drei Methoden aus dem fs-Modul zu laden, andere Methoden werden nicht geladen. Diese Art des Ladens wird als „Laden zur Kompilierungszeit“ oder statisches Laden bezeichnet, d Das CommonJS-Modul dient zum synchronen Laden des Moduls. Der Importbefehl des ES6-Moduls ist ein asynchrones Laden mit einer unabhängigen Analysephase der Modulabhängigkeiten Blockieren Sie die Ausführung von nachfolgendem Code.

Asynchrones Laden: Blockiert nicht die Ausführung von nachfolgendem Code. Schauen wir uns einen Fall an und erstellen Sie das folgende Verzeichnis Der Inhalt von require blockiert die Ausführung des nachfolgenden Codes. Da c.js zuerst gedruckt wird und dann index.js, wird require() synchron geladen Das Ende von index.js blockiert nicht die Ausführung von nachfolgendem Code.

Zusammenfassung: Das Obige sind die Unterschiede zwischen commonjs und esmodule

1: Das CommonJS-Modul gibt eine Kopie des Werts aus, ES6-Modul Die Ausgabe ist ein Verweis auf der Wert2: Das CommonJS-Modul wird zur Laufzeit geladen und das ES6-Modul ist die Ausgabeschnittstelle zur Kompilierungszeit

3: Die require() des CommonJS-Moduls lädt das Modul synchron und der Importbefehl des ES6-Moduls Lädt asynchron. Es gibt eine Analysephase unabhängiger Modulabhängigkeiten

[Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen es6 und commonjs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!