首頁 >web前端 >js教程 >在laydate.js中載入路徑出現錯誤

在laydate.js中載入路徑出現錯誤

亚连
亚连原創
2018-06-15 11:43:591758瀏覽

日期時間選擇插件laydate.js相信對大家來說都不陌生,這篇文章主要給大家介紹了關於laydate.js加載laydate.css路徑錯誤問題解決的相關資料,文中透過範例程式碼介紹的非常詳細,對大家的學習或工作有一定的參考學習價值,需要的朋友們下面來一起看看吧。

前言

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("b3dc7c06965ccaf2ad3e08942cc5138f< /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檔案則可能判斷錯誤。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在Vuejs中透過nextTick()實作非同步更新佇列

Angular CLI安裝教學

#使用ReactNative如何實作Toast

使用CommonsChunkPlugin如何做才能抽出公共模組

#

以上是在laydate.js中載入路徑出現錯誤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn