解决laydate.js在异步加载时CSS路径错误的问题

laydate.js异步加载CSS路径错误修复方案

前言

laydate.js是一款支持IE6等主流浏览器的JavaScript日期与时间控件插件。经过开发者贤心的重构后，其功能日益强大且使用更加灵活。然而，在结合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脚本文件的加载路径，随后拼接上CSS文件的路径片段，从而组合成完整的CSS文件引用地址。

原作者获取路径的逻辑是：由于判断路径的代码直接置于JS文件顶层而非函数内，当该JS文件被加载时会立即执行。此时，文档中已加载的脚本数量正好为e.length-1（因为后续脚本尚未加载），因此通过索引e.length-1即可定位到当前脚本对象，无需遍历所有脚本，且无需依赖文件名进行判断，理论上更为准确（e.length-1永远都是其文件本身）。

然而，该方法存在局限性。在HTML页面中通过script标签直接引入时工作正常，但如果通过document.write("<script src='*.js'></script")或document.createElement("script")等方式动态创建或异步加载脚本，获取到的路径将是最后一个加载的JS文件路径，而非当前laydate.js的路径。

考虑到使用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;
}()

该方法的逻辑清晰：通过遍历页面中所有JS文件的src属性，根据文件名进行匹配和截取，从而确定当前脚本所在目录。尽管这种方法直观有效，但也存在两个主要缺点：

1、需要遍历页面中所有的JS文件，若文件数量较多，可能会影响执行效率（尽管当前项目JS文件较少，影响不大）。

2、如果页面中存在不同目录下同名JS文件，可能导致匹配错误。

总结

以上为解决laydate.js在异步加载场景下CSS路径错误问题的完整分析。希望本文内容对大家在类似项目中的学习与工作有所帮助。如有任何疑问，欢迎留言交流，感谢支持。