JavaScript の動的ロード、キャッシュ、更新、再利用 (1)_JavaScript スキル

使用範囲:

OA、MIS、ERP などの情報管理プロジェクトでは、当面 Web サイトは考慮されていません。

発生した問題:

プロジェクトを完了するには、多くの場合、jQuery.js、easyUI などの多くの js ファイルを参照する必要があります。私が書いた一連の js ファイルもありますが、ファイルが変更された場合、どのようにしてこれらのファイルを簡単にロードできるでしょうか?作業効率が改善できればそれに越したことはありません。

ターゲット:

1. jsファイルを簡単に参照できます。

2. サーバーからファイルを頻繁に読み取らないように、さまざまなキャッシュを使用してみてください。

3. js ファイルが更新された場合、または複数の js ファイルが追加または削除された場合、クライアントは自動的かつ即時に更新できる必要があります。

4. Js ファイルの再利用。

ページ構造:

一般に、OA や MIS などのプロジェクトはフレームセットや iframe を使用して実装されることが多く、親ページと子ページという概念があります。これを利用して大騒ぎすることができます。

Web ページは、シェル、ホームページ、タグ、データリスト、フォーム (追加、変更) の 3 つの部分に分けることができます。ここで説明した js を読み込む方法ではこのページ構造を使用する必要があるため、この Web サイトは当面サポートされません。

この写真には見覚えがあるかもしれません。なるほど、そういう構造なんですね。

テキスト

現在、Web アプリケーションを作成する場合、自分で作成したさまざまな JS だけでなく、サードパーティの jQuery、easyUI、my97 などのさまざまな js に依存することが増えています。実装すべき機能はますます増え、使用する必要のある js も増え、js ファイルは頻繁に変更されます。その結果、各ページに大量の

動的読み込み

<script> を使用してページに js を読み込むのは明らかに非常に面倒なので、どうすればよいでしょうか?熟考した結果、私は依然として動的読み込みを使用して問題を解決しています。また、インターネットで検索したところ、手動​​で記述されたものやフレームワーク (seejs など) にまとめられたものなど、さまざまなメソッドがあることがわかりました。自分で作ったほうが便利だと思うこともあるので、自分でセットを書くつもりです。 </script>

動的にロードするにはどうすればよいですか? jQuery が提供するメソッドを使用しますか?これは可能ですが、ページは jQuery と、js ファイルをロードするために作成した js を参照する必要があります。つまり、1ページに<script>を2つ書く必要があり、面倒です。 1つ書けたら2つ書いてはいけません、あと1つだけですが、もう1つあると本当に面倒です。そこで、小さな動的読み込みメソッドを手動で作成することにしました。 </script>

書けない場合はどうすればよいですか? Baiduおばさんがお手伝いします。いろいろ探した結果、より理想的な方法を見つけたのでこれを使用しました。

コードをコピー コードは次のとおりです:

/*js を動的にロードする関数はインターネットから取得され、IE10 と互換性があるように少し変更されています */
varloadscript =
{
$$: 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 = ロード済み;
} else {
s.onreadystatechange = 準備完了;
s.onerror = s.onload = ロード済み;
}
loadscript.tag('head')[0].appendChild(s);

function ready() { /*IE7.0/IE10.0*/
if (s.readyState == 'loaded' || s.readyState == 'complete') {
callback() ;

functionloaded() { /*chrome/IE10.0*/

callback();

}
}
};

ロード順序

新しいコードが完成しました。他のjsファイルをロードする方法は、ファイルが多く、依存関係があるため、考えてjsファイルの辞書を取得し、それに従ってロードするシーケンスを作成しました。この順序でロードします。

より安定させるために、1 つずつロードする方法、つまり、1 つの js をロードした後、別の js をロードする方法を使用することにしました。これにより依存関係が確保されます。もちろん、読み込み速度が遅くなるというデメリットもあります。通常、Web ページ上で js を読み込む場合、複数の js ファイルを同時にダウンロードできるため、高速になります。

キャッシュを使用する

一般的なブラウザには、さまざまなリソース (Web ページ、画像、JS、CSS など) のキャッシュがあり、それらがすでに利用可能な場合、それらはサーバーからダウンロードされません。良さそうですが、問題が 2 つあります:

A. ブラウザはキャッシュされた js ファイルが最新かどうかをどのように判断しますか?

B. js ファイルが更新されました。ブラウザを強制的に更新するにはどうすればよいですか?

ブラウザはどのように判断するのでしょうか?具体的な手順はわかりませんが、キャッシュしている js ファイルが最新かどうかをサーバーに問い合わせて、ローカル キャッシュが最新かどうかを判断できることだけはわかります。そうでない場合は、最新のものをダウンロードしてください。つまり、クライアントがすでに js ファイルのキャッシュを持っている場合でも、ブラウザがそれが最新かどうかを確認したい場合は、サーバーに問い合わせます。これはトスアップです。もちろん、通常の状況では、このプロセスは非常に高速ですが、場合によってはこのプロセスが非常に遅くなることがあります。

そのため、js の読み込みはできるだけ避けた方がよいでしょう。そこで導入されたのが「jsファイルの再利用」です。

js ファイルを更新

JS ファイルが更新されましたが、ブラウザはキャッシュされているため以前の JS ファイルを使用しており、キャッシュされた JS ファイルが最新であると頑なに信じています。どうすればよいですか?

最も簡単な方法は、js の後にバージョン番号をロードすることです。更新がある場合は、バージョン番号 1 になります。たとえば、xxx.js?v=1。 Js ファイルを更新すると、xxx.js?v=2 になります。このようにして、js は確実に更新されます。

とても簡単そうですが、このバージョン番号を追加するにはどうすればよいでしょうか?バージョン番号自体を更新するにはどうすればよいですか?

再利用

まず、上の図を見てみましょう。これは、親ページと呼ばれるシェル ページ (またはホームページ) があります。 iframe によって読み込まれるページもいくつかありますので、サブページを追加します。

一般的なアプローチは、親ページに jQuery.js をロードしてから、子ページに 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) //検索範囲を指定：サブページの document

待って、これは非常に面倒に思えますが、スクリプトを作成するときは、このスクリプトが親ページで実行されるか、子ページで実行されるかを考慮する必要もあります。

さて、このトラブルを避けるために簡単なパッケージを作りましょう。サブページ

に関数を作成します

コードをコピー コードは次のとおりです。

function $ (p1){
$ (p1,document);
}

はい、終わりましたか?もちろん違います！次に何が起こるかを予測するために、次回の説明を聞いてください。

追記: 次のエピソードのプレビュー。具体的な実装コードと、その他に何か知りたいことがあれば、下記に返信してください。よろしくお願いします。