JavaScript模塊加載器--?RequireJS的示例分析

發(fā)布時(shí)間：2021-02-19 11:12:29 來(lái)源：億速云閱讀：134 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹JavaScript模塊加載器--RequireJS的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

RequireJS是一個(gè)JavaScript模塊加載器。它非常適合在瀏覽器中使用，但它也可以用在其他腳本環(huán)境，就像 Rhino and Node。使用RequireJS加載模塊化腳本將提高代碼的加載速度和質(zhì)量。

首先我們先來(lái)看一下一個(gè)普通的頁(yè)面js加載

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/index02.js" ></script>
    </head>
    <body>
        <h2>this is a page.</h2>
    </body>
</html>

運(yùn)行結(jié)果：

JavaScript模塊加載器--?RequireJS的示例分析

此時(shí)，如果我們不對(duì)彈出框做操作，頁(yè)面就不會(huì)接著加載，就不會(huì)有頁(yè)面內(nèi)容，這并不是我們想要實(shí)現(xiàn)的結(jié)果。

下面我們用require.js進(jìn)行操作：

index.htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/require2.1.11.js"></script>
        <script type="text/javascript">
            require(["js/index","js/index01"],function(){
                console.log("當(dāng)js加載成功后會(huì)執(zhí)行的函數(shù)");
            },function(){
                console.log("當(dāng)js加載失敗后會(huì)執(zhí)行的函數(shù)");
            });
        </script>
    </head>
    <body>
    </body>
</html>

index.js

define(function(){
    console.log("this is a test!");
    function test(){
        console.log("haha,i am a test!");
    }
    test();
});

首先頁(yè)面上不再導(dǎo)入test02.js，只是導(dǎo)入了requireJS，其次在javascript中我們使用require()方法，在其中傳遞了一個(gè)數(shù)組的參數(shù)，實(shí)參為我們要導(dǎo)入的js文件的【路徑+文件名稱。

此時(shí)的運(yùn)行結(jié)果：

JavaScript模塊加載器--?RequireJS的示例分析

可以看出，此時(shí)頁(yè)面內(nèi)容已經(jīng)顯現(xiàn)出來(lái)了。并不像前面我們傳統(tǒng)的一樣在等待js運(yùn)行完成后頁(yè)面再加載，而是頁(yè)面加載完成后才運(yùn)行js代碼，這樣在運(yùn)行效率上就大大的提高了。

根據(jù)上面的代碼，我們可以來(lái)分析requirejs的基本API:

requireJS會(huì)定義三個(gè)變量：define，require，requirejs

require==requirejs,一般使用require更簡(jiǎn)短。
define 用來(lái)定義一個(gè)模塊
require 加載依賴模塊（引用定義好的模塊），并執(zhí)行加載完后的回調(diào)函數(shù)

require有三個(gè)參數(shù)：

require(["js/index","js/index01"],function(){
                console.log("當(dāng)js加載成功后會(huì)執(zhí)行的函數(shù)");
            },function(){
                console.log("當(dāng)js加載失敗后會(huì)執(zhí)行的函數(shù)");
            });

第一個(gè)參數(shù)：定義require中的依賴，參數(shù)必須是數(shù)組形式，即使只有一個(gè)依賴，也必須使用數(shù)組形式傳參。

第二個(gè)參數(shù)：是一個(gè)回調(diào)函數(shù)，用來(lái)處理加載完畢后的邏輯，當(dāng)所有模塊加載完成后觸發(fā)

第三個(gè)參數(shù)：也是一個(gè)回調(diào)函數(shù)，用來(lái)處理模塊加載失敗后的情況。如上面代碼，js中沒(méi)有定義index01.js這個(gè)文件，所以出調(diào)用這個(gè)回調(diào)函數(shù)。

加載網(wǎng)絡(luò)文件

之前我們加載的都是本地的js文件，但是，有些時(shí)候我們又需要加載網(wǎng)絡(luò)上的文件，那又該怎么加載呢？下面我們就來(lái)介紹一下怎樣加載網(wǎng)絡(luò)上的js文件.

