0

これを行っているときに任意のデータを追加しようとしていましたが、次のような疑問が頭に浮かびました。

  1. 追加できるデータ量に制限はありますか?

  2. とにかくパフォーマンス/実行速度に影響しますか?

  3. また、データの安全性についてはどうでしょうか。安全ですか?

  4. これらはどこに保存されますか?

4

3 に答える 3

1

使用すると思われる属性を含む実際のマークアップまたはサンプル マークアップを提供していないので、HTML5's data--prefixed attributesについて簡単に話しましょう。これはあなたの不安を解消するのに大いに役立つはずです.

まず、彼らは何ですか？W3C 仕様は明確です。

3.2.3.9 data-* 属性を使用したカスタム非表示データの埋め込み

...名前が文字列「data-」で始まる名前空間のない属性...カスタムデータを格納することを目的としています...これ以上適切な属性または要素がありません。

また、意図されていないことも強調して述べられていることに気付くかもしれません。それに着手する前に、そしてそれらの適切な実装のためにどのようなメカニズムが設計されているかを説明する前に、簡単に戻って、以前はどうなったかを考えてみましょうdata-。

HTML に精通している場合は、すべての要素が継承するコア (グローバル) 属性( id、など)が定義されていることをご存知でしょう。classさまざまな理由 ( src、accesskey? など) でグループ間を移動する属性があります。特殊化されたイベント属性、いくつかのかなり具体的または廃止された、またはその他の奇妙な属性があります。

microsyntaxやmicroformatsもあります。ただし、ここに焦点を当てましょう。前者は表現力豊かな属性構文 ( <input type="email" required ...) に関するものであり、後者は禁止的に属性を含まないdata-(構造化された属性の特異性の規則による)。

結局、誰かがこのことを考え抜いたという考えを理解する必要があります。上記のすべては、このマークアップされたコンテンツが意図的に (可能であれば意味的に) ブラウザに記述される方法と関係があります。それがそうであるように存在するのは、意地悪ではありません。それは決まったものではなく (HTML5 は現在生きています)、XHTML-doctype 化された Web ページが主張するXML 名前空間のないフーリガンと同等でもありません。

一度も読んだことがない場合は、HTML5 仕様を調べてください。面白いです、一度読むのにコツをつかむと、それは高尚でぐらつきのある非人間的な言い回しです。

帰り道、私たちは今、この奇妙なdata-*構文に加えて、datasetすべてを素晴らしいものにするいくつかのスクリプトの獣を描いた不器用に実行された散文を与えられています.

そして、あなたは（当然のことながら）これは何のためにあり、私はそれで何ができると思いますか？良い質問。

答えは 2 つあります。何をすべきか、何としても避けるべきかです。前者は、デイジーが並ぶ香りのよい素晴らしい庭園で戯れます。後者は、ベルゼブブ自身があなたの魂を求めるかもしれません. （または、少なくともあなたが何をしているのか疑問に思います。）

すべきことはdata-、何らかのデータをページ上の要素に関連付ける必要がある状況に対処するために を使用することです。意地悪ではありません。地獄のバーベキューの炎に誘惑されないでください。そのデータが必要で、次のような方法に頼る可能性がある場合:

var = '<?=json_encode($restaurants)?>'; // This is so sad, really.

または、神は私たちを助けてください：

<a id="client-005" rel="200907,$5000;200908:$3500;oh,why" ...

それを得る？その要素の「クライアント」の売上データ (私たちは考えています... 希望...)。非同期的にデータを取得することで、これらの風変わりなアプローチの必要性が一部解消されました。また、何人かの賢い人々は、あなたができることを見つけました：

<script type="text/x-data-csv">
Client, Year, Sales
Bill's Salon, 200904, $5300
...

ニフティ。大量の d3.js 立体データ視覚化であるデータの塊の場合、これで十分です。また、属性にはあまり適していません。data-しかし、これは次の可能性があります。

<select name="service_tech">
  <option data-name="Bobby Jones" 
          data-email="bjones@job.com" 
          data-phone="xxx.xxx.xxxx"
          data-title="Diesel Mechanic"
          data-days-available="MON-THU"
          data-shifts-available="2ND3RD"
          value="EMP00345">Bobby Jones</option>

または：

<section id="quiz"
         class="quiz stage block"
         data-quiz-hard-end="2013-03-10 00:00:00"
         data-question-total="10"
         data-question-current="6"
         data-session-keep-alive="30 minutes">
  <article id="question"
           class="single view deadline warning"
           data-question-save-state="true"
           data-question-record-incorrect="false"
           data-question-incorrect="block with hint"
    <ol id="quiz-possibles"
        class="block multiples unanswered"
        data-answer-timeout="60 seconds"
        data-answer-time-expiry-action="replace in-place random fresh"
        data-answer-timer-display="top right #quez.frame"
        data-answer-hint-pop="elapse 30 seconds"
        data-answer-hint="The square of the hypotenuse is left of right to this.">

それは素晴らしいです。そのような関連データのアドホック ブロックを埋め込むのは、何千ものクエリによる狂気、憂鬱、または AJAX の死に頼ることなく、どれほど面倒なことか考えてみてください。

Select2とそれらの属性のカスタム$.change()検索を組み合わせた構成を想像してみてください。今はガスで炊いています。

data-属性ではないものはより抽象的です。なぜなら、本質的に、それはすべて実装が不十分であるためです。したがって、次のことを考慮してください。

<body data-wednesday-salutation="Hello" ...

<img data-class-name="dogs"
     data-filename="rover.png" 
     data-url="/some/path/rover.png"
     data-dog-bark="yes" ...

<p data-groovy-font="blue dog demi mono" ...

<em data-what-is="today" data-answer="Monday!" ...

