RequireJS 是一個JavaScript模組載入器。它非常適合在瀏覽器中使用，但它也可以用在其他腳本環境，就像 Rhino and Node。使用RequireJS載入模組化腳本將提高代碼的載入速度和質量。
瀏覽器的兼容情況如下:
IE 6+ .......... 兼容 ✔
Firefox 2+ ..... 兼容 ✔
Safari 3.2+ .... 兼容 ✔
Chrome 3+ ...... 兼容 ✔
Opera 10+ ...... 兼容 ✔
最新版本: 2.3.11
基本介紹
- 中文名：requireJS
- 外文名：requireJS
獲取 REQUIREJS 1,添加 REQUIREJS,最佳化 3,
開始使用 REQUIREJS
- 獲取 RequireJS
- 添加 RequireJS
注意: 如果你使用 jQuery, 這裡是針對 jQuery 的教程
獲取 REQUIREJS 1
去下載頁面下載檔案。
添加 REQUIREJS
注意: 關於 jQuery 集成的意見, 請看jQuery 集成頁面
假定你的項目中 JavaScript 都放在一個 "scripts" 目錄。 例如, 你的項目中有一個 project.html 頁面和一些 scripts, 目錄布局如下：
- 項目目錄/
- util.js
- main.js
- helper/
- project.html
- scripts/
添加 require.js 到 scripts 目錄, 如下:
- 項目目錄/
- util.js
- main.js
- require.js
- helper/
- project.html
- scripts/
為了充分利用的最佳化工具，建議您將所有的scripts放到的HTML外面, 然後只引用 require.js 來請求載入你其它的scripts:
<!DOCTYPE html><html><head> <title>My Sample Project</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script data-main="scripts/main" src="scripts/require.js"></script></head><body> <h1>My Sample Project</h1></body></html>
在 main.js, 你可以使用 require() 來載入所有你需要運行的scripts. 這可以確保你所有的scripts都是在這裡載入的, 你可以指定 data-main script 使用異步載入.
require(["helper/util"], function(util) { //This function is called when scripts/helper/util.js is loaded. //If util.js calls define(), then this function is not fired until //util's dependencies have loaded, and the util argument will hold //the module value for "helper/util".});載入 helper/util.js 腳本. 想要充分利用 RequireJS, 請看API 文檔去了解更多相關定義和模組的使用
最佳化 3
如果你最終決定在你在代碼中使用, 可以使用最佳化結合 JavaScript 檔案來減少載入時間. 在上面的例子中, 你可以結合 main.js 和 helper/util.js 加到一個檔案中.