我們現(xiàn)在以加載一個(gè)jquery.js文件為例：

//百度cdn公共庫(kù)jQuery地址：      http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址：           https://code.jquery.com/jquery-3.1.1.js
//注意：網(wǎng)絡(luò)上去取時(shí)不能加后綴，否則取不到
require.config({
    paths : {
        //為網(wǎng)絡(luò)上的庫(kù)去一個(gè)名字：jquery
        "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("頁(yè)面加載成功~~");
},function(){
    alert("頁(yè)面加載失敗~~")
});

在取網(wǎng)絡(luò)上的文件時(shí)注意：

1、config方法的參數(shù)是一個(gè)對(duì)象

2、paths的值也是一個(gè)對(duì)象

3、當(dāng)我們?yōu)榫W(wǎng)絡(luò)上的庫(kù)取名字是任意，但是建議取有意義的名字，別人可以通過(guò)名稱知道你的網(wǎng)絡(luò)資源是什么資源

4、庫(kù)的值是一個(gè)數(shù)組，意味著可以多個(gè)同時(shí)寫(xiě)，防止網(wǎng)絡(luò)異常取不到

5、特別注意：網(wǎng)絡(luò)資源路徑不能帶后綴名，否則取不到

6、我們也可以先讓去網(wǎng)絡(luò)中去取，如果取不到，再在本地取，減輕本地服務(wù)的壓力（屬于項(xiàng)目?jī)?yōu)化）。

require.config({
    paths : {
        //這樣配置，減輕本地服務(wù)器的壓力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("頁(yè)面加載成功~~");
},function(){
    alert("頁(yè)面加載失敗~~")
});

同樣我們也可以將本地的配置到paths中：

require.config({
    paths : {
        //這樣配置，減輕本地服務(wù)器的壓力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
        //將本地的js文件同樣配置，之后引用
        "test01" : ["js/test01"],
        "test02" : ["js/test02"]
    }
});

//
require(["jquery","test01","test02"],function(){
    alert("頁(yè)面加載成功~~");
},function(){
    alert("頁(yè)面加載失敗~~")
});

上面的例子中重復(fù)出現(xiàn)了require.config配置，如果每個(gè)頁(yè)面中都加入配置，必然顯得十分不雅，requirejs提供了一種叫”主數(shù)據(jù)”的功能，我們首先創(chuàng)建一個(gè)main.js：

require.config({
    paths : {
        //這樣配置，減輕本地服務(wù)器的壓力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
        //將本地的js文件同樣配置，之后引用
        "test01" : ["js/test01"],
        "test02" : ["js/test02"]
    }
});

然后再頁(yè)面中使用下面的方式來(lái)使用requirejs：

<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">

    require(["jquery","t1","t2"],function(){
        alert("頁(yè)面加載成功~~");
    },function(){
        alert("頁(yè)面加載失敗~~")
    });

</script>

在官方提供了一種基于標(biāo)簽屬性的方式：

<script data-main="js/main" src="js/require2.1.11.js" ></script>

將所有的配置和導(dǎo)入js都放在了main.js中，這樣在頁(yè)面只要這樣一個(gè)標(biāo)簽就行了。

代碼演示如下：

//test01.js--定義一個(gè)js模塊
define(function(){
    function test(){
        console.log("this is test01.js");
    }
    test();

    $("p").css("color","#DB7093");
});

main.js--requirejs的全局配置

require.config({
    paths:{
        "jquery":["jquery-1.8.3"],
        "test":["test01"]
    },
    shim:{
        "test":["jquery"]
    }
});
require(["test"],function(){
    console.log("success!");
});

index.html--此時(shí)，引入js文件只需一行代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" >
        </script>
    </head>
    <body>
        <p>i am liyanan and this is a testn Page.</p>
    </body>
</html>

以上是“JavaScript模塊加載器--RequireJS的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

JavaScript模塊加載器--?RequireJS的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