前端模組化

昨天把 TodoList 做得像是使用 MVC 的 Pattern 來做到 關注點分離，但 code 還是在同一個地方，而且很亂，有沒有辦法讓 MVC 可以做到每個檔案是分開的，然後主程式可以呼叫他們，今天來試試這樣做吧！

嘗試一

把檔案拉出去之後用 <script> 引入

  <script src='./TodoItem.js'></script>
  <script src='./TodoController.js'></script>
  <script src='./main.js'></script>

會發現用 IIFE 把 function 都包起來的話，main就無法運作了
打開 console 會看到以下 Exception

main.js:5 Uncaught ReferenceError: TodoController is not defined

因為 IIFE 的特性我們的 contructor 不會在 main.js 裡面，也不會在 global scope 裡
那如果想要 main.js 有讀到這個該怎麼做

最簡單直覺的方式就是把 main.js 要用到的資源放到 global scope 裡囉！

方法 1.

// (function(){
  TodoController....
// })()

不用懷疑就是拿掉 IIFE...(不要翻桌 XD)

方法 2.

// (function(){
  ...
  window.TodoController = TodoController;
// })()

我在前公司有看到這個做法，應該是滿普遍的，這招夠狠，但能解決問題！

撞名

今天同事 B 也很開心的完成了一個功能，然後也跟你一樣做了一個模組但是名字叫做 TodoItem 跟我們做的那個名字一樣，也是放在 window 上，結果合起來又爆炸了 :'(

那是不是該用個方法不讓它們撞名了!

聰明的你是不是想到了這招

1. 在 window 上用一個類似命名空間的物件

window.misterB = {}
window.misterA = {}

2. 雙方講好 namespace 就可以確保不撞明了

而這就是最早做 javascript 的方法，現在網頁隨隨便便就一堆 modules 要用，這樣做其實也很難管理使用到的 modules

整理一下到目前

1. javascript 沒有辦法很簡單的做模組化，模組都是靠 global scope or window 傳來傳去
2. modules 的增加和使用，必須要自幹 namespace 的問題

這些問題自己解決好像又重新開發了一個語言的感覺，而且有好多的 case 要去解

前端開發目前有好幾套模組 library ，而 ECMA (js 的官方組織) 要把模組系統給標準化了

明天就先從 Yahoo 發明的模組功能看吧！