RequireJS和AMD規(guī)范
RequireJS一個(gè)工具庫(kù),主要用于客戶端的模塊管理.通過(guò)define方法,將代碼定義為模塊;通過(guò)require方法,實(shí)現(xiàn)代碼的模塊加載。
一、安裝
下載minified的就好
右擊→另存為將文件保存到項(xiàng)目的資源庫(kù)中,文件名稱一般命名為require.min.js
按照tag選擇需要的版本
將下載的文件保存到項(xiàng)目的資源庫(kù)中,文件名稱一般命名為require.js
下載require.js文件
瀏覽器支持
瀏覽器支持
二、使用
1.html中
<body>
<!-- 一些內(nèi)容 -->
<!-- body末尾引入require.js模板 -->
<script type="text/javascript" data-main="scripts/login.js" src="scripts/lib/require.min.js"></script>
<!-- 模版 start -->
</body>
該script 中
data-main指定主代碼所在的腳本文件
src指定requirejs所在的腳本文件
2.js中
/** 配置RequireJS
* @config 用于RequireJS的配置
* @param {String} baseUrl 參數(shù)指定本地模塊位置的基準(zhǔn)目錄,即本地模塊的路徑是相對(duì)于哪個(gè)目錄的,該屬性通常由require.js加載時(shí)的data-main屬性指定。
* @param {Objec} paths 指定各個(gè)模塊的位置,這個(gè)位置可以是同一個(gè)服務(wù)器上的相對(duì)位置,也可以是外部網(wǎng)址,可以為每個(gè)模塊定義多個(gè)位置,如果第一個(gè)位置加載失敗,則加載第二個(gè)位置
* @param {Objec} shim 有些庫(kù)不是AMD兼容的,這時(shí)就需要指定shim屬性的值。shim可以理解成“墊片”,用來(lái)幫助require.js加載非AMD規(guī)范的庫(kù)。
*/
require.config({
baseUrl: "scripts",
paths: {
jquery: "lib/jquery.min",
cookie: "lib/jquery.cookie",
template: "lib/template.min",
pagination: "lib/pagination",
},
shim: {
base: ["jquery"],
pagination: ["jquery", "template"] //pagination依賴于jquery與template,需要引入js源文件
}
});
/** 調(diào)用模塊
* @require 用于客戶端的模塊管理,define和require這兩個(gè)定義模塊、調(diào)用模塊的方法,合稱為AMD模式
* @param {Array} Array 第一個(gè)參數(shù),是一個(gè)表示依賴關(guān)系的數(shù)組
* @param {function} function 第二個(gè)參數(shù)是一個(gè)函數(shù)
* @param {function} function 第三個(gè)參數(shù)(可選),即錯(cuò)誤處理的回調(diào)函數(shù)
*/
require(["jquery", "cookie"], function ($) {
// 往下-自定義代碼內(nèi)容
var demo = {
init: function () { }
};
demo.init();
// 往上-自定義代碼內(nèi)容
}, function (err) {
// 處理錯(cuò)誤
});



