关于laydate.js加载laydate.css路径错误问题解决


Posted in Javascript onDecember 27, 2017

前言

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文件则可能判断错误。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
浅析return false的正确使用
Nov 04 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
js实现简单锁屏功能实例
May 27 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 #Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 #Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 #Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 #Javascript
VSCode 配置React Native开发环境的方法
Dec 27 #Javascript
VSCode配置react开发环境的步骤
Dec 27 #Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 #Javascript
You might like
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
jQuery技巧总结
2011/01/01 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python实现的简单dns查询功能示例
2017/05/24 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
秘书英文求职信范文
2014/01/31 职场文书
企业环保标语
2014/06/10 职场文书
2015年超市工作总结
2015/04/09 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS