RequireJS核心之模組載入

requirejs的目標是鼓勵**的模組化，它使用了不同於傳統標籤的指令碼載入步驟。可以用它來加速、優化**，但其主要目的還是為了**的模組化。它鼓勵在使用指令碼時以module id替代url位址。

requirejs以乙個相對於baseurl的位址來載入所有的**。頁面頂層標籤含有乙個特殊的屬性data-main，require.js使用它來啟動指令碼載入過程，而baseurl一般設定到與該屬性相一致的目錄。下列示例中展示了baseurl的設定：


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

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文件的指令碼：

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

lib/

index.html:

src="js/require.js"
>
script>

requirejs.config(
});function
($,        canvas,   sub) );

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

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

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


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

你可以在data-main指向的指令碼中設定模板載入選項，然後載入第乙個應用模組。.注意：你在main.js中所設定的指令碼是非同步載入的。所以如果你在頁面中配置了其它js載入，則不能保證它們所依賴的js已經載入成功。

例如：

data-main="scripts/main"
src="scripts/require.js"
>
script>
src="scripts/other.js"
>
script>

// contents of main.js:
require.config(
});

// contents of other.js:
// this code might be called before the require.config() in main.js
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require( ['foo'], function
( foo ) );

模組不同於傳統的指令碼檔案，它良好地定義了乙個作用域來避免全域性命名空間汙染。它可以顯式地列出其依賴關係，並以函式(定義此模組的那個函式)引數的形式將這些依賴進行注入，而無需引用全域性變數。requirejs的模組是模組模式的乙個擴充套件，其好處是無需全域性地引用其他模組。

requirejs的模組語法允許它盡快地載入多個模組，雖然載入的順序不定，但依賴的順序最終是正確的。同時因為無需建立全域性變數，甚至可以做到在同乙個頁面上同時載入同一模組的不同版本。

(如果你熟悉conmmonjs，可參看commonjs的注釋資訊以了解requirejs模組到commonjs模組的對映關係)。

乙個磁碟檔案應該只定義 1 個模組。多個模組可以使用內建優化工具將其組織打包。

RequireJS核心之模組載入

模組化開發RequireJS之shim配置

Linux之核心模組

RequireJs打包簡單模組打包

RequireJS核心 之模組載入

模組化開發RequireJS之shim配置

Linux之核心模組

RequireJs打包簡單模組打包

相關推薦

RequireJS核心之模組載入