ホームページ > 記事 > ウェブフロントエンド > es6とcommonjsの違いは何ですか
違い: 1. CommonJS は値のコピーを出力し、ES6 は値への参照を出力します; 2. CommonJS は実行時にロードされ、ES6 はコンパイル時の出力インターフェイスです; 3. CommonJS の require は次のとおりです。同期的にロードされるモジュール、ES6 のインポートは非同期的にロードされ、独立したモジュールの依存関係には解決フェーズがあります。
このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。
#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); // 3lib.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) //4ES6 モジュールの使用法を見てみましょう。実行結果はキャッシュされませんが、動的に取得されます。ローカルにロードされたモジュールからの値であり、変数は常にそれが配置されているモジュールにバインドされます。 補足: 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的运行 // 3c .js が後に出力されるため、import() がリソースを非同期的に読み込むことがわかります。 Index.js であり、後続のコードの実行はブロックされません。#概要: 上記は commonjs と esmodule の違いです
1: CommonJS モジュールはコピーを出力します
2: CommonJS モジュールは実行時にロードされ、ES6 モジュールはコンパイル時の出力インターフェイスです。
3 : CommonJS モジュールの require() はモジュールを同期的にロードし、ES6 モジュールの import コマンドはモジュールの依存関係の独立した解析フェーズを使用して非同期的にロードします。
[関連する推奨事項:
javascript ビデオ チュートリアル以上がes6とcommonjsの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。