推荐用于 JQuery 的 JavaScript HTML 模板库？ [关闭]

Posted 2023-02-24

【中文标题】推荐用于 JQuery 的 JavaScript HTML 模板库？ [关闭]

【英文标题】：Recommended JavaScript HTML template library for JQuery? [closed]

【发布时间】：2010-10-01 18:38:06

【问题描述】：

关于哪个 html 模板库与 JQuery 搭配得好有什么建议吗？谷歌搜索出现了相当多的图书馆，但我不确定是否有一个公认的图书馆经得起时间的考验。

【问题讨论】：

假设你带回一个有 100 条记录的 json 对象。每条记录都需要生成相同的 html 片段。它只是有助于使用模板而不是在 js 中生成标记。允许设计者也可以设计它，而不是标记在 js 函数中的字符串内

@cletus - 因为使用 html 格式的模板比使用附加链更容易

使用此性能比较来帮助您做出选择：jsperf.com/dom-vs-innerhtml-based-templating

【参考方案1】：

好吧，坦率地说，现在客户端模板非常热门，但也很丛林。

我相信最受欢迎的是：

pure: 只用js，不是自己的 “语法” mustache: 很稳定很好看的我 听说过。 jqote2: 极快 根据jsperfs jquery 模板（已弃用）：

还有很多其他的，但您必须对其进行测试以了解最适合您的以及您的项目风格。

就我个人而言，我很难添加新的语法和一组逻辑（混合逻辑和模板，你好？？），并使用纯 js。我的每一个模板都存储在它自己的 html 文件 (./usersTable.row.html) 中。我只在 ajaxing 内容时使用模板，而且我的“逻辑”js 文件很少，一个用于表格，一个用于 div，一个用于列表。甚至没有一个用于选择的选项（我使用另一种方法）。

每次我尝试做一些更复杂的事情时，我都会发现代码不太清晰，而且我需要更多的时间来稳定，而不是用“旧”的方式来做。在我看来，模板中的逻辑完全是一派胡言，添加它自己的语法只会增加非常难以追踪的错误。

【参考方案2】：

jTemplates

javascript 模板引擎。

插件到jQuery...

特点：

100% 在 JavaScript 中 预编译器 支持 JSON 使用 Ajax 允许在模板中使用 JavaScript 代码 允许构建级联模板 允许在模板中定义参数 实时刷新！ - 从服务器自动更新内容...

【参考方案3】：

有一个关于这个主题的合理讨论文档here，其中涵盖了一系列模板工具。不过，并非特定于 jQuery。

【参考方案4】：

jQuery Templates Plugin 由 Microsoft 创建并被接受为官方 jQuery 插件。

但请注意它现在已被弃用。

【讨论】：

并且“弃用”了。开发已停止，并且不会退出测试版。一位女士和 jquery-ui 团队正在开发一个新模板，基于 JSRender thou ;)

嗯，真可惜 - 我在我的网络应用程序中都使用它 :( 不过感谢您的提示！您是否有关于您提到的即将推出的模板引擎的链接？

如果一切顺利，jsrender by boris moore 会找到进入 jquery-ui 的方式。我猜你不用着急;)

我在一个项目中实现了jsRender，简直太棒了。非常值得一试。

【参考方案5】：

我会查看json2html，它不必编写 HTML sn-ps，而是依赖 JSON 转换将 JSON 对象数组转换为非结构化列表。非常快并且使用 DOM 创建。

【讨论】：

免责声明 .. 我写了这个。但值得一试；）

【参考方案6】：

几年前我建立了 IBDOM：http://ibdom.sf.net/ |截至 2009 年 12 月，如果您直接从后备箱获取，它支持 jQuery 绑定。

$("#foo").injectWith(collectionOfJavaScriptObjects);

或

$("#foo").injectWith(simpleJavaScriptObject);

此外，您现在可以将所有“data:propName”标记放在 class="data:propName other classnames" 属性中，这样您就不必在应用程序的内容中乱扔这些标记了。

我尚未更新其中的大量文档以反映我最近的增强功能，但自 2007 年以来，我已经在生产中使用了该框架的各种版本。

对于这个问题的怀疑者：

当微软用 IE5 发明我们现在所知的 XmlHttpRequest 和“ajax”模式时，这背后的部分承诺是纯粹在 Web 浏览器和服务器之间交换数据。该数据将被封装在 XML 中，因为在 1999/2000 年，XML 简直就是太热了。除了使用回调机制通过网络检索 xml 文档之外，MS 的 MSXML ActiveX 组件还支持我们现在所知的 XSL-T 和 XPath 的预草案实现。

结合检索 HTTP/XML、XPath 和 XSL-T，为开发人员构建丰富的“文档”提供了巨大的创造力，这些“文档”充当“应用程序”，纯粹发送，更重要的是，从服务器检索数据。

为什么这是一个有用的模式？这取决于您的用户界面有多复杂，以及您对其可维护性的关心程度。

当使用高级 CSS 构建视觉上非常丰富的语义标记界面时，您要做的最后一件事是将标记片段分块到“迷你控制器/视图”中，这样​​您就可以 .innerHTML 文档片段进入主文档，原因如下。

保持高级 html/css 用户界面易于管理的一个关键原则是至少在其开发的活跃阶段保留其验证。如果您的标记通过验证，您可以专注于您的 CSS 错误。现在，如果标记片段最终在用户交互的各个阶段被注入，这一切都变得非常难以管理，整个事情变得脆弱。

我们的想法是将您的所有标记 UI 结构放在一个文档中，通过网络检索ONLY DATA，并使用一个可靠的框架，该框架至少可以简单地将您的数据注入到您的标记结构，最多复制您标记为可重复的标记结构。

这在 IE5+ 中使用 XSL-T 和 XPath 是可能的，但几乎没有其他浏览器。一些 F/OSS 浏览器框架一直在涉足 XPath，但目前我们还不能完全依赖它。

那么实现这种模式的下一个最佳方法是什么？ IBDOM。从您的服务器获取数据，将其注入您的文档中。毫不费力。

【讨论】：

还有一件事：IBDOM 使用 100% 纯 DOM 方法，以及零 innerHTML。

另一个注意事项：IBDOM 实现了我所说的“forkedLoopExecution”，它是一个内部使用的组件，也可以单独使用。这就是问题所在：假设您正在通过 createElement 和 appendChild 修改 DOM，在某种循环结构中必须遍历相当大的大数据对象数组：大多数浏览器不会“重绘”用户界面，直到影响 DOM 的代码“返回”。在包含大量数据的大型“for 循环”中，我们的搜索结果可能需要明显的半秒到几秒，然后才能将整个内容显示为一个块。

解决方案：forked-loop 执行在重复传递的数据收集的整个生命周期中利用 setTimeout 引发的递归执行，在每次循环迭代时本质上是“return-and-repaint”，给您这种即时渲染的感觉：“现在就给用户一些可以看的东西”。

【参考方案7】：

你应该看看 Javascript-Templates，这是一个在著名的 jQuery File Upload 插件中使用的小型模板引擎，由同一作者 Sebastian Tschan (@blueimp) 开发

https://github.com/blueimp/JavaScript-Templates

按照 Sebastian 制作的使用指南，只需删除此行

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

用这个替换它

$('#result').html(tmpl('tmpl-demo', data));

别忘了在你的 HTML 文件中添加 div 结果标签

<div id="result"></div>

享受