客户端模板框架使用带有 REST/JSON 的 jQuery 进行简化 [关闭]答案

【问题标题】：Client-side templating frameworks to streamline using jQuery with REST/JSON [closed]客户端模板框架使用带有 REST/JSON 的 jQuery 进行简化 [关闭]
【发布时间】：2011-01-13 23:32:05
【问题描述】：

我开始将一些 html 生成任务从服务器端框架迁移到客户端。我在客户端上使用 jQuery。我的目标是通过 REST api 获取 JSON 数据，并使用这些数据将 HTML 填充到页面中。

现在，当我网站上的用户单击指向我的项目的链接时，服务器会生成如下 HTML：

<dl>
    <dt>Clean Toilet</dt>
    <dd>Get off your butt and clean this filth!</dd>

    <dt>Clean Car</dt>
    <dd>I think there's something growing in there...</dd>

    <dt>Replace Puked on Baby Sheets</dt>
</dl>

我正在更改这一点，以便单击 我的项目 现在会执行一个 GET 请求，该请求会返回如下内容：

[
  {
    "name":"Clean Car",
    "description":"I think there's something growing in there..."
  },
  {
    "name":"Clean Toilets",
    "description":"Get off your butt and clean this filth!"
  },
  {
    "name":"Replace Puked on Baby Sheets"
  }
]

我当然可以编写自定义 jQuery 代码来获取该 JSON 并从中生成 HTML。这不是我的问题，我不需要关于如何做到这一点的建议。

我想做的是将表示和布局与逻辑（jquery 代码）完全分开。我不想通过 jQuery 代码创建 DL、DT 和 DD 元素。我宁愿使用某种可以填充数据的 HTML 模板。这些模板可能只是隐藏在加载应用程序的页面中的 HTML sn-ps。或者它们可以从服务器动态加载（以支持用户特定的布局、i18n 等）。它们可以显示一次，也可以循环和重复。也许它应该支持子模板，if/then/else 等等。

我的网站上有很多以多种不同方式呈现的列表和内容。我正在寻找一种简单且一致的方式来生成和显示内容，而无需为我网站上的每个不同功能创建自定义 jQuery 代码。对我来说，这意味着我需要在 jQuery 之上找到或构建一个满足这些要求的小框架（可能作为插件）。

我发现的唯一一种类似这样的框架是jTemplates。我不知道它有多好，因为我还没有使用它。乍一看，我对它的模板语法并不感兴趣。

有人知道我应该研究的其他框架或插件吗？有任何博客文章或其他资源讨论做这种事情吗？我只是想确保在自己构建之前，我已经调查了所有内容。

谢谢！

【问题讨论】：

标签： json rest jquery-plugins jquery

【解决方案1】：

自从发布此问题以来，我发现了许多其他模板选项。我在下面列出了其中的许多。然而，最近有一个jQuery templates proposal 可能是最有希望的解决方案。 jquery 网站上还有一个discussion about it。这里是项目位置：

https://github.com/nje/jquery/wiki/jquery-templates-proposal

我遇到的其他解决方案包括（排名不分先后）：

【讨论】：

【解决方案2】：

听起来你想要 sammy.js

http://code.quirkey.com/sammy/

那里的教程演示了模板引擎的使用

【讨论】：

谢谢！我听说过 sammy，但还没有研究过。没有意识到它也做模板。我去看看。

【解决方案3】：

我已经多次使用 jTemplates，根据我的经验，它达到了预期的目的。

如果我们将讨论限制在客户端，那么这是我对此事的最后评论，因为它可以完成这项工作，尽管一些时髦的语法做得很好，但是在服务器端，我肯定更喜欢这样的场景您发布一些反序列化到内存中对象的 JSON，然后验证并传递到服务器端模板（例如 ASP.NET 中的 ASCX），您可以在其中拥有该语言的全部功能。

在我看来，如果客户端对 JavaScript 的支持足以让您考虑使用 jTemplates，那么我建议您设置一个 JavaScript 实用程序方法，该方法允许您发送 JSON 和接收 HTML，从而消除潜在的麻烦中间人。大多数语言都具有 JSON 解析能力，jQuery 可以通过将返回类型指定为“json”来将服务器响应自动解析为 JSON。

即使您没有收到来自 JavaScript 的 JSON，您仍然可以将本应发送回浏览器的 JSON 改为通过服务器端模板发送。在 ASP.NET（例如使用 MVC）中，您可以拥有不需要编译的强类型模板文件，从而使更改更容易实现。因此，您仍然会发回标记，但它会通过适当的模板运行，并在其背后具有编程语言的全部力量。

【讨论】：

感谢您的观点，但就我而言，重点是远离服务器端的 HTML 生成。每个数据项都有很多属性，包装所有这些属性所需的所有 HTML 显着增加了响应的大小。当我将它乘以数百个数据元素时，我的 HTML 响应可能比原始数据本身大很多倍。既然我的应用程序使用 ajax 并且需要 javascript，为什么不直接在浏览器中渲染呢？
如果有数百个数据项，JavaScript 渲染标记的性能将远不如 C# 或 PHP 等服务器端语言。将它与 gzip 和 AJAX 缓存结合起来，这不再是一个真正的问题。除非您真的担心 2010 年的 CPU 时间，否则没有真正的理由将负担放在访问者身上并增加渲染时间。
渲染时间和带宽并不是我选择这个方向的唯一原因。但是，任何具有最新浏览器的非古代计算机都不应该对我所考虑的任务造成太大负担。您是否暗示 jqGrid 控件 (trirand.net/demophp.aspx) 下载和呈现通过 JSON/REST 检索到的 1000 行数据所需的总时间比下载已格式化的 HTML 并用它替换网格的 innerHTML 需要更长的时间？我敢肯定，任何一种方式都可以忽略不计。
我会说它在某种程度上可以忽略不计，但是 JavaScript 和 C# 迭代集合之间的区别是巨大的。在 jqGrid 之类的情况下，我会说传回一些简单的 TR 元素比让您的服务器将对象的每个属性序列化为 JSON 并将整个数据集发送过来更有效。使用标记方法不仅您的服务器只访问网格所需的字段，而且客户端只下载它需要显示的字段。