ES6 Module和CommonJS模塊的區別:
CommonJS是對模塊的淺拷貝,ES6 Module是對模塊的引用,即ES6 Module只存只讀,不能改變其值,具體點就是指針指向不能變,類似const
import的接口是read-only(只讀狀態),不能修改其變量值。 即不能修改其變量的指針指向,但可以改變變量內部指針指向,可以對commonJS對重新賦值(改變指針指向),
但是對ES6 Module賦值會編譯報錯。
<script type="text/javascript">
// CommonJS是對模塊的淺拷貝
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter
};
// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3
</script>
<script type="text/javascript">
// ES6 Module是對模塊的引用
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
</script>
<script type="text/javascript">
// m1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
// m2.js
import {foo} from './m1.js';
console.log(foo); //bar
setTimeout(() => console.log(foo), 500); //baz
</script>
ES6 Module和CommonJS模塊的共同點:
CommonJS和ES6 Module都不可以對引入的對象進行賦值,即對對象內部屬性的值進行改變。
但是可以添加屬性
<script type="text/javascript">
// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError
</script>
