An error occurred when loading the path in laydate.js

I believe that the date and time selection plug-in laydate.js is familiar to everyone. This article mainly introduces to you the relevant information on how to solve the problem of laydate.js loading laydate.css path error. The article introduces it through sample code. It is detailed and has certain reference learning value for everyone's study or work. Friends who need it can take a look below.

Preface

laydate.js is a date control and time plug-in belonging to the Javascript series. laydate.js is compatible with IE6 and Major browsers. After laydate.js was greatly rewritten by Xianxin, it became more and more powerful and more flexible to use, but something went wrong in a project based on angular ocLazyLoad.

Found the problem

laydate.js is introduced through ocLazyLoad asynchronous loading. As a result, the laydate.css file cannot be loaded. I took a look. The path was wrong, so I opened the code and found that it was written like this:

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)
}()

It needs to get the path to laydate.js first, and then add the section of laydate.css to finally splice it into a complete path. .

The idea used by the author to obtain the path of laydate.js is: since the js code for determining the path is generally placed directly in the js file rather than in the function, the statements in it will be executed immediately when the js file is loaded. , and the number of js files obtained when executing this statement is exactly e.length-1. Because the js files behind the page have not been loaded yet, the number of js files obtained there is not the number of all js files on the page. In this way, there is no need to traverse the path to obtain the path, and the file name is not required for file judgment, making the judgment more accurate (e.length-1 is always the file itself).

However, this method has flaws. It is no problem to introduce it directly with the script tag in the html page. If you pass document.write("b3dc7c06965ccaf2ad3e08942cc5138f< /script")or document.createElement("script")The path obtained by dynamic loading or asynchronous loading is the path of the last js file, not the path of the current js file.

Then I remembered document.currentScript , which can be done in one step, but there are certain compatibility issues.

var curSrc = document.currentScript.src;
return curSrc.substring(0,curSrc.lastIndexOf("/")+1);

In the end, I used the following simple and crude method:

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;
}()

The idea of ​​​​this method is very clear. According to Just get the src attribute of the referenced file from the file name and judge and intercept it. However, this method has the following two disadvantages:

1. It needs to traverse all js files on the page, which may sometimes be inefficient. (There are not many js files on my page, haha)

2. If there are js files with the same name in different directories on the page, the judgment may be wrong.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing asynchronous update queue through nextTick() in Vuejs

Angular CLI installation tutorial

How to implement Toast using ReactNative

How to extract public modules using CommonsChunkPlugin

The above is the detailed content of An error occurred when loading the path in laydate.js. For more information, please follow other related articles on the PHP Chinese website!