laydate.jsにパスを読み込むときにエラーが発生しました

日時選択プラグインlaydate.jsは皆さんによく知られていると思いますが、この記事では主にlaydate.jsのlaydate.css読み込み時のパスエラーの問題を解決する方法に関する関連情報を紹介します。サンプル コードを通じて詳細に説明されているので、学習や仕事に役立つ情報が得られます。必要な方は以下を参照してください。

はじめに

laydate.js は、JavaScript シリーズに属する日付制御および時刻プラグインであり、IE6 を含む主流ブラウザーと互換性があります。 laydate.js が Xianxin によって大幅に書き直された後、ますます強力になり、より柔軟に使用できるようになりましたが、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 は常にファイルです)自体）。 e.length-1永远都是其文件本身)。

但是这种方法有缺陷，直接在html页面中用script标签引入没得问题，如果通过document.write("<script src="'*.js'"></script>")或document.createElement("script")动态加载亦或者异步加载等得到的路径却是最后一个js文件的路径，而非当前j文件的路径。

于是想起了document.currentScript

しかし、この方法には欠陥があります。 document.write("動的ロードまたは非同期ロードによって取得されるパスは、現在の js ファイルのパスではなく、最後の js ファイルのパスです。

そこで、document.currentScript を思い出しました。これは 1 ステップで実行できますが、互換性の問題がいくつかあります。

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 属性を取得するだけです。判断して阻止する。ただし、この方法には次の 2 つの欠点があります:

1. ページ上のすべての js ファイルを走査する必要があり、非効率である場合があります。 (私のページにはjsファイルがあまりありません(笑)

2. ページ内の異なるディレクトリに同じ名前のjsファイルがある場合、判定が間違っている可能性があります。

上記は私があなたのためにまとめたものです。

関連記事:

VuejsのnextTick()による非同期更新キューの実装

Angular CLIのインストールチュートリアル

ReactNativeを使用してToastを実装する方法

🎜CommonsChunkPluginを使用してパブリックモジュールを抽出します 🎜🎜

以上がlaydate.jsにパスを読み込むときにエラーが発生しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。