day12: 模组化好的写法-为什麽要模组化

在过去 Javascript还没发展 common.js 或是 ESM，在使用 Javascript 时，因为使用 <script></script> 常常会造成命名会造成 var 全域污染的问题，後来发展出 IIFE，并在执行完就消失，确保在 function 内的变数不会污染其他的变数。并把这些 IIFE 的 function 串成一个共用 function 随时取用共用 function 里的 IIFE，这是模组化的开始。

//初始 Javascript 的情境
<script>
var count = 0;
function addCount()=>{
	count++
}
addCount();
</script>
<script>
function reduceCount()=>{
	count--
}
reduceCount();
</script>

// 这边 count 会变成 window.count
// reduceCount 还是会操作到 window.count 的 value

//IIFE

void function (){
	window.caculateCount = window.caculateCount || {};
	window.caculateCount.addCount = addCount;
	window.caculateCount.reduceCount = reduceCount;

	function addCount(){
	count++;
	}

	function reduceCount(){
	count--;
	}
}();

而在 CommonJS 和 ES6 Modules 出现後，现在可以用 exports, require 或是 import export 的方式去做模组化的控管。并且在

CommonJS - 此为动态载入

// addCount.js
function addCount (count) {
  count++;
}
module.exports = addCount

// index.js
const addCount = require('./add');

let currentCount = 0;

addCount(currentCount);

ES6 Modules - 此为静态载入

// addCount.js
export function addCount (count) {
  count++;
}

//index.js
import {addCount} from './addCount.js'

let currentCount = 0;

addCount(currentCount);

https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/

https://www.zybuluo.com/JunQiu/note/1223928