RequireJS 入門指南

簡介
如今最常用的JavaScript庫之一是RequireJS。最近我參與的每個項目，都用到了RequireJS，或者是我向它們推薦了增加RequireJS。在這篇文章中，我將描述RequireJS是什麼，以及它的一些基礎情境。

非同步模組定義(AMD)

談起RequireJS，你無法繞過提及JavaScript模組是什麼，以及AMD是什麼。

JavaScript模組只是遵循SRP(Single Responsibility Principle單一職責原則)的程式碼片段，它暴露了一個公開的API。在現今JavaScript開發中，你可以在模組中封裝許多功能，而且在大多數項目中，每個模組都有其自己的檔案。這使得JavaScript開發人員日子有點難過，因為它們需要持續不斷的關注模組之間的依賴性，按照一個特定的順序載入這些模組，否則運行時將會放生錯誤。
 

當你要載入JavaScript模組時，就會使用script標籤。為了載入依賴的模組，你就要先載入被依賴的，之後再載入依賴的。使用script標籤時，你需要按照此特定順序安排它們的載入，而且指令碼的載入是同步的。可以使用async和defer關鍵字使得載入非同步，但可能因此在載入過程中丟失載入的順序。另一個選擇是將所有的指令碼捆綁打包在一起，但在捆綁的時候你仍然需要把它們按照正確的順序排序。

AMD就是這樣一種對模組的定義，使模組和它的依賴可以被非同步載入，但又按照正確的順序。

 

CommonJS, 是對通用的JavaScript模式的標準化嘗試，它包含有 AMD 定義 ，我建議你在繼續本文之前先讀一下。在ECMAScript 6這個下一版本JavaScript 規範中，有關於輸出，輸入以及模組的規範定義，這些將成為JavaScript語言的一部分，而且這不會太久。這也是關於RequireJS我們想說的東西。
 

RequireJS?
RequireJS是一個Javascript 檔案和模組架構，可以從 http://requirejs.org/下載，如果你使用Visual Studio也可以通過Nuget擷取。它支援瀏覽器和像node.js之類的伺服器環境。使用RequireJS,你可以順序讀取僅需要相關相依模組。

RequireJS所做的是，在你使用script標籤載入你所定義的依賴時，將這些依賴通過head.appendChild()函數來載入他們。當依賴載入以後，RequireJS計算出模組定義的順序，並按正確的順序進行調用。這意味著你需要做的僅僅是使用一個“根”來讀取你需要的所有功能，然後剩下的事情只需要交給RequireJS就行了。為了正確的使用這些功能，你定義的所有模組都需要使用RequireJS的API，否者它不會像期望的那樣工作。
 

RequireJS API 存在於RequireJS載入時建立的命名空間requirejs下。其主要API主要是下面三個函數:

define– 該函數使用者建立模組。每個模組擁有一個唯一的模組ID，它被用於RequireJS的運行時函數，define函數是一個全域函數，不需要使用requirejs命名空間.
require– 該函數用於讀取依賴。同樣它是一個全域函數，不需要使用requirejs命名空間.
config– 該函數用於配置RequireJS.
在後面，我們將教你如果使用這些函數，但首先讓我們先瞭解下RequireJS的載入流程。
 

data-main屬性
當你下載RequireJS之後，你要做的第一件事情就是理解RequireJS是怎麼開始工作的。當RequireJS被載入的時候，它會使用data-main屬性去搜尋一個指令檔（它應該是與使用src載入RequireJS是相同的指令碼）。data-main需要給所有的指令檔設定一個根路徑。根據這個根路徑，RequireJS將會去載入所有相關的模組。下面的指令碼是一個使用data-main例子：

1 <script src="scripts/require.js" data-main="scripts/app.js"></script>

另外一種方式定義根路勁是使用配置函數，後面我們將會看到。requireJs假設所有的依賴都是指令碼，那麼當你聲明一個指令碼依賴的時候你不需要使用.js尾碼。
 

配置函數
如果你想改變RequireJS的預設配置來使用自己的配置，你可以使用require.configh函數。config函數需要傳入一個選擇性參數對象，這個選擇性參數對象包括了許多的配置參數選項。下面是一些你可以使用的配置：

baseUrl——用於載入模組的根路徑。
paths——用於映射不存在根路徑下面的模組路徑。
shims——配置在指令碼/模組外面並沒有使用RequireJS的函數依賴並且初始化函數。假設underscore並沒有使用  RequireJS定義，但是你還是想通過RequireJS來使用它，那麼你就需要在配置中把它定義為一個shim。
deps——載入依賴關係數組
下面是使用配置的一個例子：

01 require.config({

02     //By default load any module IDs from scripts/app

03     baseUrl: 'scripts/app',

04     //except, if the module ID starts with "lib"

05      paths: {

06         lib: '../lib'

07     },

08     // load backbone as a shim

09     shim: {

10         'backbone': {

11             //The underscore script dependency should be loaded before loading backbone.js

12             deps: ['underscore'],

13             // use the global 'Backbone' as the module name.

14             exports: 'Backbone'

15         }

16     }

17 });

在這個例子中把根路徑設定為了scripts/app，由lib開始的每個模組都被配置在scripts/lib檔案夾下面，backbone 載入的是一個shim依賴。
 

Defining Modules Using RequireJS
Modules are just well-scoped objects that expose an API and encapsulate their internals. In order to define a module, RequireJS exposes thedefinefunction. There should be only one call fordefinein each JavaScript file by convention. Thedefinefunction receives an array of dependencies and a function which is going to hold all the module definitions. By convention the module definition function receives as parameters all the previous dependencies and in the order they were supplied in the array. For example, here is a simple module definition:

01 define(["logger"], function(logger) {       

02         return {

03              firstName: “John",

04              lastName: “Black“,

05              sayHello: function () {

06                 logger.log(‘hello’);

07              }

08         }

09     }

10 );

As you can see, an array is passed to thedefinefunction with a logger dependency which is later used in the module. Also, you can see that in the module definition function there is a parameter calledloggerwhich will be set to the loaded logger module. Every module should return its API which in this case is two properties (firstNameandlastName) and a function (sayHello). Later on, if you will load this module as another module dependency with a module ID, you will be able to use the exposed API.
 

使用require函數
在RequireJS中另外一個非常有用的函數是require函數。require函數用於載入模組依賴但並不會建立一個模組。例如：下面就是使用require定義了能夠使用jQuery的一個函數。

1 require(['jquery'], function ($) {

2     //jQuery was loaded and can be used now

3 });

小結
在這篇文章中我介紹了RequireJS庫,它是我建立每個Javascript項目都會用到的庫函數之一。它不僅僅用於載入模組依賴和相關的命令，RequireJS協助我們寫出模組化的JavaScript代碼，這非常有利於代碼的可擴充性和重用性。