英文原文：https://www.codeproject.com/articles/625262/getting-started-with-the-requirejs-library

中文翻譯：http://www.oschina.net/translate/getting-started-with-the-requirejs-library

簡介

如今最常用的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例子：
<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——載入依賴關係陣列

用RequireJS定義模組

模組是進行了內部實現封裝、暴露介面和合理限制範圍的物件。ReuqireJS提供了define函式用於定義模組。按章慣例每個Javascript檔案只應該定義一個模組。define函式接受一個依賴陣列和一個包含模組定義的函式。通常模組定義函式會把前面的陣列中的依賴模組按順序做為引數接收。例如，下面是一個簡單的模組定義:

define([“logger”], function(logger) { return { firstName: “John”, lastName: “Black“, sayHello: function () { logger.log(‘hello’); } } });

我們看，一個包含了logger的模組依賴陣列被傳給了define函式,該模組後面會被呼叫。同樣我們看所定義的模組中有一個名為logger的引數，它會被設定為logger模組。每一個模組都應該返回它的API.這個示例中我們有兩個屬性(firstName和lastName)和一個函式(sayHello)。然後，只要你後面定義的模組通過ID來引用這個模組，你就可以使用其暴露的API。

使用require函式

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

require([`jquery`], function ($) { //jQuery was loaded and can be used now});

小結

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