3

javascriptを使用して自分のサイトから一般情報にアクセスする必要があります。これまでのところ、次のオプションがあります。

  • html要素の使用：<input type="hidden" value="MyValue"/>

  • 既存のhtml要素でカスタム属性を使用する：<div id="HtmlElement" myattr="MyValue"></div>そして、を使用してそれにアクセスするdocument.getElementById("HtmlElement").getAttribute("myattr")

  • 既存のhtml要素でデータ属性を使用する：<div id="HtmlElement" data-myattr="MyValue"></div>次に、を使用してそれにアクセスしますjQuery("#HtmlElement").data("myattr")

どちらのオプションを使用することの利点は何であるか疑問に思いました。

情報を含む緩いhtml要素を持つという考えが好きではないので、私は隠し入力を使用するのが好きではありません。しかし、ページ内の既存のhtml要素に関連する情報ではなく、一般的な情報を表示するために必要なので、それほど悪くはないようです。

一方、私は外部ライブラリの使用を悪用するのが好きではありませんが、私の場合はすでにjQueryを自分のサイトにロードしているので、このためだけにライブラリ全体をロードしているわけではありません。

そして最後に、生地の性能でさえ常に問題です。私の場合、それが最速の解決策である場合、それは大きな違いにはなりません。

4

1 に答える 1

12

それが目的であり、最新のブラウザーにはアクセスするためのネイティブ API があるため、データ属性を使用しますが、非最新のブラウザーはカスタム属性としてそれらにアクセスできます。

このhtmlを考えると：

<div data-foo="bar"></div>

// modern browser:
foo = document.getElementByID("myelementid").dataset.foo;

// older browser:
foo = document.getElementByID("myelementid").getAttribute("data-foo");

// jQuery (all browsers)
foo = $("#myelementid").data("foo");

データ属性がdata-foo-barの場合、キーがdatasetと.dataになることに注意してくださいfooBar

sdespont が言及しているように、データは保存している要素に関連している必要があります。

更新:
.attr メソッドを使用してデータ属性の値を取得することもできることに注意することも重要ですが、この 2 つにはかなり重要な違いがあります。.data を使用してデータ属性の値を取得すると、属性の値を正しい JavaScriptタイプに解析しようとします。たとえば、int に変換できる場合は、int に変換されます。オブジェクトまたは配列に変換できる場合は、オブジェクトまたは配列に変換されます。代わりに を使用.attr()した場合は、常に文字列があることを確認できます。

によって与えられた機能が特に必要でない限り、を使用.attr()することを優先する必要があることにもおそらく言及する価値があります。これは、を使用すると、その要素とそのデータに対してデータキャッシュが作成されるため、実際に使用するつもりがない限り必要ありません。複数回またはによって提供される追加機能が必要です.data().data().data().data().data()

于 2013-01-09T20:43:12.623 に答える