詳解RequireJs如何使用

這次帶給大家的是詳解RequireJs如何使用，我們知道RequireJs非常的強大，這篇文章就給大家舉幾個案例好好分析一下。

首先載入JavaScript 檔案

RequireJS的目標是鼓勵程式碼的模組化，它使用了不同於傳統3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的腳本載入步驟。可以用它來加速、優化程式碼，但其主要目的還是為了程式碼的模組化。

RequireJS以一個相對於baseUrl的位址來載入所有的程式碼。 頁面頂層3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤含有一個特殊的屬性data-main，require.js使用它來啟動腳本載入過程，而baseUrl一般設定到與該屬性一致的目錄。

baseUrl也可透過RequireJS config手動設定。如果沒有明確指定config及data-main，則預設的baseUrl為包含RequireJS的那個HTML頁面的所屬目錄。

RequireJS預設假設所有的依賴資源都是js腳本，因此無需在module ID上再加".js"後綴，RequireJS在進行module ID到path的解析時會自動補上字尾。你可以透過paths config設定一組腳本，這些腳本有助於我們在使用腳本時碼更少的字。

有時候你會想避開"baseUrl + paths"的解析過程，而是直接指定載入某一個目錄下的腳本。此時可以這樣做：如果一個module ID符合下述規則之一，其ID解析會避免常規的"baseUrl + paths"配置，而是直接將其載入為相對於目前HTML文件的腳本：

以".js" 結束.
以"/" 開始.
包含URL 協定, 如"http:" 或 "https:".

一般來說，最好還是使用baseUrl及"paths" config去設定module ID。它會為你帶來額外的靈活性，如便於腳本的重命名、重定位等。 同時，為了避免凌亂的配置，最好不要使用多層嵌套的目錄層次來組織程式碼，而是要麼將所有的腳本都放置到baseUrl中，要麼分置為專案庫/第三方庫的一個扁平結構，如下：

www/
index.html
js/
app/
sub.js
lib/
jquery.js
canvas.js
app.js

index.html:

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

app.js:

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from the js/app directory. paths
  //config is relative to the baseUrl, and
  //never includes a ".js" extension since
  //the paths config could be for a directory.
  paths: {
    app: '../app'
  }
});
//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function  ($, canvas, sub) {
  //jQuery, canvas and the app/sub module are all
  //loaded and can be used here now.
});

注意在範例中，三方函式庫如jQuery沒有將版本號碼包含在他們的文件名中。我們建議將版本資訊放置在單獨的文件中來進行追蹤。使用諸如volo這類的工具，可以將package.json打上版本訊息，並在磁碟上保持檔案名為"jquery.js"。這有助於你保持配置的最小化，避免為每個函式庫版本設定一條path。例如，將"jquery"配置為"jquery-1.7.2"。

理想狀況下，每個載入的腳本都是透過define()來定義的一個模組；但有些"瀏覽器全域變數注入"型的傳統/遺留程式庫並沒有使用define()來定義它們的依賴關係，你必須為此使用shim config來指明它們的依賴關係。 如果你沒有指明依賴關係，載入可能報錯。這是因為基於速度的原因，RequireJS會非同步地以無序的形式載入這些函式庫。

require.js 在載入的時候會檢察data-main 屬性:

如果都能用HTML標籤而不是基於腳本操作DOM來建構HTML，是很不錯的。但沒有好的辦法在JavaScript檔案中嵌入HTML。所能做的只是在js中使用HTML字符串，但這一般很難維護，特別是多行HTML的情況下。 .

RequireJS有個text.js外掛可以幫助解決這個問題。如果一個依賴使用了text!前綴，它就會被自動載入。請參閱text.js的README檔案。

相信看了以上介紹你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

JS裡的布林值、關係運算子、邏輯運算子的詳解及實例

## jQuery的each函數詳解及實例

原生JS如何實作AJAX、JSONP

以上是詳解RequireJs如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！