當網站開發越來越大的時候，同事們會互相開發不同的模組，而 javascript 本身沒有模組化導出引入的概念，所以開發的模組就必須統一放在 window or global scope 裡讓大家互相使用。但有可能不小心就有人使用了相同的名字，所以難免會撞名，結果導致有人的模組被引入的時候被蓋掉。

Yahoo 團隊很早就發現這個問題，所以開發了一套模組化系統的 library 讓大家使用。

YUI

說明書；目前找了第三版來看

Sandbox

YUI().use('node', 'event', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Your code goes here!
});

你要跑的 code 都會在 function 裡面，YUI 稱作這個 function 為 沙盒，原因我想是因為，你在這個 function 做的任何事都不會干擾到外面，然後還可以指定要使用哪個 module 像是官方說的 Node 跟 Event (由 YUI 提供的模組) 模組會被帶到 Y 這個參數裡面

加入模組

這裡我參考了這份文件

YUI.add('my-module', function (Y) {
   // Write your module code here, and make your module available on the Y
   // object if desired.
   Y.MyModule = {
       sayHello: function () {
           console.log('Hello!');
       }
   };
});

最簡單的加上一個 module 的方法就是這樣做

那要怎樣改 TodoList 才能這樣使用呢?

1. 將 TodoItem 放進來

YUI.add('TodoItem', function (Y) {
  Y.TodoItem = TodoItem;
});

2. 將 TodoController 引用

YUI.add('TodoController', function (Y) {
  var TodoItem = Y.TodoItem; // 使用 TodoItem
  // ... 跳過
  Y.TodoController = TodoController; // export

  }, '0.0.1', {
  requires: ['TodoItem'] // 載入 TodoItem
});

3. 修改主程式

(function(){
  YUI().use('TodoController', function (Y) {
    var TodoController = Y.TodoController;

    var data = [],
      view = '<li class="{{check}}" data-i="{{i}}"><span class="todo-content">{{content}}</span><span class="close">x</span></li>';
    var controller = new TodoController({
      view,
      data,
      bindId: '#todo-list',
    });

    controller.addTodo('第一個工作');
    controller.addTodo('先完成這個', true);

    controller.registerEvent('click', function (e) {
      var temp = e.target,
        i = null;

      while (temp !== e.currentTarget && !i) {
        i = temp.getAttribute('data-i');
        temp = temp.parentElement;
      }

      if (e.target.tagName === 'LI') {
        controller.checkItem(parseInt(i));
      }

      if (e.target.className === 'close') {
        controller.deleteItem(parseInt(i));
      }
    })

    todoButton = document.querySelector('#addTodo');
    todoButton.addEventListener('click', function () {
      var inputValue = document.getElementById('todo-input').value;
      if (inputValue === '') {
        alert("請輸入待辦事項");
      } else {
        controller.addTodo(inputValue);
      }
    }, false);
  });
})()

這就是嘗試使用的結果。

有興趣可以看全部程式代碼

補充

我在 html 中引入的是 YUI 3.18 版本，找的方法是搜尋 yui cdn 然後出現這個網頁

跳過一堆不相關的套件找到 yui-min.js 然後將它引入到 html 上

引入的 code 順序
<script src='https://cdnjs.cloudflare.com/ajax/libs/yui/3.18.0/yui/yui-min.js'></script>
<script src='./TodoItem.js'></script>
<script src='./TodoController.js'></script>
<script src='./main.js'></script>