3

維持するのが難しいため、私はよくそれが悪い習慣だと読んでいますが、次のことを行っています。

document.getElementsByTagName("h1")[0].foo = {"key":"value"};

推奨される jQuery の代替手段を使用する場合と比較して:

$.data($(document.getElementsByTagName("h1")[0]), "foo", {"key":"value"});

非常に高速です: jsperf

どちらdataも私のハックは Firebug のようなデバッガーでは表示されないため、「可視性」の観点からは、どちらを使用しても違いはありません。

質問:
要素に直接情報を保存するのが悪い習慣なのはなぜですか?

4

2 に答える 2

5

.foo次のようなカスタム プロパティが推奨されない理由はいくつかあります。

  1. 一部のブラウザーでは、カスタム プロパティに何を割り当てるかによって、DOM と JS の間で循環参照が発生し、場合によってはメモリ リークが発生する可能性があります。

  2. 要素のプロパティの名前空間は、ブラウザで使用するため、および将来のプロパティのために予約されています。data-そのため、HTML5 仕様では、すべてのカスタム属性に接頭辞を付けて、それらすべてを 1 つの名前にすることさえ提案しています。そのため、DOM 要素にランダムにプロパティを追加し始めると、現在または将来何かと競合する可能性があります。

jQuery.data()は javascript オブジェクトを作成し.data()、javascript で作成されたすべてのデータ要素を格納します。.data()特定の DOM 要素に属する適切な項目を見つけることができるように、世界へのインデックスとして 1 つのカスタム プロパティを使用しました。DOM <--> JS 循環参照の可能性はなく、使用されるキー.data()は DOM プロパティ名と競合することはありません。

参考までに、より一般的な使用.data()方法は、次のような jQuery オブジェクトのメソッドを使用することです。

$("h1").eq(0).data("foo", {"key":"value"})

ネイティブ メソッドが jQuery の代替手段よりも高速であることは珍しくありません。なぜなら、jQuery は拡張機能セットとブラウザー間の互換性を提供するために多くのことを行うためです。通常、jQuery を使用してクロス ブラウザーの互換性を維持し、その機能を使用して開発作業を高速化します。一般に、パフォーマンスの最適化は、特定のパフォーマンスの問題を特定してプロファイリングした後でのみ実行されます。特定の操作を高速化するために、一部の jQuery をネイティブ コードに置き換えることができる場合もあります。

于 2013-11-14T11:03:07.100 に答える