关于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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
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
推荐文章系统(一)
2006/10/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python局部赋值的规则
2013/03/07 Python
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python 字典(Dictionary)操作详解
2014/03/11 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
农民工工资支付承诺函
2014/03/31 职场文书
师德演讲稿范文
2014/05/06 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
班级联欢会主持词
2015/07/03 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技