前言
laydate.js是屬于Javascript系列的一款日期控件與時間插件,laydate.js支持兼容IE6在內的主流瀏覽器。laydate.js經過賢心大大的重寫之后功能越來越強大,用起來也愈漸靈活了,但是在一個基于angular+ocLazyLoad的項目中出了點問題。
發現問題
laydate.js是通過ocLazyLoad異步加載引入的,結果始終加載不出來laydate.css文件,看了下路徑錯誤,于是扒開代碼發現是這樣寫的:
getPath:function(){ var e=document.scripts, t=e[e.length-1], n=t.src; if(!t.getAttribute("merge")) return n.substring(0,n.lastIndexOf("/")+1)}()
它是需要先獲取到laydate.js的路徑,然后再加上laydate.css的那一截最終拼接成一個完整的路徑。
作者用的獲取laydate.js路徑的思路是:由于判斷路徑的js代碼一般都直接放在js文件中而不是函數中,所以當加載該js文件時會立即執行其中的語句,而執行此語句時所獲取到的js文件數目正好是e.length-1,因為頁面后面的js文件還沒有加載,所以該處的js文件獲取的數目并不是頁面所有的js文件的數目。這樣一來,獲取路徑就無需再遍歷了,而且文件判斷也無需文件名,判斷更加準確(e.length-1
永遠都是其文件本身)。
但是這種方法有缺陷,直接在html頁面中用script標簽引入沒得問題,如果通過document.write("<script src='*.js'></script")
或document.createElement("script")
動態加載亦或者異步加載等得到的路徑卻是最后一個js文件的路徑,而非當前j文件的路徑。
于是想起了document.currentScript
,一步就能到位,但是存在一定的兼容性問題。
var curSrc = document.currentScript.src;return curSrc.substring(0,curSrc.lastIndexOf("/")+1);
最終還是使用了下面這種簡單粗暴的方法:
getPath:function(){ var e=document.scripts, n; for(var i=e.length;i>0;i--){ if(e[i-1].src.indexOf("laydate.js")>-1){ n=e[i-1].src.substring(0,e[i-1].src.lastIndexOf("/")+1); } } return n;}()
這種方法的思路很清晰,根據文件名獲取引用的文件的src屬性并進行判斷截取即可。但這種辦法有以下兩個缺點:
1、需要遍歷頁面的所有js文件,有時可能效率會比較低。(我頁面的js文件沒幾個,哈哈)
2、如果頁面中出現目錄不同的重名的js文件則可能判斷錯誤。
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對武林網的支持。
新聞熱點
疑難解答