iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

寫出好維護又簡潔的 react 程式碼 feat: Function Programming系列 第 12

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


上一篇
day11: CSS style 規劃 - utility CSS(Tailwind)-2
下一篇
day13: 模組化好的寫法 -單一功能原則(1)
系列文
寫出好維護又簡潔的 react 程式碼 feat: Function Programming30

尚未有邦友留言

立即登入留言