首頁 > web前端 > js教程 > 詳解JavaScript模組載入器--RequireJS

詳解JavaScript模組載入器--RequireJS

青灯夜游
發布: 2021-02-18 23:04:04
轉載
2992 人瀏覽過

詳解JavaScript模組載入器--RequireJS

相關推薦:《javascript影片教學

#RequireJS是個JavaScript模組載入器。它非常適合在瀏覽器中使用,但它也可以用在其他腳本環境,就像 Rhino and Node。使用RequireJS載入模組化腳本將提高程式碼的載入速度和品質。

首先我們先來看看一個普通的頁面js載入

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

運行結果:

詳解JavaScript模組載入器--RequireJS

##此時,如果我們不對彈出框做操作,頁面就不會接著加載,就不會有頁面內容,這並不是我們想要實現的結果。

#下面我們可以用require.js做:

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("当js加载成功后会执行的函数");
            },function(){
                console.log("当js加载失败后会执行的函数");
            });
        </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();
});
登入後複製

首先頁面上不再導入test02.js,只是導入了requireJS,其次在javascript中我們使用require()方法,在其中傳遞了一個陣列的參數,實參為我們要導入的js檔案的【路徑檔名稱。

此時的運行結果:

詳解JavaScript模組載入器--RequireJS

詳解JavaScript模組載入器--RequireJS

詳解JavaScript模組載入器--RequireJS

#可以看出,此時頁面內容已經顯現出來了。並不像前面我們傳統的一樣在等待js運行完成後頁面再加載,而是頁面加載完成後才運行js程式碼,這樣在運行效率上就大大的提高了。

根據上面的程式碼,我們可以來分析requirejs的基本API:

requireJS會定義三個變數:define,require,requirejs

  • require==requirejs,一般使用require比較短。

  • define 用來定義一個模組

  • #require 載入依賴模組(引用定義好的模組),並執行載入完後的回呼函數

require有三個參數:

require(["js/index","js/index01"],function(){
                console.log("当js加载成功后会执行的函数");
            },function(){
                console.log("当js加载失败后会执行的函数");
            });
登入後複製

第一個參數:定義require中的依賴,參數必須是陣列形式,即使只有一個依賴,也必須使用陣列形式傳參。

第二個參數:是一個回呼函數,用來處理載入完畢後的邏輯,當所有模組載入完成後觸發

第三個參數:也是一個回呼函數,用來處理模組載入失敗後的情況。如上面程式碼,js中沒有定義index01.js這個文件,所以出調用這個回呼函數。

載入網頁文件

之前我們載入的都是本地的js文件,但是,有些時候我們又需要載入網路上的文件,那又該怎麼載入呢?下面我們就來介紹一下怎樣載入網路上的js檔案.

我們現在以載入一個jquery.js檔案為例:

//百度cdn公共库jQuery地址:      http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址:           https://code.jquery.com/jquery-3.1.1.js
//注意:网络上去取时不能加后缀,否则取不到
require.config({
    paths : {
        //为网络上的库去一个名字:jquery
        "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});
登入後複製

在取網路上的檔案時注意:

1、config方法的參數是一個物件

2、paths的值也是一個物件

3、當我們為網路上的函式庫取名字是任意,但是建議取有意義的名字,別人可以透過名稱知道你的網路資源是什麼資源

4、函式庫的值是一個數組,這意味著可以多個同時寫,防止網路異常取不到

5、特別注意:網路資源路徑不能帶後綴名,否則取不到

#6、我們也可以先讓去網路中去取,如果取不到,再在本地取,減輕本地服務的壓力(屬於專案最佳化)。

require.config({
    paths : {
        //这样配置,减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});
登入後複製

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

require.config({
    paths : {
        //这样配置,减轻本地服务器的压力
        "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("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});
登入後複製

上面的例子中重複出現了require.config配置,如果每個頁面中都加入配置,必然顯得十分不雅,requirejs提供了一個叫」主資料」的功能,我們先建立一個main.js:

require.config({
    paths : {
        //这样配置,减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
        //将本地的js文件同样配置,之后引用
        "test01" : ["js/test01"],
        "test02" : ["js/test02"]
    }
});
登入後複製

然後再頁面中使用下面的方式來使用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("页面加载成功~~");
    },function(){
        alert("页面加载失败~~")
    });

</script>
登入後複製

在官方提供了一種基於標籤屬性的方式:

<script data-main="js/main" src="js/require2.1.11.js" ></script>
登入後複製

將所有的設定和導入js都放在了main.js中,這樣在頁面只要這樣一個標籤就行了。

代码演示如下:

//test01.js--定义一个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--此时,引入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的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板