commonJS 和 ES Module 区别

73 阅读1分钟

主要区别

image.png commonJS

导入值的验证


// mod.js
let count = 1;
let friends = ['刘星'];

function plusCount() {
    count++
};

function plusYuanhua() {
    friends.push('袁华');
}

setInterval(() => {
    console.log('mod.js 每秒打印 - count', count);
    console.log('mod.js 每秒打印 - friends', friends);
}, 1000);

module.exports = {
    count,
    friends,
    plusCount,
    plusYuanhua,
}


// index.js
const mod = require('./mod.js');

console.log('index.js 初次导入 - mod.count', mod.count);
console.log('index.js 初次导入 - mod.friends', mod.friends);

mod.plusCount();
mod.plusYuanhua();

console.log('index.js 执行 mod.plusCount/plusYuanhua 后 - mod.count', mod.count);
console.log('index.js 执行 mod.plusCount/plusYuanhua 后 - mod.friends', mod.friends);

setTimeout(() => {
    mod.count = 3;
    console.log('index.js 延时2s - mod.count', mod.count);
    console.log('index.js 延时2s - mod.friends', mod.friends);
}, 2000)

/*
index.js 初次导入 - mod.count 1
index.js 初次导入 - mod.friends [ '' ]

index.js 执行 mod.plusCount/plusYuanhua 后 - mod.count 1  // 修改的为拷贝的值
index.js 执行 mod.plusCount/plusYuanhua 后 - mod.friends [ '刘星', '夏雨' ] // 直接修改引用的值

mod.js 每秒打印 - count 2
mod.js 每秒打印 - friends [ '刘星', '夏雨' ]

mod.js 每秒打印 - count 2
mod.js 每秒打印 - friends [ '刘星', '夏雨' ]

index.js 延时2s - mod.count 3
index.js 延时2s - mod.friends [ '刘星', '夏雨' ]

mod.js 每秒打印 - count 2
mod.js 每秒打印 - friends [ '刘星', '夏雨' ]
*/

ES Module


// index.mjs
import { counter } from './mod.mjs'
counter = {}; // TypeError: Assignment to constant variable.
console.log('a.js-1', counter)

// mod.mjs
export let counter = {
    count: 1
}
setInterval(() => {
    console.log('modB.js-1', counter.count)
}, 1000)

可见import 为只读引入