Une erreur s'est produite lors du chargement du chemin dans laydate.js

Je pense que tout le monde connaît le plug-in de sélection de date et d'heure laydate.js. Cet article vous présente principalement les informations pertinentes sur la façon de résoudre le problème de l'erreur de chemin de laydate.js lors du chargement de laydate.css. L'article le présente très bien à travers l'exemple de code. Il est détaillé et a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. Les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Avant-propos

laydate.js est un plug-in de contrôle de date et d'heure appartenant à la série Javascript.js est compatible avec IE6. et plus de navigateurs majeurs. Après que laydate.js ait été largement réécrit par Xianxin, il est devenu de plus en plus puissant et plus flexible à utiliser, mais quelque chose s'est mal passé dans un projet basé sur angulaire+ocLazyLoad.

Problème trouvé

laydate.js est introduit via le chargement asynchrone ocLazyLoad. Par conséquent, le fichier laydate.css ne peut pas être chargé. J'ai jeté un œil. Le chemin était erroné, alors j'ai ouvert le code et j'ai découvert qu'il était écrit comme ceci :

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

Il doit d'abord obtenir le chemin vers laydate.js, puis ajouter la section. de laydate.css pour enfin le fusionner en un chemin complet.

L'idée utilisée par l'auteur pour obtenir le chemin de laydate.js est la suivante : puisque le code js pour déterminer le chemin est généralement placé directement dans le fichier js plutôt que dans la fonction, les instructions qu'il contient seront exécuté immédiatement lorsque le fichier js est chargé, et le nombre de fichiers js obtenus lors de l'exécution de cette instruction est exactement e.length-1. Parce que les fichiers js derrière la page n'ont pas encore été chargés, le nombre de fichiers js obtenus là-bas est. pas le nombre de tous les fichiers js sur la page. De cette façon, il n'est pas nécessaire de parcourir le chemin pour obtenir le fichier, et le nom du fichier n'est pas requis pour le jugement du fichier, ce qui rend le jugement plus précis (e.length-1 est toujours le fichier lui-même).

Cependant, cette méthode présente des défauts. Ce n'est pas un problème de l'introduire directement à l'aide de balises de script dans la page html. Cependant, si le chemin obtenu via document.write("91f2bd488afe105e35022aa7562b416b</script") ou document.createElement("script") chargement dynamique ou asynchrone est le même. last js Le chemin du fichier, pas le chemin du fichier j actuel.

Ensuite, je me suis souvenu de document.currentScript , ce qui peut être fait en une seule étape, mais il y a certains problèmes de compatibilité.

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

Au final, j'ai utilisé la méthode simple et grossière suivante :

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

L'idée de ​Cette méthode est très claire. Obtenez simplement l'attribut src du fichier référencé en fonction du nom du fichier, jugez-le et interceptez-le. Cependant, cette méthode présente les deux inconvénients suivants :

1. Elle doit parcourir tous les fichiers js de la page, ce qui peut parfois s'avérer inefficace. (Il n'y a pas beaucoup de fichiers js sur ma page, haha)

2. S'il y a des fichiers js du même nom dans différents répertoires de la page, le jugement peut être erroné.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Implémentation d'une file d'attente de mise à jour asynchrone via nextTick() dans Vuejs

Tutoriel d'installation de la CLI angulaire

Comment implémenter Toast à l'aide de ReactNative

Comment extraire des modules communs à l'aide de CommonsChunkPlugin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!