如何使用 javascript 和模板构建 DOM？答案

【问题标题】：How to build the DOM using javascript and templates?如何使用 javascript 和模板构建 DOM？
【发布时间】：2008-10-14 18:33:13
【问题描述】：

我正在构建一个应用程序，其中大部分 HTML 都是使用 javascript 构建的。 DOM 结构是使用从服务器发送的一些 JSON 数据结构构建的，然后客户端代码为该数据构建 UI。

我目前的做法是遍历 JSON 数据结构，并调用 script.aculo.us 的 Builder.node 方法来构建 DOM 结构，然后将其附加到实际上在从服务器发送的 HTML 中的某个元素上。在此过程中，我将事件侦听器注册到需要它们的各种元素。这提供了很大的灵活性，并允许使用非常动态的界面。

但是，我觉得这不是很可持续，因为视图逻辑（即 DOM 结构）与遍历数据的代码、事件处理程序以及保存在内存中的数据紧密耦合维护状态，并能够将这些更改传回服务器。

是否有任何类似模板的解决方案可以让我将 DOM 结构与驱动应用程序的代码分离？目前，我唯一依赖的库是prototype.js和script.aculo.us，所以我想避免引入任何大型库，但欢迎任何建议。

谢谢！

编辑：由于某种原因，当我输入这个问题时，What good template language is supported in Javascript? 没有出现在小搜索结果中。但是，它确实会显示在此处的“相关”侧边栏中。

我会阅读那里的一些建议，如果我找到解决方案，我会关闭这个问题。否则，我会澄清这个问题，说明为什么这些解决方案对我不起作用。

【问题讨论】：

标签： javascript templates

【解决方案1】：

市面上有一些模板解决方案，但它们的作用并不比您已经做的多。 jQuery 一直在做一些work along these lines，一些 jQuery plugins 已经成为解决方案。 Prototype.js 等也有解决方案。

一些选项包括：

一般来说，Ext js 有一些非常狂野和欺骗的东西，包括一些templates，但你会添加另一个库。这些天来，很多库都被折腾了，实现轻巧自定义解决方案通常要简单得多。尝试自己创建一些 DOM 对象。如果您有 JSON 数据，请将其解析到内存中并通过函数运行。这实际上是一个爆炸，很多人都在这样做。

旁注： 您正在做的事情可能非常可持续和可维护。请记住，当您发送 HTML 页面时，浏览器会将 DOM 结构放入内存，其方式与您的 javascript 所做的大致相同。我不特别推荐任何这些解决方案。听起来您已经为您的特定需求制作了一个不错的小系统，我通常会说改进您的设计至少与迁移到其他人的模式一样有价值，而且还有额外的好处能够创建一些您自己的依赖项。

旁注： 一般不建议在客户端生成整个 DOM，至少对于许多市场而言并非如此。有时它是一个 A-OK 解决方案，就像您的情况一样，但需要提醒广大观众注意的是，这种开发方式并不总是最好的旅行方式。

【讨论】：

也许我应该说“可维护”而不是“可持续”。我不太担心性能（尽管对 jsp 页面发出无数 AJAX 请求是不可接受的）。我最担心的是将来要更改部分的结构。
啊。 - 听起来您想要一种灵活的方式来更改 DOM 对象的构造。可能是 Builder.node 为您处理了太多的构造，以至于您的控制权比您想要的要少。尝试自己构建对象。从 JSON 开始，它应该很容易，并且您将掌控一切。

【解决方案2】：

有几个用于 jQuery 的“模板”插件：

有一些 XSLT 附加功能可以在客户端中进行所有转换，但我认为 XSL 不够“设计师友好”

【讨论】：

【解决方案3】：

您的模板可以封装在一个小部件中。 Prototype 可以创建附加组件，但我最熟悉如何在 jQuery 中执行此操作。我首先尝试了原型，但后来意识到 jQuery 拥有所有原型等等。它还有更多由用户社区创建的附加组件/小部件/插件。

Builder 只是原型的附加组件。然而，在 jQuery 中构建 html DOM 元素是核心功能的一部分。

http://docs.jquery.com/Core/jQuery#html 结合： http://docs.jquery.com/Manipulation/append#content

这里是构建一些 html 并将其添加到 jQuery 元素选择的示例。

$(document.body).append($('<div id="sub-menu-holder" style="position:absolute;top:0;left:0;border:0px none;"></div>'));

您还可以从 ajax 调用中获取数据结构并使用它来创建实体，或者您可以从 ajax 调用中返回 html 并将其直接附加到适当位置的 DOM。

http://docs.jquery.com/Ajax/load#urldatacallback

这是来自 jquery 加载函数文档的示例。

$(文档).ready(函数(){ $("#links").load("/Main_Page #jq-p-Getting-Started li"); });

就是这样。如果您的 ajax 调用返回所有要插入的 html，并且您知道它所在的元素 id，这就是您所需要的。现在您需要确定如何在服务器端创建 html。在不知道您正在构建的内容的具体细节的情况下很难回答。但是您在服务器端的模板引擎不需要知道生成的 html 的放置位置。

【讨论】：

【解决方案4】：

如果我理解这个问题，您是否希望能够动态构建 GUI，但基于预定义的 HTML 模板？我知道当有一种非常好的语言 (HTML) 可以做同样的事情时，我经常对使用 JS 构建 DOM 感到奇怪。

您可以将 XMLHttpRequests 用于 XHTML 的样板块，然后在您的代码中根据需要修改这些块。当我这样做时，我发现它提供了更令人满意的逻辑和表示分离。

【讨论】：

【解决方案5】：

ExtJS 具有出色的模板语法： link text

【讨论】：

【解决方案6】：

QueryTemplates 允许您将标记与逻辑完全分离。它使用 DOM 和 CSS 选择器来实现这一点。它有 JavaScript 的轻量版本（作为 jQuery 插件）和标准版本，可以生成原生 JS 代码（不需要库来执行它）。您需要 PHP 来生成标准版本的模板（CLI 版本很好）。库基于 phpQuery，一个 PHP 的 jQuery 端口。

你可以看到demo of JavaScript version。使用标准版本，您可以在 PHP 中获得相当好的客户端体验 - 有 DOM 事件、JSON 支持，甚至是带有 JSONP 的 AJAX。

【讨论】：

【解决方案7】：

如果您使用Script#，您可能需要考虑SharpTemplate，这是一个强类型、超高效的HTML 模板引擎。

【讨论】：

【解决方案8】：

你可以看看soma-template，语法很轻量级。

纯 DOM 操作，许多特性，自然语法，可与其他库（如 underscore.string）完全扩展，带参数的函数调用、帮助程序、观察程序。能够在需要时仅更新某些节点，DOM 本身内的模板。

http://soundstep.github.com/soma-template/

【讨论】：