Question

我是一个非常直观的程序员/设计师，我为我的项目开发了一个迷你框架，用于显示来自PHP输出的数据。

基本上我设计了我的页面并设置了div和li块，以便使用我的IDE，Dreamweaver进行循环和显示。我只是使用Javascript在目标div / li元素上执行字符串替换例程来生成内容。我想你可以说我的设计在视觉上就是模板本身。更改起来要容易得多：之前，我设计它然后复制并粘贴要循环到PHP的块的HTML代码，并在那里进行值填充。

基本上我的PHP脚本输出一个对象，我的Javascript函数可以完成魔术并根据需要生成（附加到元素）。

这一直很有效，直到我开始处理大量的表数据（大约2000行）。我注意到浏览器在尝试生成内容时暂停了一下，并且在桌面上 - 我想象当我的页面在移动设备上运行时，它会慢多少。

这让我想到，我应该回到后端生成内容并在JS /浏览器端做一个简单的输出吗？我喜欢在JS中操纵数据行，并且在页面上保留所有模板代码在视觉上更方便，就像在哪里一样，并且让Javascript只是选择并使用它来生成内容。我讨厌让PHP生成实际的html代码。

在这种情况下你会推荐什么？

P.S。：对于那些想要建议减少数据限制显示的人：在这种情况下，我不能。我必须显示没有分页的所有返回的行。我有我的理由/要求。

Answer 1

简单实现underscore.js

<table class="outer">
<thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
</tbody>

<div class="outer">

<div class="th">Id</div>
<div class="th">Name</div>

<p>&nbsp;</p>
</div>
<script type="text/html" id='table-data'>

<% _.each(items,function(item,key,list){ %>
    <tr>
        <td><%= key %></td>
        <td><%= item.name %></td>
    </tr>
<% }) %></script>
<script type="text/html" id='div-data'>

<% _.each(items,function(item,key,list){ %>
    <div><%= key %></div>
    <div><%= item.name %></div>
<% }) %></script>

获取数据并填充

var items = [
{name:"Nick"},
{name:"Lee"},
{name:"Jenny"},
{name:"Julie"},
{name:"Dennis"},
{name:"Shawn"},
{name:"Justin"},
{name:"Scott"},
{name:"John"},
{name:"Sherell"},
{name:"Janie"},
{name:"Graham"},
{name:"Erica"}]

var tableTemplate = $("#table-data").html(),
divTemplate = $("#div-data").html();
$("table.outer tbody").html(_.template(tableTemplate,{items:items}));
$("div.outer p").before(_.template(divTemplate,{items:items}));

用于显示大量表格数据的Javascript性能建议

1 个答案: