JavaScript DOM 操作の改善

高洛峰

リリース： 2016-11-25 11:15:26

オリジナル

951 人が閲覧しました

Web フロントエンドとして、ブラウザの違いへの対応と理解は重要な問題です。以下に、私が仕事でメモした内容をいくつか紹介します。まず、JS ライブラリを使用しない場合の状況を紹介します。

1. setAttribute メソッドは要素のクラス名を設定します: jQuery では、ネイティブ JS で使用できる attr() メソッドを直接使用できます

element.setAttribute(class, newClassName) //これは W3C 標準ですW3C 標準ブラウザで有効ですが、国内ユーザー向けのメインテーマです。
element.setAttribute(className, newClassName) //この設定は IE でのみ有効です。すべてのブラウザーが有効です (JavaScript がサポートされている限り)
それでは、この記事の目的は、ブラウザー間の違いを紹介し、フロントエンドの友人に問題を解決するための最も効果的な方法を理解してもらうことです。続く。

2. FireFox は window.event オブジェクトを持たず、event オブジェクトのみをサポートします。IE は window.event のみをサポートしますが、他の主流ブラウザは両方をサポートするため、一般的には次のように記述されます:

function handle(e)

{
e = e ||event;
...
}
3. DOMContentLoaded イベントの原則: ページの解析/DOM ツリーの確立が完了し、画像、スクリプト、スタイルなどのすべてのリソースがダウンロードされた後に window.onload イベントがトリガーされます。のシートなど。これは多くの実際のアプリケーションにとっては少し「遅すぎる」ため、ユーザーエクスペリエンスに影響を与えます。この問題を解決するために、DOMContentLoaded メソッドが FF に追加されました。onload と比較して、このメソッドは、他のリソースがロードされるのを待たずに、ページの DOM コンテンツがロードされた後にトリガーされます。は jquery.ready() イベントの実装原則です)。

//以下はjQuery 1.4.2バージョンのオリジナル分析です

bindReady: function() {

if (readyBound ) {
return;
}
readyBound = true;
// $(document) の場合をキャッチします.ready () は、
の後に呼び出されます。 // ブラウザイベントはすでに発生しています。
if ( document.readyState === "complete" ) {
return jQuery.ready();
}
// Mozilla、Opera、webkit nightlies現在このイベントをサポートしています
if ( document.addEventListener ) {
// 便利なイベントコールバックを使用します
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// window.onload へのフォールバック、常に機能します
window .addEventListener ( "load", jQuery.ready, false );
// IE イベントモデルが使用されている場合
} else if ( document.attachEvent ) {
// onload 前に確実に起動するようにします,
// 遅いかもしれないが、 iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);
// window.onload へのフォールバック、常に機能します
window.attachEvent( "onload", jQuery.ready );
// IE でフレームではない場合
/ /ドキュメントの準備ができているかどうかを継続的に確認します
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
}
設計アイデア - Webkit と Firefox を同等に扱い、両方とも DOMContentLoaded イベントを直接登録します。ただし、Webkit はバージョン 525 以降でのみ導入されたため、潜在的な互換性リスクがあります。 IE の場合、最初にドキュメントの onreadystatechange イベントを登録します。テスト後、このメソッドはすべてのリソースがダウンロードされるまで待機します。その後、IE であり、ページが iframe 内にないと判断された場合は、呼び出しが成功して DOMContentLoaded がトリガーされるまで、setTiemout を通じて documentElement の doScroll メソッドが呼び出され続けます。 1 IE に対する jQuery の解決策の原則は、IE では、DOM の一部のメソッドは doScroll が呼び出されると、DOM の解析が完了するということです。プロトタイプに document.write を使用すると、このソリューションはページに iframe がある場合に失敗する問題を解決できます。また、jQuery はページが iframe 内にある場合にこのメソッドが失敗することを懸念しているようで、iframe 内にある場合はドキュメントの onreadystatechange を通じて実装され、そうでない場合は実装コードで判断されます。 doScroll を通じて実装されます。ただし、テスト後、doScroll は iframe でも引き続き有効です。