Question

我从这样的Ajax请求中获取一个json对象：

"items":[      
  {  
      "id":923,
      "id_str":"608475747557236737",
      "uid":407388514,
      "date":"Wed Jun 10 03:28:17 +0000 2015",
      "status":0,
  },
  {  
     "id":923,
      "id_str":"608475747557236737",
      "uid":407388514,
      "date":"Wed Jun 10 03:28:17 +0000 2015",
      "status":0,
   }
]

我循环json对象并生成HTML元素。

我的问题是，如果最好将json信息存储在每个HTML元素中，例如我们：data-prop1=""，data-prop2=""等，我将数据保存在javascript var like array中吗？

HTML元素的信息将通过Ajax请求再次发送到服务器，所以我想存储和恢复发送。

Answer 1

从性能的角度来看，将它存储在变量中而不是直接存储在HTML元素上要好得多

DOM操作昂贵（选择/访问该HTML元素）其中包含数据）。
它也是最兼容浏览器的方式由于data attributes仅适用于HTML5浏览器

console.log它也更容易，并在您的开发人员工具中进行检查。

就个人而言，我只在需要为每个元素存储少量信息（例如几个属性）时使用data-*属性，并且该信息将通过直接点击/悬停事件发送关于元素本身 - 否则将它存储在DOM中对我来说没有多大意义。

没有阻止你在DOM上保存整个JSON，如果你发现它更容易 - 但是如果你继续这样做，你将会得到一个非常复杂的标记和一个看起来很糟糕的模式

Answer 2

我目前正在处理类似的情况，并且我已经选择在客户端上实现一个保存信息的模型，因为将所有内容存储在DOM中可能会对整体性能造成损害。< / p>

换句话说，我有一些HTML代码，例如

<div id='element-1' class='element'>foo</div>
<div id='element-2' class='element'>bar</div>
<div id='element-3' class='element'>baz</div>

对应于收到的数据

[{id:1, text:'foo'}, {id:2, text:'bar'}, {id:3, text:'baz'}]

而不是使用DOM我有一个保存数据的模型对象，可以从任何地方访问，并有方法搜索数据，渲染它等等。

此类对象的一个非常简单的示例可能如下所示：

function Model() {

    this.data = []; //after recieving the data via Ajax it is stored here

    this.find = find;
    function find(id) {
        //cycle through data and return the correct record
    }

    this.render = render;
    function render(id) {
        var obj = find(id);

        // find the element with $('#element-'+id) and update it's text
    }

    this.update = update;
    function update(id, text) {
        var obj = find(id);
        obj.text = text;
    }        
}

优势在于，您不会使DOM变得沉重，并且您可以保持数据清晰有序，而且必须保持显示的数据和模型数据保持同步。

Answer 3

我建议不要在html中存储任何地方，因为你要将元素传递给另一个ajax请求。所以只需在javascript中创建变量并将其临时存储。

存储JSON：Javascript与HTML

3 个答案: