【前端開(kāi)發(fā)教程】RequireJS安裝及使用教程

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ò)誤
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容