我想问更多的意见而不是一个问题：当你必须做一个包含大量数据的网页时，社区会建议做什么，例如，一个产品列表，应该有一些功能，比如购买（添加到购物车） 、排序等，如果非要操作当前商品的数据——价格、标题、图片、链接等属性？你如何在你的项目中做到这一点？
例如，我们有一个包含几十个产品的页面，每个产品都有属性：价格、标题、描述、图片（URL）、链接（URL）。您将如何存储数据以在某些用户交互中使用它？就个人而言，我只是通过在标签中插入每个属性来完成它，例如：
<div class="product" data-product_id="123">
<div class="pr_title">Title</div>
<div class="pr_body">Body</div>
<div class="pr_img"><img src="http://www.www.www/img.png"></div>
<div class="pr_link"><a href="http://www.stackoverflow.com/">Buy!</a></div>
</div>
这样，我就有了用于演示的 html 结构，并通过以下方式在 jQuery 中处理数据：
var url = $('.product').find('.pr_link').find('a').attr('href');
但是当项目变大并且每个元素添加了 10-15 个以上的属性时，从当前产品中获取数据变得非常复杂，并且代码变得几乎不可读。
我想过使用相同的结构，但要将数据保存在某个对象中，例如：
var products = {
1: {
title: "abc",
description: "lorem ipsum",
price: 25.19,
img: "http://www.www.www/img.png",
link: "http://www.stackoverflow.com"
}
}
并保持标记尽可能简单，仅使用 css 设计所需的元素和样式：
<div class="product" data-product_id="123">
<div class="title">Title</div>
<div>Body</div>
<img src="http://www.www.www/img.png">
<a href="http://www.stackoverflow.com/">Buy!</a>
</div>
所以onClick我需要检索产品的 id 并在我们的对象“产品”中查询它：
var url = products[id].title;
虽然这是最方便的使用方式，但它需要一个新对象。
另一个想法是将所有数据保存在data-父 div 元素的属性中，例如：
<div class="product" data-product_id="123" data-title="abc" data-body="Body">
但据我所知，jQuery 不能很好地处理数据属性（本机）。
那么你有什么建议呢？也许你有一些更好的想法要分享。
PS我试图找到有关该主题的一些信息，但很可能未能找到很好的表述方式，因此我一无所获。如果堆栈交换站点上有链接甚至类似的问题，请随时发布。先感谢您！