javascript - 在 jQuery 中处理数据

Question

我想问的是更多的意见而不是问题:当你必须制作一个包含大量数据的网页时，社区会建议你做什么，例如，产品列表，如果你必须操作数据，它应该具有购买(添加到购物车)、排序等功能当前产品——价格、标题、图片、链接和其他属性？您在项目中是如何做到的？

例如我们有一个包含几十个产品的页面，每个产品都有属性:价格、标题、描述、图片(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 并在我们的对象“products”中查询它:

var url = products[id].title;

虽然这是使用它的最方便的方法，但它需要一个新对象。

另一个想法是将所有数据保存在父 div 元素的 data- 属性中，例如:

<div class="product" data-product_id="123" data-title="abc" data-body="Body">

但据我所知，jQuery 不能很好地(原生)处理数据属性。

那么你有什么建议呢？也许您有一些更好的想法可以分享。

附言我试图找到有关该主题的一些信息，但很可能找不到很好地表达它的方法，所以我一无所获。如果堆栈交换站点上有链接或类似问题，请随时发布。提前致谢!

Answer 1

您可以使用 HTML5 data 属性来存储产品数据，因为您有多个产品属性与每个产品 block 相关联，您可以 JSON 编码 对象并分配给顶部元素，然后可以在该元素或任何子元素上的用户交互中访问它。

var product = {
    title: "abc",
    description: "lorem ipsum",
    price: 25.19,
    img: "http://www.www.www/img.png",
    link: "http://www.stackoverflow.com"
};
$(selector).data('product',JSON.stringify(product));

然后检索您可以在任何事件的回调中执行的对象

$product = $.parseJSON($(elem).data('product'));

事实上 facebook 和 twitter 都使用数据属性来存储与 tweets 和 stories 相关的数据。例如这里有一些 html 的 FB 故事

<li data-ft='{"qid":"5757245005920960301","mf_story_key":"7164261693049558180"}'
 id="stream_story_4fe5d7d51bc415443080257">

您可以看到 facebook 正在将 JSON 编码数据存储到 data-ft 属性中。

类似 Twitter tweet html 的例子

<div data-tweet-id="216534496567230464" data-item-id="216534496567230464" 
data-screen-name="onimitch" data-user-id="123682011" data-is-reply-to="">

所以 twitter 将推文的相关数据保存到不同的属性中，例如 data-tweet-id、data-user-id。

因此，由于它们都处理大量数据，我认为您也可以使用其中任何一种方法来保存数据，而不会出现任何性能问题。

如果您使用单独的键存储数据，请注意 .data() 所做的自动数据转换，@nnnnnn 已经在评论中提到过。

.data() 演示: http://jsfiddle.net/joycse06/vcFYj/

.attr() 演示: http://jsfiddle.net/joycse06/vcFYj/1/