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命令是異步加載，有一個獨立的模組依賴的解析階段

【相關推薦：javascript視頻教程 、web前端】

以上是es6與commonjs有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！