使用模組化的好處

Good authors divide their books into chapters and sections; good programmers divide their programs into modules.
好的老師帶你上天堂，好的碼農會切模組

1. Maintainability：提升代碼的維護性
2. Namespacing：使用命名空間，避免碰撞或污染
3. Reusability：增加可重複使用性，避免重複造輪子

CommonJS

主要用在在 server 端也就是 Node.js 裡面，目前 Node.js 的是使用 CommonJS 的規範標準
今天就跳過 TodoList 稍微看一下 javascript 的模組吧！

定義 Module

使用 module.export = ...

像是

function TodoItem(content, check) {
  this.content = content;
  this.check = Boolean(check);
  this.time = new Date();
};

TodoItem.prototype.getTime = function () {
  return this.time.toDateString();
};

TodoItem.prototype.toggle = function () {
  return this.check = !this.check;
};
module.export = TodoItem

使用 Module

使用 require keyword

  var TodoItem = require('TodoItem');

在伺服器上這些模組都是同步加載的！但在瀏覽器中有網路延遲的關係，如果每個引用都要等資料從伺服器中下載完，使用者應該會等得不耐煩了

因為這一套不適用於瀏覽器上的模組，另一套規範就被發明出來了

AMD 非同步模組化

AMD 全名 - Asynchronous Module Definition

假設使用 CommonJS 的語法，而 require 是非同步的，

  var TodoItem = require('TodoItem');

  // TodoItem undefined
  var important = new TodoItem('重要事項');

這段 code 會有問題，因為執行到第三行的時候 TodoItem 不會被賦值

AMD 規範的語法像是這樣

AMD

規範說會先將依賴引入之後才會執行傳入的 callback function

實作 AMD 的是 requireJS 所以我們可以參考 requireJS 是怎麼使用在前端的

RequireJS

官方使用 jQuery 的文件

Step 1:

設定 Config

requirejs.config({
  baseUrl: 'js/lib',
  paths: {
      jquery: 'jquery-1.9.0'
  }
});

Step 2:
使用模組

  define(['lib/jquery'], function ($) {...});

UMD

全名是 Universal Modules Definition

主要是前端和後端共用模組的解決方案，讓 javascript 模組可以在聯覽器端跑也可以在 Node.js 上跑

可參考：UMD 原理

參考

1. JavaScript Modules: A Beginner’s Guide
2. JS 模組化七日談