雖然說現在主流的框架是webpack+vue/angular/react;但requireJs也曾是一段紅紅火火的歷史;不懂require的我來復古一下;最近在做測試的時候把寫好的網頁丟到遠程服務器上,發現了一個問題;
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> #dom{width:200px;height:200px;} </style> </head> <body> <div id="dom"></div> </body> </html> <script src="echart.min.js"></script> <script src="my.js"></script>
簡單描述一下:
用了第三個方的echart庫寫了一個柱狀圖:
<script src="echart.min.js"></script> 僅僅是引用:
<script src="my.js"></script> 引入的是具體代碼的實現:
一般看來覺得正常,但是在真實的網絡環境中,瀏覽器報錯:echarts is not defined; 當然知道是echarts出問題了;這明顯是加載順序出問題了;(再刷新一次正常了;說明瀏覽器會緩存一些文件;)
requireJs就是為這個而生的一個依賴加載工具: 下面是index部分內容;
在沒有使用requireJs之前項目目錄是:
------------------------------------------
-------------------------------------------
gongan.html中是這樣的:引入的全是script標簽:
-------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
下面使用requireJs. html變成這樣了: src是require.js源文件的路徑,require這個庫可以去官網下載:http://requirejs.org/docs/download.html
data-main是入口文件,下面會詳細說明的; async=true是異步的script屬性,不阻塞網頁加載 defer是兼容IE的寫法;
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <title>公安主頁</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name=viewport content="width=device-width, initial-scale=1,user-scalable=no"> <link rel="stylesheet" type="text/css" href="style/css/index.css"> <link rel="stylesheet" type="text/css" href="style/fonts/fonts.css"> <script src="style/lib/require.js" data-main="style/js/main" async=true defer></script> </head> <body class="iframe-body"> <div id="index-g"> <div class="today-data"></div> <div class="im-working"></div> <div class="last-three-items clearfix"></div> <div class="index-footer-nav clearfix"></div> </div> </body> </html>
目錄結構變成這樣了(其實目錄結構不一定要這樣,路徑對了就行了);
---------------------------------------------------------------------------------
--------------------------------------------------------------------------------------
發現會多了一個util.js文件(文件位置隨便放,路徑對了就行;其實不用新建文件夾也可以,);其中的文件就是改寫了原來inner-index.js文件;
先看看兩者有什么變化,后面再解釋(main.js配置后面見解釋):
-------------------------------------------------
inner-index.js文件如下:(全部是通常寫的函數式編程,最后在window.onload中調用了);
util.js文件如下:
-------------------------------------------------
下面開始具體講配置,下面是 main.js的:
baseUrl:是配置一個基路徑,什么是基路徑? 就是以下模塊, 如 jquery paths路徑(在這里默認是.js后綴名)是 ../lib/juery-1.9.1.min , 那么真正的路徑是兩者的疊加;這里只是方便書寫;
paths:說到這里應該很明白了;(其實你可以不用寫baseUrl這個屬性,在paths中把路徑寫全就可以了,一樣的效果;);
paths對象中的全是模塊,左邊是模塊名,右邊的路徑;
於是require.config()函數就配置完了,下面是require()使用;
例如:require(["util"],function(u){ });就是得到模塊until要干嘛的,u這個參數其實就是代替了這個模塊的引用;
那么你一定會問,util沒有配置路徑也可以使用? 其實路徑是baseUrl+paths的組合路徑,既然paths沒有,那么使用的就是baseUrl的值,(而剛好util.js在這個文件夾中,其實是故意的);
u.ec_1(); 這個函數調用來自 util.js; util.js中實際是是定義模塊(require中,無非就是require,define);
看看格式: define()函數有兩個參數,第一個是一個數組,里面放的是依賴,就是依賴那個文件,即先加載那個文件在執行回調函數(第二個參數)的中的內容;
這就根本上解決了文章開頭描述的那個問題;可以到瀏覽器 network查看 echarts文件確實是優先加載於 util.js;
回調函數的返回值是一個對象 ,我就是把原來 inner-index.js中的函數式編程中的各個函數的函數體放到返回值的函數中重寫一遍而已;這是必須的,遵循AMD規范;
然后看require(["util"],function(){ //函數調用 });就是這么回事;
下一行:require["repond"],function(){ } Ie8響應媒體查詢的一個js腳本,純粹是引入進來而已;沒事做,這個不必須的文件放在條件注釋的scirpt標簽職中更好;
---------------------------------------------------
-----------------------------------------------------------------------------------------------------
如何引入非標准的AMD庫?
上面說的都是標准的AMD js的引入,包括自己定義的也好,也是定義標准AMD的;
比如某個作者 寫了一個 aa.js文件,他偏偏是函數式編程;
文件內容如下:("假設這個模塊取名 a1")
function aa(){
console.log(12345);
}
按照前面的方式:("假設路徑已經配置好了");
require( ["a1"],function(aa){
aa(); //這肯定是行不通的;
});
正確方式是
require.config({
baseUrl://////,
paths://///
shim:{
a1:{exports:aa}
}
});
require(["a1"],function(aa){ aa() });
另外假如這個js問文件有多個函數呢,上這種方式又失效了;
正確配置是:
shim:{
init:function(){
return {
aa:aa,
bb:bb
}
}
};
使用 :require(["a1"],function(a1){ a1.aa();a1.bb() });