首頁 > 開發者 > JavaScript
<!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.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.jsdefine(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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
