ES6 Module和CommonJS模塊的區別:
CommonJS是對模塊的淺拷貝,ES6 Module是對模塊的引用,即ES6 Module只存只讀,不能改變其值,具體點就是指針指向不能變,相似const
import的接口是read-only(只讀狀態),不能修改其變量值。 即不能修改其變量的指針指向,但能夠改變變量內部指針指向,能夠對commonJS對從新賦值(改變指針指向),
可是對ES6 Module賦值會編譯報錯。javascript
<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都不能夠對引入的對象進行賦值,即對對象內部屬性的值進行改變。
可是能夠添加屬性java
<script type="text/javascript"> // lib.js export let obj = {}; // main.js import { obj } from './lib'; obj.prop = 123; // OK obj = {}; // TypeError </script>