相關推薦：《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>登入後複製
運行結果：
##此時，如果我們不對彈出框做操作，頁面就不會接著加載，就不會有頁面內容，這並不是我們想要實現的結果。
#下面我們可以用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檔案的【路徑檔名稱。
此時的運行結果：
#可以看出，此時頁面內容已經顯現出來了。並不像前面我們傳統的一樣在等待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中文網其他相關文章！
