Javascript 在jQuery中处理数据

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

例如，我们有一个包含数十种产品的页面，每种产品都有属性：价格、标题、描述、图像（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>

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>

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

另一个想法是将所有数据保存在父div元素的

data-

属性中，如：

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

但据我所知，jQuery不能很好地（以本机方式）处理数据属性

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

---

另外，我试图找到一些关于这个主题的信息，但很可能找不到很好地表述它的方法，所以我什么也没找到。如果stack exchange网站上有链接或类似问题，请随时发布。提前谢谢你

不需要遍历整个对象树。 如何放置ID：

<div class="pr_link" id='id_link_123'><a href="http://www.stackoverflow.com/">Buy!</a></div>

---

不需要在DOM中使用ID或引用。保持清洁

只需在jquery中使用data（）函数并将其绑定到html元素。这样，当您单击每个元素时，您将能够通过在单击事件中调用它来获取对象

//loop through your elements in the dom or build them dynamically. 
$.each('div.products', function(){
 $(this).data('product', <your data>);
};

//assign a handler to each element and grab the data object by using this. :)
$(container).delegate('.products', 'click' function(){
  console.log($(this).data('product'))
});

//在dom中循环或动态构建元素。
$.each（'div.products'，function（）{
$（此）.data（'产品'）；
};
//为每个元素分配一个处理程序，并使用以下命令获取数据对象：）
$（容器）.delegate（“.products”，“click”函数（）{
console.log（$（this.data（'product'））
});

你应该试试AngularJS。它与jQuery配合使用非常好，而且很容易学习。AngularJS包含双向数据绑定，并通过新属性和元素扩展HTML。最后但并非最不重要的是谷歌的MVC框架。更多信息请参见

我不建议您将数据保存在对象中并用它填充HTML

原因如下：

• 所有黑客都可以窃取您的数据
• 当您的数据太大而无法获取时，您的页面最初可以在没有数据的情况下加载—这是任何web开发人员都不希望看到的
• 同样，当您的数据太大时，旧计算机—大约有512M Ram的计算机—可能会出现死锁
• 当数据太大时，遍历或排序可能会花费太多时间

据我所知，您的数据至少静止5分钟。。我的建议是,

• 使用服务器端语言（PHP、ASP（.NET）、Python等）放置数据
• 当脚本需要时，分别使用查询获取数据
• 您不需要的任何东西都是用户的成本，用户的浏览器中可能有很多页面，这也会导致死锁

---

p、 任何细节都会帮助我帮助你。

DOM和jQuery的结合是Web最强大的功能之一。你并不是把它们都拿走

让DOM帮助您并为您工作。更好地组织DOM。全部拿去吧。您的示例可以通过以下方式进行优化：

<div class="product" data-product_id="123">
  <div class="pr_title">Title</div>
  <div class="pr_body">Body</div>
  <img class="prodcut-image" src="http://www.www.www/img.png">
  <a class="product-link" href="http://www.stackoverflow.com/">Buy!</a>
</div>

我相信你的问题在于你忘记了CSS选择器的工作方式。没有必要横穿DOM的每一层

你可以在你的例子中去掉一些DIV。一个不需要的链接必须是串联的。CSS规则可以使它们像DIV一样工作。

您可以通过jQuery使用HTML中的数据属性。从服务器数据创建DIV时，可以执行以下操作：

$('.product').data(yourProduct); // yourProduct would be the JSON representation of the data

要检索：

var url = $('product').data('product-link'); // if the JSON object has a product-link property that is.

---

上面提到的向浏览器公开数据的警告当然仍然有效，因此请小心。

您可以使用

HTML5

data

属性来存储产品数据，因为您有多个产品属性与每个产品块相关联，您可以对对象进行

JSON编码

并将其分配给top元素，然后在该元素或任何子元素上的用户交互中访问该元素

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

因此twitter将tweet的相关数据保存到不同的属性中，如

数据tweet id

，

数据用户id

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

如果使用单个键存储数据，请注意

.data（）

所做的自动数据转换，正如@nnnn在注释中已经提到的那样

使用.data（）进行演示：

---

使用.attr（）演示：

尽管有许多优秀的客户端mvc框架，但请查看，这是一个功能强大但易于使用的框架，用于管理数据源（通常是http服务器）和DOM之间的接口。简言之，它保持“

作为一个人为的例子，如果你正在创建一个简单的通讯录应用程序，你可能会有一个客户端<

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'));

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

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