使用範囲：
OA、MIS、ERPなどの情報管理プロジェクトの場合、当面はWebサイトは考慮されていません。
遭遇した問題：
プロジェクトを完了するには、jquery.js、easyuiなどの多くのJSファイルを参照する必要があることがよくあります。また、私が書いたJSファイルの列もあります。これらのファイルは便利にロードできますか？ファイルが変更された場合、クライアントはどのようにしてキャッシュを時間内に更新できますか？ポイント操作効率を改善できればさらに良いでしょう。
ターゲット：
1. JSファイルを簡単に参照できます。
2.さまざまなキャッシュを使用して、サーバーからファイルを頻繁に読むことを避けてください。
3. JSファイルが更新または追加または縮小されている場合、クライアントは自動的にすぐに更新できる必要があります。
4。JSファイルの再利用。
ページ構造：
一般に、OAやMISなどのプロジェクトは、フレームセットまたはIFRAMEを使用してほとんど実装されており、親ページとチャイルドページの概念をもたらします。これを使用して大騒ぎすることができます。
Webページは、シェル、ホームページ、ラベル、データリスト、フォーム（追加、変更）の3つの部分に分けることができます。ここでJSをロードする方法はこのページ構造を使用する必要があり、そのため、当面はウェブサイトがサポートされていないということです。
この写真を見るのはおなじみのようです。はい、それが構造です。
文章
今日、Webバージョンアプリケーションに関しては、サードパーティのJQuery、EasyUi、My97など、さまざまなJSや、自分で書かれたさまざまなJSにますます依存しています。ますます多くの機能が実装され、ますます多くのJSを使用する必要があり、より多くのJSファイルが頻繁に変更されます。ページごとに多くの<スクリプトsrc = "">を書くなど、非常に多くの問題が発生します。これは面倒です。新しいJSファイルを追加するには、いくつのページを変更する必要がありますか？ JSファイルをすぐに更新する方法は？クライアントをより速くロードする方法。一部のJSファイルには依存関係もあります。読み込み順序を確保する方法は？この記事は、私のソリューションを共有することです。
動的荷重
<script>を使用してページにJSをロードするのは明らかに面倒です。それで、どうすればよいですか？それについて考えた後、私はまだ動的荷重を使用してそれを解決します。また、私はオンラインで検索し、自分自身によって書かれた方法やフレームワーク（Seejsなど）に編成された方法を含む多くの方法があることを発見しました。時々、私はまだそれを作るのがより熟練していると感じているので、自分で書くことを計画しています。
動的にロードする方法は？ jqueryが提供する方法を使用しますか？これは問題ありませんが、ページはjqueryとJSをJSファイルをロードするために書いたJSを参照する必要があります。言い換えれば、ページに2つの<script> sを書く必要がある場合、面倒です。 1つを書くことができれば、2つを書いてはいけません。それはもう1つですが、もう1つを持つことは本当に厄介です。そこで、私は自分で動的なロードの小さな方法を手書きすることにしました。
書かれない場合はどうすればよいですか？ Baiduおばさんが来て助けてください。あらゆる種類のものを検索した後、ついに比較的理想的な方法を見つけたので、これを使用します。
コードコピーは次のとおりです。
/* JSの動的荷重を実装する関数は、インターネットから来ます。少し変更した後、IE10 *と互換性があります。
var loadscript =
{
$$：function（id）{return document.getElementById（id）; }、
タグ：function（element）{return document.getElementsByTagname（element）; }、
CE：function（element）{return document.createelement（element）; }、
JS：function（url、callback）{
var s = loadscript.ce（ 'script'）;
s.type = "text/javascript";
s.src = url;
if（document.documentMode == 10 || document.documentMode == 9）{
s.onerror = s.onload = loaded;
} それ以外 {
s.onreadystatechange = ready;
s.onerror = s.onload = loaded;
}
loadscript.tag（ 'head'）[0] .appendChild（s）;
function ready（）{/*ie7.0/ie10.0*/
if（s.readystate == 'loaded' || S.ReadyState == 'Complete'）{
折り返し電話（）;
}
}
function loaded（）{/*chrome/ie10.0*/
折り返し電話（）;
}
}
};
読み込み順序
新しいコードが完了しました。以下は、他のJSファイルをロードする方法です。多くのファイルがあり、特定の依存関係があるので、私はそれについて考えてJSファイルの辞書を作成し、その後ロード順序を作成してこの順序でロードします。
より安定するために、私は1つずつロードする方法、つまり1つのJSをロードしてから別のJSをロードする方法を使用することにしました。これにより、依存関係が保証されます。もちろん、不利な点は、負荷速度が遅くなることです。通常、Webページには複数のJSファイルをロードできますが、これはより高速になります。
キャッシュを使用します
一般に、ブラウザにはさまざまなリソース（Webページ、写真、JS、CSSなど）のキャッシュがあり、すでに持っている場合はサーバーにダウンロードしなくなります。それは良いようですが、2つの問題があります：
A.ブラウザは、キャッシュされたJSファイルが最新かどうかをどのように決定しますか？
B. JSファイルが更新されました。ブラウザに更新を強制する方法は？
ブラウザはどのように判断しますか？特定の手順についてはあまり知りませんが、JSファイルIキャッシュが最新かどうかを尋ねるためにサーバーに行くステップがあることを知っています。そして、ローカルキャッシュが最新かどうかを判断できます。それが最新の場合、私は気にしません。そうでない場合は、最新のものをダウンロードします。つまり、クライアントがすでにJSファイルのキャッシュを持っている場合でも、ブラウザはそれが最新かどうかを確認する必要があり、それでもサーバーに行くかどうかを確認する必要があります。これは闘争です。もちろん、一般的に、このプロセスは非常に高速になりますが、このプロセスが非常に遅くなることもあります。
したがって、JSのロードを避けようとする方が良いです。したがって、「JSファイルの再利用」が導入されます。
JSファイルを更新します
JSファイルは更新されましたが、ブラウザはキャッシュされているため、以前のJSファイルを使用しています。キャッシュされたJSファイルが最新であると彼は頑固です。どうすればいいですか？
最も簡単な方法は、JSをバージョン番号の後にロードすることです。更新がある場合、バージョン番号は+1になります。たとえば、xxx.js？v = 1。 JSファイルが更新された後、xxx.js？v = 2です。このようにして、JSは間違いなく更新されます。
簡単に思えますが、このバージョン番号を追加する方法は？バージョン番号自体を更新する方法は？
再利用
ページ構造である上の上の画像を、親ページと呼ぶシェルページ（またはホームページ）を見る必要があります。 iframesによってロードされたページがいくつかあり、それらをサブページに追加します。
一般的なアプローチは、親ページにjquery.jsをロードし、次に子ページにjquery.jsをロードすることです。もちろん、サブページがjquery.jsをロードしている場合、キャッシュから直接抽出され、通常はサーバーを悩ませなくなります。
ただし、親ページが読み込まれているため、なぜチャイルドページを再度ロードする必要があるのですか？親ページに直接読み込んでも大丈夫ですか？私はオンラインで検索しましたが、誰もそうするようには見えませんでした。たぶん私はあまりにも代替です、私はただこの方法を実装したいだけです。利点は、すべてのJSファイルが親ページにロードされ、子ページが親ページにロードされたJSを直接使用しているため、子のページがJSファイルを台無しにする必要がないことです。これもより効率的です。結局のところ、キャッシュを使用してロードする場合でも、判断を下す必要があります。その後、読み込みアクションを実行すると、まだ少しの損失があります。 JSファイルが多いほど、それはより明白になります。
したがって、実装する方法は簡単に考えるのが簡単です。
親ページでjqueryを使用します
var aa = $（ 'div'）; //親ページですべてのdivを見つけます
これはサブページで可能ですか？
var bb = top。$（ 'div'）; // divは見つけることができますが、それは子のページのdivではなく、親ページのdivです。
どうしたの？その理由は、検索範囲です。 jQueryには3つのパラメーターがあります。通常、最初のもののみを使用し、後者は無視されます。では、2番目のパラメーターは何ですか？それが検索範囲です。 jqueryは、指定されていない場合、どこで検索しますか？ $を呼び出すページで検索する代わりに、jQueryをロードするページで検索します。
ソリューションも非常にシンプルで、パラメーターを追加するだけです
var bb = top。$（ 'div'、document）; //検索範囲：サブページのドキュメントを指定します
待って、これは非常に迷惑なようです。スクリプトを書くときは、このスクリプトが親ページで実行されるのか、子ページで実行されているのかを検討する必要がありますか？
OK、このトラブルを避けるための簡単なパッケージを作成します。サブページに関数を書きます
コードコピーは次のとおりです。
function $（p1）{
TOPを返します。$（p1、document）;
}
わかりました、仕事は終わっていますか？もちろん違います！次に何が起こるかを予測するには、次の故障を聞いてください。
PS：次のエピソードのプレビュー。これは特定の実装コードであり、いくつかのアイデアやアイデアがあります。あなたが他に知っていることがあるかどうかはわかりません。もしそうなら、以下に返信してください。最初にありがとう。