それは意味がありますか？もちろん、誤用や不正流用への道である狂気に陥ったり、ぐちゃぐちゃに考えたりするためのより微妙な方法がありますdata-が、それらはすべて、多かれ少なかれ上記の同じ問題に帰着します。

  1. これはおそらく完全に無駄です。さらに、あなたはそれが毎日そこにあることを知っています.
  2. 何？Ok。、および犬の鳴き声についての値と一緒に値の一部でclassあるfilename必要があります。srcdata-url
  3. これは誰かにとって何かを意味すると確信しています。(不自然な例でなければ。 )
  4. 不条理、四角い。

無知で顔をしかめるに値するマラプロピズムの明示的なセットを与えることは、私には難しい. 私が考えることができる最悪のことは、幸せになり、すべてdata-を詰め込むことです。シングル。要素。ページ上。と。ひどくおしゃべりしたり、未熟な人が帯域幅を浪費したりするだけではありません。data-

それで、結局、何をしますか？どのようにアプローチするかがすべてです。検討：

  1. リモートでデータ化されたすべての問題に対応できるわけではありません。少なくとも仕様上 (ここで指を振ることを想像してください)、別の属性に適合する場合、それは実行可能ではありませdata-ん。専門家やシステムによって公布された、広くアクセス可能な標準化されたフォーマットを中心に構成されている場合、それはマイクロフォーマットであり、したがってもはや土地ではありませdata-ん。

例えば：

<div class="vcard">
    <span class="fn">Sally Ride</span>
    (<span class="n">
        <span class="honorific-prefix">Dr.</span>
        <span class="given-name">Sally</span>
        <abbr class="additional-name">K.</abbr>
        <span class="family-name">Ride</span>
        <span class="honorific-suffix">Ph.D.</span></span>),
    <span class="nickname">sallykride</span> (IRC)
    <div class="org">Sally Ride Science</div>
    <img class="photo" src="http://example.com/sk.jpg"/>
    <a class="url" href="http://sally.example.com">w</a>,
    <a class="email" href="mailto:sally@example.com">e</a>
    <div class="tel">+1.818.555.1212</div>
    <div class="adr">
        <div class="street-address">123 Main st.</div>
        <span class="locality">Los Angeles</span>,
        <abbr class="region" title="California">CA</abbr>,
        <span class="postal-code">91316</span>
        <div class="country-name">U.S.A</div></div>
    <time class="bday">1951-05-26</time> birthday
    <div class="category">physicist</div>
    <div class="note">1st American woman in space.</div>
</div>

これは、でマイクロフォーマット化されhcardた人物の説明です。これは可能であり、おそらく通常はかなり冗長ではありませんが、これは要点です。data-最後に、クラスの使用方法と属性の欠如に注目してください。

有意義data-な方法で挑戦することは力を与えますが、すべてのデータをコンテンツに埋め込むための散弾銃のアプローチで、すべての綿摘みマークアップをペッパーしないでください。そうである必要はありませんし、そうすべきではありません。その衝動に抵抗してください。

  1. 慎重に使用してください。信じられないほど大規模なリスト (20 年にわたる中規模企業のクライアントのリストなど) に遭遇した場合、そのすべてをページに押し込んで、すべてのブラウザーが 20,000 行のdata-クライアントを処理することを期待しないでください。詳細asideS. つまり、包括的なデータ ストアではありません。必要または適切な場合は、AJAX やラウンド トリップなどを使用します。

  2. 最新のハードウェアと最新のブラウザーを備えた最新のブラウザー (はい、IE8 でも IE7 でもありません) は、かなりの量のマークアップをかなり簡単に処理できます (特に Chrome)。とはいえ、そのサイズを最小化する方法や、3 MB の HTML ドキュメントから離れて戦略を立てる方法を見つけてはならないという意味ではありません。

  3. 使いすぎると、属性が多すぎて簡単に管理できないという頭痛の種になる可能性があります。data-目的を持って使用してください。繰り返しますが、賢明な管理と必要なものへの明確な焦点は、あちこちにある未使用 (またはアクセスできない) ニブルのデータの目に見えないバイトでコンテンツを肥大化させたいという衝動を管理するのに役立ちます。

私はあなたにこれを残しました：

警告の言葉

データ属性がより広く使用されるようになるにつれて、命名規則の衝突の可能性がはるかに大きくなります。data-height などの想像を絶する属性名を使用すると、最終的に同じ属性名を使用するライブラリまたはプラグインに出くわす可能性があります。複数のスクリプトが共通の data- 属性を取得および設定すると、混乱が生じる可能性があります。これを避けるために、data- html5doctor -heightやdata-my-plugin-heightなどのように、すべての data-属性 の前に標準の文字列 (おそらくサイト/プラグイン名) を選択することをお勧めします。

http://html5doctor.com/html5-custom-data-attributes/

于 2013-03-09T16:57:39.940 に答える
0

jqueryデータを使用して任意の要素にデータを保存できます

ここでのデモ：http：//jsfiddle.net/namkha87/TGxdH/

$('h1').data('a', "abc");

任意のデータ型（オブジェクト、数値、文字列など）を格納できます。もちろん、格納しすぎるとパフォーマンスが低下しますが、クライアントマシンによって異なります。

dataメソッドを使用してデータを保存する場合は問題ありません。実際、ほとんどのjqueryプラグインは、データを使用してデータ（ステータス、構成など）を保存します。

于 2013-03-09T09:29:46.063 に答える
0

質問 4 と 5 について: 他のスクリプトと同様に、ユーザーがデータを表示および操作できるため、実質的に安全性はありません。また、データ属性は、ページの更新などに耐えられるという意味でどこにも保存されません。

于 2013-03-09T09:39:52.593 に答える