書籍のリストがあり、各書籍のデータ（価格、数量、ID、カテゴリID、サイズ、重量など）を保存したいと思います。
私は、データ属性を使用してリスト内の各本を表すli要素を拡張することにより、これらすべてをdomに格納することを検討していました。このデータは、javascriptで直接利用できます。
ただし、データ属性へのアクセスはパフォーマンスの意味で遅いことを読みました。さらに、同じ本の複数のインスタンスを持つことができるので、htmlの肥大化について少し心配しています。
別の方法は、JSオブジェクトを使用して各本のデータを保存することです。
だから私の質問は、フロントエンド、DOMまたはJavscriptにデータを保存するためのベストプラクティスは何ですか？
前もって感謝します
属性は通常、data-JavaScript にデータを取得する方法として (つまり、サーバー側のテンプレートから) 使用され、実行時にデータを格納する場所としては使用されません。特にスクリプトの実行中に頻繁にアクセスまたは操作する場合は、アクティブなデータを JavaScript オブジェクト内に保持することをお勧めします。
これは、データがモデルに存在するが、ビューで表現される可能性がある MVC アプローチとより一致しています。このため、AngularJS などの新しい MVC フレームワークの一部は、2 つの間の自動双方向バインディングを提供します。
どちらを選択するかは、アプリケーションのアーキテクチャとアプリケーションの機能の種類によって異なります。シングルページアプリを構築している場合、適切に構築されたjsonオブジェクトを優れたテンプレートプラグインと組み合わせて使用すると、機能の面ではるかに柔軟性が高くなることがわかりました。
jsonのIDでデータのインデックスを作成し、そのIDを「data-」要素に保存すると、JSON構造を検索しなくても、ブラウザーのイベント（クリックなど）に対応するための優れた方法が得られることがわかりました。JSON構造を使用すると、DOMからデータを再構築しなくても、リストの並べ替えやその他のグローバル操作などの操作を簡単に実行できます。この方法は、フレームワークのようなMVCを使用する場合や、独自の「監視可能な」データ構造を実装する場合にも適しています。
一方、主にサーバー側のコードを使用していて、ページに「データ」データを利用する基本的な機能（クリックで本の詳細を表示するなど）しかない場合は、おそらく「data-」属性を使用して、追加の詳細を保存します。
DOMそれを要素に格納することとデータをJavaScriptオブジェクトとして保持することの違いは、最初のケースではデータとDOM要素が直接関連しているのに対し、2 番目のケースでDOMはデータの関連を維持するために何らかの方法で同様のデータと構造を保持する必要があることです。にDOM。2 番目のケースは、聞こえるように、エラーが発生しやすくなります。これは、のすべての変更がDOMデータに反映され (要素の追加/削除/変更)、データのすべての変更が (要素の追加/削除) に反映されてDOMいることを確認する必要があるためです。データ メンバーの削除/変更)。
属性の場合、data-*データは DOM から直接アクセスされるため、この 2 つはすでに結び付けられており、少なくとも私の意見では、はるかに優れた方法です。ただし、コメントで述べたように、data-*属性に伴う DOM 取得のオーバーヘッドがあります。
DOMパフォーマンスの点では、要素の属性またはオブジェクトとしてデータをメモリに格納する必要がありJavaScriptます。要素属性の取得DOMは、実際にはよりコストがかかりますが、より便利です。data-*属性には機能的な意味がないため、レンダリングは属性の影響を受けません。