在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并在我们的对象"产品"中查询它:

var url = products[id].title;

虽然这是最方便的工作方式,但需要一个新对象.

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

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

但就我所知,jQuery不能很好地(原生地)使用数据属性.

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

PS我试图找到关于这个主题的一些信息,但很可能没有找到制定它的方法,所以我一无所获.如果堆栈交换网站上有链接或类似问题,请随时发布.先感谢您!

Answer 1

您可以使用HTML5 data属性来存储产品数据,因为您有几个与每个产品块关联的产品属性,您可以JSON encode将对象分配给顶部元素,然后可以在该元素或任何子元素的用户交互上访问该元素.

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.例如,这里有一些FB故事的html

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

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

同样是Twitter tweethtml的一个例子

<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/