1

私は単純な Web アプリを開発しており、特定のイベントまたは条件の後に表示されたデータを更新する必要があります。このデータは、さまざまな場所に散らばっており、完全に別個のマークアップ構造内にあります。過去にクラスを使用したことがありますが、クラスを使用してデータを編集するときにいくつかの危険なケースが見つかりました (特に、OOCSS を使用していて、変更したいクラスがたくさんあり、js データまたは動作にバインドする必要がないため) . 以下の解決策は、この点で防弾である必要がありますが、それが使用されているのを見たことがないので、何かが足りないのではないかと心配しています。次のようなソリューションに欠点はありますか?

以下のコード例 - jQuery を使用

以下は、特定のデータ変更イベントにバインドされる場合があります。

$('.data[data-type=user_data]').each(function(){
    $(this).find('.data[data-type=user_name]').html($.user.userName)
    .end().find('.data[data-type=user_location]').html($.user.userLocation)
    .end().find('.data[data-type=incident_date]').html($.user.incidentDate)
    .end().find('.data[data-type=incident_cost]').html($.user.incidentCost)
    .end().find('.data[data-type=user_hair_color]').html($.user.hairColor);

      //more data will be added here ...

});

マークアップは、いくつかの場所で次のようになります。

<div class="data incident_result bubbled_box" data-type="user_data">
<h3>Some heading</h3>
<ul>
    <li>Username:       <span class="data highlight name" data-type="user_name">Igor Wassel</span></li>
    <li>User location:  <span class="data" data-type="user_location">Estonia</span></li>
    <li>Provider:       <span class="data" data-type="incident_date">21/08/11</span></li>
</ul>

マークアップの他の場所には他のデータが含まれますが、完全に異なる html 構造内にあります。

4

1 に答える 1

1

データ属性を使用して JavaScript でコンテンツを編集することの欠点はありますか?

いいえ、これらの属性に書き込み、JavaScript で読み戻さない限り。残念ながら、あまりにも多くの人がそうしています。DOM は JavaScript の状態を保存する場所ではありません。

dataそれ以外の場合は、 -attributesを介してサーバーからクライアント側にデータを送信してもまったく問題ありません。data完全にフェイルセーフを維持するには、すべての-attributesに共通のプレフィックスを追加します。

属性値で要素を選択することがパフォーマンスに優れているとは思えません。のようなメソッドgetElementsByNameは、タスク用に最適化されています。

少なくとも、内部の jQuery ループを拡張しfindて、すべての要素を反復処理し、それらの値を自動的に取得することができます。

$('.data[data-type=user_data] *').each(function (el) {
    el = $(el);
    type = el.data('type');
    if (type) {
        el.html($.user[type.toCamelCase()]);
    }
});

String.prototype.toCamelCase = function () { /* implement me */ };

HTML5 doctype 宣言を忘れないでください。

于 2011-09-30T10:54:02.250 に答える