RequireJS框架説明使用者非同步按需載入JavaScript代碼

本文介紹的是另一款較為精簡的 RequireJS 框架，既想使用 AMD 的特性又不想引入一個龐大的庫的開發人員，不妨試試 RequireJS。 RequireJS 可以説明使用者非同步按需的載入 JavaScript 代碼，並解決 JavaScript 模組間的依賴關係，提升了前端代碼的整體品質和性能。

前端開發在近一兩年發展的非常快，JavaScript 作為主流的開發語言得到了前所未有的熱捧。 大量的前端框架出現了，這些框架都在嘗試著解決一些前端開發中的共性問題，但是實現又不盡相同。 在這個背景下，CommonJS 社區誕生了，為了讓前端框架發展的更加成熟，CommonJS 鼓勵開發人員一起在社區裡為一些完成特定功能的框架制定規範。 AMD（Asynchronous Module Definition）就是其中的一個規範。

傳統 JavaScript 代碼的問題

讓我們來看看一般情況下 JavaScript 代碼是如何開發的：通過 <script> 標籤來載入 JavaScript 檔，用全域變數來區分不同的功能代碼，全域變數之間的依賴關係需要顯式的通過指定其載入順序來解決， 發佈應用時要通過工具來壓縮所有的 JavaScript 代碼到一個檔。 當 Web 專案變得非常龐大，前端模組非常多的時候，手動管理這些全域變數間的依賴關係就變得很困難，這種做法顯得非常的低效。

AMD 的引入

AMD 提出了一種基於模組的非同步載入 JavaScript 代碼的機制，它推薦開發人員將 JavaScript 代碼封裝進一個個模組，對全域物件的依賴變成了對其他模組的依賴，無須再聲明一大堆的全域變數。 通過延遲和按需載入來解決各個模組的依賴關係。 模組化的 JavaScript 代碼好處很明顯，各個功能元件的松耦合性可以極大的提升代碼的複用性、可維護性。 這種非阻塞式的併發式快速載入 JavaScript 代碼，使 Web 頁面上其他不依賴 JavaScript 代碼的 UI 元素，如圖片、CSS 以及其他 DOM 節點得以先載入完畢，Web 頁面載入速度更快，使用者也得到更好的體驗。

CommonJS 的 AMD 規範中只定義了一個全域的方法，如清單 1 所示。

清單 1. AMD 規範

該方法用來定義一個 JavaScript 模組，開發人員可以用這個方法來將部分功能模組封裝在這個 define 方法體內。

id 表示該模組的標識，為可選參數。

dependencies 是一個字串 Array，表示該模組依賴的其他所有模組標識，模組依賴必須在真正執行具體的 factory 方法前解決，這些依賴物件載入執行以後的傳回值，可以以預設的順序作為 factory 方法的參數。 dependencies 也是可選參數，當使用者不提供該參數時，實現 AMD 的框架應提供預設值為 [「require」，」exports」，「module」]。

factory 是一個用於執行改模組的方法，它可以使用前面 dependencies 裡聲明的其他相依模組的傳回值作為參數，若該方法有傳回值，當該模組被其他模組依賴時，傳回值就是該模組的輸出。

CommonJS 在規範中並沒有詳細規定其他的方法，一些主要的 AMD 框架如 RequireJS、curl、bdload 等都實現了 define 方法，同時各個框架都有自己的補充使得其 API 更實用。

RequireJS 簡介

RequireJS 是一個非常小巧的 JavaScript 模組載入框架，是 AMD 規範最好的實現者之一。 最新版本的 RequireJS 壓縮後只有 14K，堪稱非常輕量。 它還同時可以和其他的框架協同工作，使用 RequireJS 必將使您的前端代碼品質得以提升。

目前最新版本的 RequireJS 1.0.8 在 IE 6+、Firefox 2+、Safari 3.2+、Chrome 3+、Opera 10+ 上都工作的很好。

實戰 RequireJS

在 Web 應用中使用 RequireJS

在 RequireJS 官方主頁上下載最新的版本的 require.js，放到 Web 頁面中。 示例的 Web 專案結構圖 1 所示。

圖 1. Web 專案結構

通過在 index.html 中加入一個 <script> 標籤直接引入 require.js 即可。