JSで完璧なインクルード・ローディング実装コード_JavaScriptスキルを実現

なぜ js に include が必要なのでしょうか? a.js が共通の common.js を使用する必要があるシナリオについて考えてみましょう。もちろん、a.js を使用するページで を使用できます。 a.js を使用する 5 ページ スクリプトを 5 回記述する必要がありますか?また、将来 a.js が common2.js を参照する必要が生じた場合、再度 5 ページを修正しますか? 既存の js に関するいくつかの問題は次のとおりです。 これを書く前に、インターネットでいくつかの情報を検索したところ、以前に書いたインクルードには 2 つの問題があることがわかりました。これらは、解決する必要がある 2 つの重要な問題でもあります。 。 1. 相対パスの問題: a.js で include("../js/common.js") を使用します。include 関数は、a.js に対する相対パスである相対パスを使用する必要があります。 を使用して a.js を HTML に埋め込む場合、相対パスまたは絶対パスを使用できます。 include 関数は、common.js の絶対パス、または html への相対パスを実際にどのように決定できるのでしょうか。インターネット上でこの問題を解決するには、いくつかの js 変数を追加する必要があり、不便です。 2. 引用の問題。 インターネット上の include 関数の実装では、ほとんどの場合、次の 2 つのメソッドを使用して common.js document.write(" ") または var s = document.createElement("script"); s.src = ...; document によって出力されるスクリプト.write は後で .js がロードされ、createElement("script") によって作成されたスクリプトがノンブロッキングでロードされます。 したがって、common.js が読み込まれる前に a.js で common.js 関数が呼び出された場合、エラーが報告されます。 実装 上記 2 つの問題を解決するには、js include を実装します。 最初の質問、私の方法は、まず HTML 内の a.js の絶対パスを取得し (相対パスの場合は絶対パスに変換します)、次に common.js のパスを絶対パスに変換します。パス。 2 番目の質問は、参照の問題が発生しないように、同期 ajax を使用して common.js をリクエストすることです。 実装コードは次のとおりです:

コードをコピー コードは次のとおりです: // 相対パスに従って絶対パスを取得します function getPath(relativePath,absolutePath){ var reg = new RegExp("\.\./","g"); var uplayCount = 0; // 上位レベルの数を相対パスで返します。 var m =relativePath.match(reg); if(m) uplayCount = m.length; var lastIndex =AbsolutePath.length-1; =uplayCount;i ){ lastIndex =AbsolutePath.lastIndexOf("/",lastIndex); } returnAbsolutePath.substr(0,lastIndex 1)relativePath.replace(reg,""); 🎜>} function include(jssrc){ // まず現在の a.js の src を取得します。 a.js で include を呼び出し、a.js の参照である最後の script タグを直接取得します。 var scripts = document.getElementsByTagName("script"); var lastScript = scripts.length-1]; var src = if(" http://")!=0 && src.indexOf("/") !=0){ // a.js は相対パスを使用します。最初に絶対パスに置き換えます var url = location .href; var インデックス = url.indexOf("?"); if(index != -1){ url = url.substring(0, インデックス-1); src = getPath(src,url); } var jssrcs = jssrc.split("|"); // for(var i=) で区切って複数の js を含めることができます。 0; i // js をロードするには juqery の同期 ajax を使用します。 // document.write を使用して現在の js の後に動的に js を追加します。js 参照の問題が発生する可能性があります。 🎜 >// スクリプトを動的に作成します。これはダウンロードをブロックせず、参照の問題を引き起こす可能性があります $.ajax({type:'GET',url:getPath(jssrc,src),async:false,dataType:'script '} ); } }

a.js で include("../js/common.js") を直接使用する;

複数のリクエストに関する問題 上記の include の使用は非常にクールに見えますが、別の深刻な問題が伴います。問題は、もう 1 つの ajax リクエストが送信されることです。 WEB パフォーマンスに対するリクエストを減らすために、js をマージすることがよくあります。しかし、include を使用した後、さらに多くのリクエストが発生しました。この問題が解決しないと、LAN製品でもない限り、正規製品ではincludeを使わない人も多いと思います。

私はこのマルチリクエストの問題を解決する方法を長い間考えてきましたが、クライアント JS だけを使用して解決する方法はないとついに気づきました。そこでサーバーサイドのコードを使って解決することを考えました 「js と css のマージ、圧縮、キャッシュ管理」を紹介した記事があったとき、サーバーサイドのコードを使って js をマージしたことを今でも覚えています。プログラムが始まりました。

そこで、複数のリクエストを含めるソリューションも追加しました。プログラムの起動時にすべての js を検索して、 include が使用されていることがわかったら、 include 関数を include 内の common.js のソース コードに置き換えます。このように、実行時の a.js には include 関数はなく、実際に common.js

追記 丫の内容を含む js ファイルが作成されます。結局のところ、なぜすべてのインクルードを交換したのかというと、前に述べたことは無駄ではありません。

個人的には、すべての製品が開発環境と製品環境を (通常は構成ファイルによって) 区別する必要があると感じています。開発環境では開発効率が最優先されるべきですが、製品環境ではパフォーマンスが最優先されるべきです。最優先事項。したがって、ここでのインクルードは別の方法で処理する必要があります。開発環境では開発とメンテナンスの効率を向上させるために js インクルードが使用されますが、運用環境ではすべてのインクルードが実際の js ファイルの内容に自動的に置き換えられます。 [作者]：BearRui(AK-47)

JSで完璧なインクルード・ローディング実装コード_JavaScriptスキルを実現

関連記事