es6とcommonjsの違いは何ですか

違い: 1. CommonJS は値のコピーを出力し、ES6 は値への参照を出力します; 2. CommonJS は実行時にロードされ、ES6 はコンパイル時の出力インターフェイスです; 3. CommonJS の require は次のとおりです。同期的にロードされるモジュール、ES6 のインポートは非​​同期的にロードされ、独立したモジュールの依存関係には解決フェーズがあります。

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 と commonjs の違いは何ですか

#1. CommonJS モジュールは値のコピーを出力しますが、ES6 モジュールは値への参照を出力します

commonjs の使い方を見てみましょう

1. まず lib.js ファイルを作成します

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

2. main.js を再度作成し、commonjs を使用してインポートします

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

lib.js モジュールがロードされた後は、その内部変更は出力 lib.counter に影響しません。これは、mod.counter がプリミティブ型の値であり、キャッシュされるためです。

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 モジュールの使用法を見てみましょう。実行結果はキャッシュされませんが、動的に取得されます。ローカルにロードされたモジュールからの値であり、変数は常にそれが配置されているモジュールにバインドされます。

補足: esmodule を通じてインポートされた変数は、再割り当てまたは変更できません。

2. CommonJS モジュールは実行時にロードされ、ES6 モジュールはコンパイル時の出力インターフェイスになります

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

上記のコードの本質は、 fs モジュール全体 (つまり、すべての fs メソッドをロード) を実行し、オブジェクト (_fs) を生成して、このオブジェクトから 3 つのメソッドを読み取ります。この種の読み込みは「実行時読み込み」と呼ばれます。これは、このオブジェクトは実行時にのみ取得できるため、コンパイル時に「静的最適化」を行うことができないためです。したがって、commonjs は実行時にのみモジュールをロードする方法です。

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

上記のコードの本質は、fs モジュールから 3 つのメソッドをロードすることであり、他のメソッドはロードされません。この種の読み込みは「コンパイル時読み込み」または静的読み込みと呼ばれます。つまり、ES6 はコンパイル時にモジュールの読み込みを完了できます。これは、CommonJS モジュールの読み込み方法よりも効率的です;

3 . CommonJS モジュール require () は同期読み込みモジュールです。ES6 モジュールのインポート コマンドは非同期読み込みです。モジュールの依存関係には独立した解決フェーズがあります。

同期読み込み: いわゆる同期読み込みとは、リソースまたはモジュールの読み込みプロセスが後続のコードの実行をブロックすることを意味します。

非同期読み込み: 後続のコードの実行はブロックされません。

ケースを見て、次のディレクトリを作成してみましょう。 ;

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

コマンド ノード インデックスを実行します。js

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

require の内容が後続のコードの実行をブロックすることがわかります。 c.js が最初に出力され、次に Index.js が出力されるため、require() は同期的に読み込まれます。

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

c .js が後に出力されるため、import() がリソースを非同期的に読み込むことがわかります。 Index.js であり、後続のコードの実行はブロックされません。

#概要: 上記は commonjs と esmodule の違いです

1: CommonJS モジュールはコピーを出力します

2: CommonJS モジュールは実行時にロードされ、ES6 モジュールはコンパイル時の出力インターフェイスです。

3 : CommonJS モジュールの require() はモジュールを同期的にロードし、ES6 モジュールの import コマンドはモジュールの依存関係の独立した解析フェーズを使用して非同期的にロードします。

[関連する推奨事項:

javascript ビデオ チュートリアル

、ウェブフロントエンド]

以上がes6とcommonjsの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。