Apakah perbezaan antara es6 dan commonjs

Perbezaan: 1. CommonJS mengeluarkan salinan nilai, dan ES6 mengeluarkan rujukan kepada nilai 2. CommonJS dimuatkan pada masa jalan dan ES6 ialah antara muka keluaran masa kompilasi; dimuatkan serentak Modul, import ES6 dimuatkan secara tak segerak, dan terdapat fasa resolusi untuk kebergantungan modul bebas.

Persekitaran pengendalian tutorial ini: sistem Windows 10, ECMAScript versi 6.0, komputer Dell G3.

Apakah perbezaan antara es6 dan commonjs

1 Modul CommonJS mengeluarkan salinan nilai, manakala modul ES6 mengeluarkan rujukan kepada nilai

Mari kita lihat penggunaan commonjs

1 Mula-mula buat fail lib.js

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

2. Buat main.js sekali lagi dan importnya menggunakan commonjs

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

Selepas modul lib.js dimuatkan, perubahan dalamannya tidak akan menjejaskan output lib.counter. Ini kerana mod.counter ialah nilai jenis primitif dan akan dicache; mari kita lihat penggunaan

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

modul ES6 tidak akan dijalankan dalam cache. Akibatnya, nilai modul yang dimuatkan diperoleh secara dinamik, dan pembolehubah sentiasa terikat pada modul di mana ia berada.

Tambahan: Pembolehubah yang diimport melalui esmodule tidak boleh ditugaskan semula atau diubah suai.

2. Modul CommonJS dimuatkan pada masa jalan dan modul ES6 ialah antara muka keluaran pada masa penyusunan

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

Intipati kod di atas adalah untuk memuatkan fs modul secara keseluruhan (iaitu, muatkan fs semua kaedah), hasilkan objek (_fs), dan kemudian baca 3 kaedah daripada objek ini. Pemuatan jenis ini dipanggil "pemuatan masa jalan", kerana objek ini hanya boleh diperoleh pada masa jalan, menjadikannya mustahil untuk melakukan "pengoptimuman statik" pada masa penyusunan. Oleh itu, commonjs ialah kaedah memuatkan modul hanya apabila ia dijalankan.

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

Intipati kod di atas adalah untuk memuatkan 3 kaedah daripada modul fs, dan kaedah lain tidak dimuatkan. Pemuatan jenis ini dipanggil "pemuatan masa kompilasi" atau pemuatan statik, iaitu, ES6 boleh melengkapkan pemuatan modul pada masa penyusunan, yang lebih cekap daripada kaedah pemuatan modul CommonJS

3 . Modul CommonJS memerlukan () ialah modul pemuatan segerak Arahan import modul ES6 ialah pemuatan tak segerak. bermakna bahawa proses memuatkan sumber atau modul akan menyekat pelaksanaan Kod berikutnya;

Laksanakan nod arahan index.js

Kami akan mendapati bahawa kandungan require akan menyekat pelaksanaan kod berikutnya. Kerana c.js dicetak dahulu, dan kemudian index.js dicetak, require() dimuatkan secara serentak; tidak segerak, kerana c.js dicetak selepas index.js dan tidak menyekat pelaksanaan kod berikutnya; 1: Modul CommonJS mengeluarkan salinan nilai, dan modul ES6 mengeluarkan rujukan kepada nilai

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

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

2: Modul CommonJS dimuatkan pada masa jalan, dan modul ES6 Ia adalah antara muka output masa kompilasi

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

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

3: Keperluan() modul CommonJS memuatkan modul secara serentak, dan perintah import modul ES6 dimuatkan secara tak segerak. Terdapat fasa resolusi bebas bagi kebergantungan modul

[Disyorkan Berkaitan. :

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

tutorial video javascript

,

bahagian hadapan web

// 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的执行');

Atas ialah kandungan terperinci Apakah perbezaan antara es6 dan commonjs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!