本文介紹了require.js的具體使用方法，分享給大家，也給自己留個(gè)筆記。
成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)泉山,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
Require.js：
RequireJS是一個(gè)非常小巧的javascript模塊載入框架，是AMD（Asynchronous Module Definition，異步模塊加載機(jī)制）規(guī)范最好的實(shí)現(xiàn)之一。最新版的requireJS壓縮后只有14k，堪稱非常輕量。它還同時(shí)可以和其他的框架協(xié)調(diào)工作，使用requireJS必將使我們的前端代碼質(zhì)量得以提升。
首先我們先來看一下一個(gè)普通的頁面js加載
重慶分公司
重慶分公司
this is a page.
運(yùn)行結(jié)果：
此時(shí)，如果我們不對(duì)彈出框做操作，頁面就不會(huì)接著加載，就不會(huì)有頁面內(nèi)容，這并不是我們想要實(shí)現(xiàn)的結(jié)果。
下面我們用require.js進(jìn)行操作：
index.html
index.js
define(function(){
console.log("this is a test!");
function test(){
console.log("haha,i am a test!");
}
test();
});首先頁面上不再導(dǎo)入test02.js，只是導(dǎo)入了requireJS，其次在javascript中我們使用require()方法，在其中傳遞了一個(gè)數(shù)組的參數(shù)，實(shí)參為我們要導(dǎo)入的js文件的【路徑+文件名稱。
此時(shí)的運(yùn)行結(jié)果：
可以看出，此時(shí)頁面內(nèi)容已經(jīng)顯現(xiàn)出來了。并不像前面我們傳統(tǒng)的一樣在等待js運(yùn)行完成后頁面再加載，而是頁面加載完成后才運(yùn)行js代碼，這樣在運(yùn)行效率上就大大的提高了。
根據(jù)上面的代碼，我們可以來分析requirejs的基本API:
requireJS會(huì)定義三個(gè)變量：define，require，requirejs
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ù)，用來處理加載完畢后的邏輯，當(dāng)所有模塊加載完成后觸發(fā)
//第三個(gè)參數(shù)：也是一個(gè)回調(diào)函數(shù)，用來處理模塊加載失敗后的情況。如上面代碼，js中沒有定義index01.js這個(gè)文件，所以出調(diào)用這個(gè)回調(diào)函數(shù)。加載網(wǎng)絡(luò)文件
之前我們加載的都是本地的js文件，但是，有些時(shí)候我們又需要加載網(wǎng)絡(luò)上的文件，那又該怎么加載呢？下面我們就來介紹一下怎樣加載網(wǎng)絡(luò)上的js文件.
我們現(xiàn)在以加載一個(gè)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
//注意：網(wǎng)絡(luò)上去取時(shí)不能加后綴，否則取不到
require.config({
paths : {
//為網(wǎng)絡(luò)上的庫去一個(gè)名字：jquery
"jquery" : ["https://code.jquery.com/jquery-3.1.1"]
}
});
//
require(["jquery","js/test01","js/test02"],function(){
alert("頁面加載成功~~");
},function(){
alert("頁面加載失敗~~")
});
在取網(wǎng)絡(luò)上的文件時(shí)注意：
1、config方法的參數(shù)是一個(gè)對(duì)象
2、paths的值也是一個(gè)對(duì)象
3、當(dāng)我們?yōu)榫W(wǎng)絡(luò)上的庫取名字是任意，但是建議取有意義的名字，別人可以通過名稱知道你的網(wǎng)絡(luò)資源是什么資源
4、庫的值是一個(gè)數(shù)組，意味著可以多個(gè)同時(shí)寫，防止網(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("頁面加載成功~~");
},function(){
alert("頁面加載失敗~~")
});
同樣我們也可以將本地的配置到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("頁面加載成功~~");
},function(){
alert("頁面加載失敗~~")
});
上面的例子中重復(fù)出現(xiàn)了require.config配置，如果每個(gè)頁面中都加入配置，必然顯得十分不雅，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"]
}
});然后再頁面中使用下面的方式來使用requirejs：
在官方提供了一種基于標(biāo)簽屬性的方式：
將所有的配置和導(dǎo)入js都放在了main.js中，這樣在頁面只要這樣一個(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文件只需一行代碼
i am liyanan and this is a testn Page.
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
