關(guān)于laydate.js加載laydate.css路徑錯(cuò)誤問題解決
前言
laydate.js是屬于Javascript系列的一款日期控件與時(shí)間插件,laydate.js支持兼容IE6在內(nèi)的主流瀏覽器。laydate.js經(jīng)過賢心大大的重寫之后功能越來越強(qiáng)大,用起來也愈漸靈活了,但是在一個(gè)基于angular+ocLazyLoad的項(xiàng)目中出了點(diǎn)問題。
發(fā)現(xiàn)問題
laydate.js是通過ocLazyLoad異步加載引入的,結(jié)果始終加載不出來laydate.css文件,看了下路徑錯(cuò)誤,于是扒開代碼發(fā)現(xiàn)是這樣寫的:
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的那一截最終拼接成一個(gè)完整的路徑。
作者用的獲取laydate.js路徑的思路是:由于判斷路徑的js代碼一般都直接放在js文件中而不是函數(shù)中,所以當(dāng)加載該js文件時(shí)會(huì)立即執(zhí)行其中的語句,而執(zhí)行此語句時(shí)所獲取到的js文件數(shù)目正好是e.length-1,因?yàn)轫撁婧竺娴膉s文件還沒有加載,所以該處的js文件獲取的數(shù)目并不是頁面所有的js文件的數(shù)目。這樣一來,獲取路徑就無需再遍歷了,而且文件判斷也無需文件名,判斷更加準(zhǔn)確(e.length-1
永遠(yuǎn)都是其文件本身)。
但是這種方法有缺陷,直接在html頁面中用script標(biāo)簽引入沒得問題,如果通過document.write("<script src='*.js'></script")
或document.createElement("script")
動(dòng)態(tài)加載亦或者異步加載等得到的路徑卻是最后一個(gè)js文件的路徑,而非當(dāng)前j文件的路徑。
于是想起了document.currentScript
,一步就能到位,但是存在一定的兼容性問題。
var curSrc = document.currentScript.src; return curSrc.substring(0,curSrc.lastIndexOf("/")+1);
最終還是使用了下面這種簡(jiǎn)單粗暴的方法:
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; }()
這種方法的思路很清晰,根據(jù)文件名獲取引用的文件的src屬性并進(jìn)行判斷截取即可。但這種辦法有以下兩個(gè)缺點(diǎn):
1、需要遍歷頁面的所有js文件,有時(shí)可能效率會(huì)比較低。(我頁面的js文件沒幾個(gè),哈哈)
2、如果頁面中出現(xiàn)目錄不同的重名的js文件則可能判斷錯(cuò)誤。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- layDate插件設(shè)置開始和結(jié)束時(shí)間
- layDate日期控件使用方法詳解
- laydate時(shí)間日歷插件使用方法詳解
- vue使用laydate時(shí)間插件的方法
- 詳解easyui基于 layui.laydate日期擴(kuò)展組件
- Angular4.0中引入laydate.js日期插件的方法教程
- laydate日歷控件使用方法詳解
- laydate 顯示結(jié)束時(shí)間不小于開始時(shí)間的實(shí)例
- Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
- Angularjs中使用layDate日期控件示例
- laydate.js日期時(shí)間選擇插件
- bootstrap laydate日期組件使用詳解
- Laydate時(shí)間組件在火狐瀏覽器下有多時(shí)間輸入框時(shí)只能給第一個(gè)輸入框賦值的解決方法
- laydate如何根據(jù)開始時(shí)間或者結(jié)束時(shí)間限制范圍
相關(guān)文章
淺談es6語法 (Proxy和Reflect的對(duì)比)
下面小編就為大家?guī)硪黄獪\談es6語法 (Proxy和Reflect的對(duì)比)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10javascript在myeclipse中報(bào)錯(cuò)的解決方法
jqueryjQueryJQUERYJqueryJQueryjquery報(bào)錯(cuò)jsJSJsmyeclipseMyEclipseMyeclipse,很多朋友應(yīng)該都會(huì)遇到過這個(gè)情況吧,按照下面的步驟便可迎刃而解2013-10-10JavaScript實(shí)現(xiàn)圖片放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06兼容ie ff div 層 打開+關(guān)閉+ 拖動(dòng)+遮罩+移動(dòng)+動(dòng)畫改變高寬
div層 打開+關(guān)閉+ 拖動(dòng)+遮罩+移動(dòng)+動(dòng)畫改變高寬的實(shí)例js代碼2008-07-07簡(jiǎn)單了解Ajax表單序列化的實(shí)現(xiàn)方法
這篇文章主要介紹了簡(jiǎn)單了解Ajax表單序列化的實(shí)現(xiàn)方法,隨著Ajax的出現(xiàn),表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時(shí),若用POST方法向后臺(tái)提交數(shù)據(jù)時(shí),就需要將表單序列化,需要的朋友可以參考下2019-06-06關(guān)于layui表單中按鈕自動(dòng)提交的解決方法
今天小編就為大家分享一篇關(guān)于layui表單中按鈕自動(dòng)提交的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09