es6與commonjs有哪些區別

本篇內容介紹了“es6與commonjs有哪些區別”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

區別：1、CommonJS輸出的是一個值的拷貝，ES6輸出的是值的引用；2、CommonJS是運行時加載，ES6是編譯時輸出接口；3、CommonJS的require是同步加載模塊，ES6的import是異步加載，有獨立模塊依賴的解析階段。

本教程操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6與commonjs有什么區別

一、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導入的變量是不能重新賦值修改的。

二、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 模塊的加載方式高;

三、CommonJS 模塊的require()是同步加載模塊，ES6 模塊的import命令是異步加載，有一個獨立的模塊依賴的解析階段

同步加載：所謂同步加載就是加載資源或者模塊的過程會阻塞后續代碼的執行；

異步加載：不會阻塞后續代碼的執行；

我們來看一個案例,創建如下的目錄；

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

執行命令 node index.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

可以看的出來:import()是異步加載資源的，因為c.js是在index.js的后面打印出來的，并不會阻塞后續代碼的執行；

總結：以上便是commonjs和esmodule的幾個區別

1: CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用

2: CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口

3: CommonJS 模塊的require()是同步加載模塊，ES6 模塊的import命令是異步加載，有一個獨立的模塊依賴的解析階段

“es6與commonjs有哪些區別”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！