iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

認真學前端開發 - 以 TodoList 為例系列 第 12

Day12 - 模組的使用 CommonJS AMD 簡介

使用模組化的好處

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 模組化七日談

上一篇
Day11 - 來試試使用 YUI 做模組!
下一篇
Day13 - Webpack [part1][簡介與 Babel]
系列文
認真學前端開發 - 以 TodoList 為例30

尚未有邦友留言

立即登入留言