ES6與CommonJS中的模塊處理的區(qū)別
ES6和CommonJS都有自己的一套處理模塊化代碼的措施，即JS文件之間的相互引用。
為了方便兩種方式的測試，使用nodejs的環(huán)境進行測試
CommonJS的模塊處理
使用require來引入其他模塊的代碼，使用module.exports來引出
// exportDemo.js
count = 1;
module.exports.count = count;
module.exports.Hello = function() {
var name;
this.setName = function(newName) {
name = newName;
}
this.sayHello = function() {
console.log("hello Mr." + name);
}
this.getId = function() {
return count++
}
}
// requireDemo.js
var {Hello} = require("./exportDemo")
var hello = new Hello();
hello.setName("Blank");
hello.sayHello();
在終端執(zhí)行 node requireDemo.js ，返回結(jié)果為'hello Mr.Blank'
導(dǎo)出的Hello函數(shù)是原函數(shù)的一次拷貝，修改Hello函數(shù)的屬性值不會對其他require的地方造成影響
var { Hello, count } = require('./exportDemo')
var hello = new Hello();
// 讓count自增
console.log(hello.getId());
console.log(hello.getId());
// 發(fā)現(xiàn)獲取的count還是原值
console.log(count)
// 真正的count其實是已經(jīng)改了的
var newHello = new Hello();
console.log(newHello.getId())
var { Hello: newHello, count: newCount } = require('./exportDemo')
console.log(newCount, 'newCount');
// 再次require，取得的newHello和之前require的Hello指向同一個拷貝
console.log(newHello === Hello)
ES6的模塊處理
nodejs中運行ES6風(fēng)格的代碼
nodejs默認是不支持ES6的模塊處理方案的。
但是在8.5.0之后，ES6代碼的文件格式定為mjs后，可使用 node --experimental-modules xxx.mjs 運行。
// exportDemo.mjs export let a = 1;
// importDemo.mjs
import {a} from './exportDemo.mjs'
console.log(a)
與CommonJS模塊處理的區(qū)別
CommonJS 模塊輸出的是一個值的拷貝（已在上一章驗證），ES6 模塊輸出的是值的引用。
// exportDemo.mjs
export let counter = 1;
export function incCounter() {
counter ++;
}
// importDemo.mjs
import { counter, incCounter } from './exportDemo.mjs'
incCounter();
console.log(counter) // 打印結(jié)果為2，而不是初始值的1
CommonJS模塊是運行時加載，ES6模塊是編譯時輸出接口
Nodejs此類的運行環(huán)境會在一個閉包中運行CommonJS模塊代碼
(function(exports, require, module, __filename, __dirname) {
// Module code actually lives in here
});
ES6 模塊不會緩存運行結(jié)果，而是動態(tài)地去被加載的模塊取值，并且變量總是綁定其所在的模塊。
// exportDemo.mjs
export let a = 1;
export const b = 2;
export let obj = {};
// importDemo.mjs
import { a, b } from './exportDemo.mjs'
console.log(a, b)
a = 1 // 報錯，TypeError: Assignment to constant variable，export出來的值是一個只讀引用
obj.x = 1 // 可以改變屬性值
在ES6模塊中我們更多地要去考慮語法的問題 export default
有時候我們會在代碼發(fā)現(xiàn) export default obj 的用法，那么這個default是用來干嘛的?
default是ES6引入的與export配套使用的關(guān)鍵字，用來給匿名對象、匿名函數(shù)設(shè)置默認的名字用的
export出來的值必須要有一個命名，否則從語法層次便會報錯
讓我們看一下以下幾個會報錯的錯誤例子
export匿名對象
export { x: 1 } // 報錯，SyntaxError:Unexpected token，這是一個編譯階段的錯誤
// 正確寫法
export default { x: 1 }
export匿名函數(shù)
export function() {} // 報錯，SyntaxError: Unexpected token (
// 正確寫法
export default function() {}
循環(huán)引用（recycling loading）
在復(fù)雜的模塊中，可能會出現(xiàn)模塊間的 互相引用 。
commonJS的循環(huán)引用運行機制
// a.js
exports.loaded = false;
var b = require('./b.js')
console.log("b in a is " + JSON.stringify(b))
exports.loaded = true;
console.log("a complete")
// b.js
exports.loaded = false;
var a = require('./a.js')
console.log("a in b is " + JSON.stringify(a))
exports.loaded = true;
console.log("b complete")
// main.js
var a = require('./a.js')
var b = require('./b.js')
console.log("a in main is" + JSON.stringify(a))
console.log("b in main is" + JSON.stringify(b))
執(zhí)行指令 nodejs main.js
時序圖下的執(zhí)行步驟分解圖如下所示：
ES6的循環(huán)引用運行機制
一個會報錯的例子
// a.mjs
import { bar } from './b.mjs'
console.log(bar);
export let foo = 'foo from a.mjs'
// b.mjs
import { foo } from './a.mjs'
console.log(foo)
export let bar = 'bar from b.mjs'
// main.mjs
import { foo } from './a.mjs'
import { bar } from './b.mjs'
node main.mjs
時序圖下的執(zhí)行步驟分解圖如下所示：
ES6的循環(huán)引用要特別注意變量是否已被聲明，若未被聲明的塊級作用域變量被其他模塊引用時，會報錯。
改進方案：循環(huán)引用中盡量去export可以提前確定的值（例如函數(shù)），其實我們總是希望去 引用模塊執(zhí)行完全后最終確定的變量 。
// a.mjs
import { bar } from './b.mjs'
console.log(bar());
export function foo() {
return 'foo from a.mjs'
}
// b.mjs
import { foo } from './a.mjs'
console.log(foo());
export function bar() {
return 'bar from b.mjs'
}
// main.mjs
import { foo } from './a.mjs'
import { bar } from './b.mjs'
node main.mjs
返回結(jié)果:
foo from a.mjs
bar from b.mjs
時序圖下的執(zhí)行步驟分解圖如下所示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了JS中圖片緩沖loading技術(shù)的實例代碼，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細介紹了js仿百度登錄頁實現(xiàn)拖動窗口效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了js判斷手機號運營商的方法，需要的朋友可以參考下2015-10-10
Javascript實現(xiàn)仿QQ隨機數(shù)驗證
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)仿QQ隨機數(shù)驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
相信大家都知道在SVG中添加文本是使用text元素。但這個元素不能夠自動換行，超出的部分就顯示不出來了，怎么辦呢？下面通過這篇文章來給大家詳細介紹下實現(xiàn)的過程。2016-10-10
JavaScript實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要給大家介紹了關(guān)于JS中向?qū)ο笾刑砑訉ο蟮?種方法,在JavaScript中對象可以通過兩種方法添加對象,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
javascript 也來玩玩圖片預(yù)加載...2007-05-05
今天就來介紹一個在其它開源庫中見到的既花里胡哨，又實用的TS類型——TS類型過濾，你會發(fā)現(xiàn)這些?TS騷操作真的很重要，因為它能很好地幫助你做靜態(tài)類型校驗2022-04-04
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)商品評價五星好評，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11