Quelle est la différence entre es6 et commonjs

Différences : 1. CommonJS génère une copie de la valeur et ES6 génère une référence à la valeur ; 2. CommonJS est chargé au moment de l'exécution et ES6 est une interface de sortie au moment de la compilation 3. L'exigence de CommonJS est de charger le module ; de manière synchrone, et l'importation d'ES6 est un chargement asynchrone et comporte une phase de résolution pour les dépendances de modules indépendantes.

L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.

Quelle est la différence entre es6 et commonjs

1 Le module CommonJS génère une copie de la valeur et le module ES6 génère une référence à la valeur

Utilisation de Commonjs, jetons un coup d'œil ensemble

1. Créez d'abord un fichier lib.js

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

2. Créez à nouveau un main.js et importez-le à l'aide de commonjs

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

Une fois le module lib.js chargé, ses modifications internes n'affecteront pas la sortie lib.counter. En effet, mod.counter est une valeur de type primitif et sera mis en cache ; jetons un coup d'œil à l'utilisation du module

esmodule

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

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

ES6 ne met pas en cache les résultats en cours d'exécution, mais obtient dynamiquement la valeur du module chargé, et les variables sont toujours liées au module dans lequel elles se trouvent.

Ajout : les variables importées via esmodule ne peuvent pas être réaffectées ou modifiées.

2. Les modules CommonJS sont chargés au moment de l'exécution et les modules ES6 sont des interfaces de sortie au moment de la compilation

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

L'essence du code ci-dessus est de charger le module fs dans son ensemble (c'est-à-dire toutes les méthodes de chargement de fs) , générez un objet (_fs), puis lisez 3 méthodes à partir de cet objet. Ce type de chargement est appelé « chargement à l'exécution », car cet objet ne peut être obtenu qu'au moment de l'exécution, ce qui rend impossible toute « optimisation statique » au moment de la compilation. Par conséquent, commonjs est une méthode de chargement de modules uniquement lorsqu'il est exécuté.

import { stat, exists, readFile } from 'fs';

L'essence du code ci-dessus est de charger 3 méthodes à partir du module fs, et les autres méthodes ne sont pas chargées. Ce type de chargement est appelé « chargement au moment de la compilation » ou chargement statique, c'est-à-dire qu'ES6 peut terminer le chargement du module au moment de la compilation, ce qui est plus efficace que la méthode de chargement des modules CommonJS

3. le module CommonJS consiste à charger le module de manière synchrone, la commande d'importation du module ES6 est un chargement asynchrone, avec une phase d'analyse des dépendances de module indépendante

Chargement synchrone : le chargement dit synchrone signifie que le processus de chargement de ressources ou de modules sera bloquer l'exécution du code suivant ;

Chargement asynchrone : ne bloquera pas l'exécution du code suivant ;

Regardons un cas et créons le répertoire suivant :

| -- a.js
| -- index.js
| -- c.js

// a.js
console.log('a.js文件的执行');
const importFun = () => {
  console.log(require('./c').c);
}
importFun()
module.exports = {
  importFun
}

// index.js
const A = require('./a');
console.log('index.js的执行');

// c.js
console.log('c.js的运行');
const c = 3
module.exports = {
  c
}

Exécutons le nœud de commande index.js

// a.js文件的执行
// c.js的运行
// 3
// index.js的执行

Nous trouverons que le contenu de require bloquera l’exécution du code suivant. Parce que c.js est imprimé en premier, puis index.js est imprimé, donc require() est chargé de manière synchrone

// a.js
console.log('a.js文件的执行');
export const importFun = () => {
  import('./c.js').then(({c})=>{
    console.log(c)
  })
}
importFun()

// index.js
import {importFun} from './a.js'
console.log('index.js的执行');

// c.js
console.log('c.js的运行');
export const c = 3

// 结果
// a.js文件的执行
// index.js的执行
// c.js的运行
// 3

Vous pouvez voir que : import() charge les ressources de manière asynchrone, car c.js est dans Ce qui est imprimé au niveau du fichier ; la fin de index.js ne bloquera pas l'exécution du code suivant ;

Résumé : ce qui précède sont les différences entre commonjs et esmodule

1 : le module CommonJS génère une copie de la valeur, module ES6 La sortie est une référence à la valeur

2 : Le module CommonJS est chargé au moment de l'exécution, et le module ES6 est l'interface de sortie au moment de la compilation

3 : Le require() du module CommonJS charge le module de manière synchrone, et la commande d'importation du module ES6 se charge de manière asynchrone. Il y a une phase d'analyse des dépendances de modules indépendantes

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!