关于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 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
如何在vue 中引入使用jquery
Nov 10 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
PHP新手上路(六)
2006/10/09 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Python实现把数字转换成中文
2015/06/29 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python中property属性实例解析
2018/02/10 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python3中property使用方法详解
2019/04/23 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python实现最短路径的实例方法
2020/07/19 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
一套SQL笔试题
2016/08/14 面试题
linux面试题参考答案(9)
2015/01/07 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
销售业务员岗位职责
2014/01/29 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
2015年教师节感言
2015/08/03 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers