詳解RequireJs如何使用-js教程-PHP中文網

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

首先載入 JavaScript 檔案

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

RequireJS以一個相對於baseUrl的位址來載入所有的程式碼。 頁面頂層 標籤含有一個特殊的屬性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:

登入後複製 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中文網其它相關文章！