私は少し前に JavaScript を徹底的に勉強しましたが、その時は自分自身に満足していました。今思うと何でもないような気がします。今日の課題は、asp.net ajax のクライアント ページのライフ サイクルに関する章を学習することです。ただし、この章の内容には少し戸惑いました。本書ではこうした疑問については一切言及されていない。
1. HTML ページの詳細な読み込みプロセスは何ですか?読み込み時のページ要素の優先順位は何ですか?
2. JavaScript のスコープ、変数のスコープ、および異なるスクリプト セグメント間の関係は?
3. HTML ページのライフサイクルは何ですか?
これらの質問は私にとって本当に心に刺さりました。これらを理解していなければ、asp.net ajax フレームワークを通じて基礎となる原則を理解することはできません。わかるだけで、なぜそうなるのかはわかりません。
インターネット上で情報を広範囲に検索する場合。いくつかの答えが得られました。
HTMLの読み込みについて:
一般的に、HTML は上から下の順に読み込まれて解析され、DOM オブジェクトが生成されます。
document.write("xxxx");
<script type="text/javascript" src="aaa.js"></script>
彼らの命令は何でしょうか？それでも同じですが、HTML を解析するときにこれらの現象が発生した場合は、解析を停止し、生成されたステートメントを実行します。外部リンクが途中に挿入されている場合は、外部リンクに対応する js を解析して実行します。次のステートメントは、ブラウザーごとに異なる結果になります。
<script type="text/javascript" src="aaa.js"></script>
つまり。 aaa.js がダウンロードされて解析されるまで待機せず、それを処理する別のスレッドが作成され、メイン スレッドが渡されます。でもFFでは。 aaa.js がダウンロード、解析、実行されるまで待機します。
JavaScript の実行については、この記事の最後に添付されている参考資料に詳しく説明されていますので、ご参照ください。
HTML のページのライフサイクルについて:
最も重要な 2 つのイベントは、onLoad と onUnLoad です。 onLoad は、ページが読み込まれるときにトリガーされます。 onUnLoad は、ページの DOM が破棄された後にトリガーされます。ただし、onLoad は少し特殊です。この記事の最後に添付されている参考資料も参照してください。必ず注目を集めてください。
いくつかのサイトの HTML ソース コードを調べたところ、次のコードが見つかりました。
<div><script src="/ggjs/view1602_w.js"></script></div>
これは、Web サイトがページ上に広告を表示するためのコードです。国内の Web サイトでは、通常、ディスプレイ広告は iframe を使用してサードパーティのページを紹介しますが、ここでは JavaScript セグメントを使用して直接生成されます。後で、163ブログが生成したHTMLコードを見てみると、異常でした。 HTML コード全体にはシェルフが 1 つだけあり、すべてのページは js を通じて生成されます。ページの背後にいくつかの js ファイルが導入され、最後にページの最後に initAll 関数の呼び出しがあることがわかりました。私はその js コードを注意深く調べていませんが、プレゼンテーション層のすべての機能がクライアントの js ファイルに組み込まれているのではないかと思います。サーバー側はほんの数個のページ ラックと多くの Web サービスです。本当に息を呑むほどです。
複数の応答機能をトリガーするイベントについて:
私はかつて、C# でデリゲートに似たものを実装することを考えていました。 JavaScript イベントは複数の関数に関連付けることができます。イベントのリストを一度にトリガーできます。私は最近 asp.net ajax を勉強していて、これ用のパッケージがあります。
asp.net ajax では、dom 要素を asp.net ajax の Sys.UI.DomElement オブジェクトにカプセル化できます。その後、そのメソッド addHandler()、addHandlers()、removeHander() を使用してイベント リストを操作できます。なんて便利なんでしょう。当時の私はこの原理をよく理解していませんでした。今日、以下の参考資料にある 2 つのコードを見て、詳細を完全に理解しました。
1. dom 2 のインターフェイスを使用します。
次のようにコードをコピーします。
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
…
}それ以外{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
…
}
この概念は DOM にすでに存在していることがわかりました。そのとき初めて私は知りました。ドムについてはまだまだ分からないことが多いようです。
第 2 に、このメソッドは純粋に手動で実装されます。以下のコードを参照してください。
次のようにコードをコピーします。
関数 addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != '関数') {
window.onload = 関数;
} それ以外 {
window.onload = function() {
if (oldonload) {
oldonload();
}
関数();
}
}
}
この関数は非常に巧妙に書かれています。それを実現するには、匿名関数を使用してください。