溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了require.js的具體使用方法，分享給大家，也給自己留個筆記。
Require.js：
RequireJS是一個非常小巧的javascript模塊載入框架，是AMD（Asynchronous Module Definition，異步模塊加載機制）規范最好的實現之一。最新版的requireJS壓縮后只有14k，堪稱非常輕量。它還同時可以和其他的框架協調工作，使用requireJS必將使我們的前端代碼質量得以提升。
首先我們先來看一下一個普通的頁面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>
運行結果：
此時，如果我們不對彈出框做操作，頁面就不會接著加載，就不會有頁面內容，這并不是我們想要實現的結果。
下面我們用require.js進行操作：
index.html
<!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文件的【路徑+文件名稱。
此時的運行結果：
可以看出，此時頁面內容已經顯現出來了。并不像前面我們傳統的一樣在等待js運行完成后頁面再加載，而是頁面加載完成后才運行js代碼，這樣在運行效率上就大大的提高了。
根據上面的代碼，我們可以來分析requirejs的基本API:
requireJS會定義三個變量：define，require，requirejs
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
