ES6的模塊引入和CommonJs區別

 

CommonJs模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化不會影響到這個值.

// common.js
var count = 1;

var printCount = () =>{ 
   return ++count;
}

module.exports = {
     printCount: printCount,
     count: count
};
 // index.js
let v = require('./common');
console.log(v.count); // 1
console.log(v.printCount()); // 2
console.log(v.count); // 1

你可以看到明明common.js里面改變了count，但是輸出的結果還是原來的。這是因為count是一個原始類型的值，會被緩存。除非寫成一個函數，才能得到內部變動的值。將common.js里面的module.exports 改寫成

module.exports = {
     printCount: printCount,
     get count(){
         return count
     }
};

這樣子的輸出結果是 1，2，2
而在ES6當中，寫法是這樣的，是利用export 和import導入的

// es6.js
export let count = 1;
export function printCount() {
     ++count;
}
// main1.js
import  { count, printCount } from './es6';
console.log(count)
console.log(printCount());
console.log(count)

ES6模塊是動態引用，並且不會緩存，模塊里面的變量綁定其所有的模塊，而是動態地去加載值，並且不能重新賦值，

ES6 輸入的模塊變量，只是一個“符號連接符”，所以這個變量是只讀的，對它進行重新賦值會報錯。如果是引用類型，變量指向的地址是只讀的，但是可以為其添加屬性或成員。

另外還想說一個export default

 let count = 1;
 function printCount() {
     ++count;
} 
export default { count, printCount}
// main3.js
import res form './main3.js'
console.log(res.count)

export與export default的區別及聯系：

1.export與export default均可用於導出常量、函數、文件、模塊等

2.你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便能夠對其進行使用 

3.在一個文件或模塊中，export、import可以有多個，export default僅有一個

4.通過export方式導出，在導入時要加{ }，export default則不需要。