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

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

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

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

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

谢谢

编辑：由于某种原因，当我输入这个问题时，没有出现在小搜索结果中。然而，它确实显示在这里的“相关”侧栏中

---

我将通读其中的一些建议，如果我找到了解决方案，我将结束这个问题。否则，我将澄清这个问题，并说明为什么这些解决方案对我不起作用。

jQuery有几个“模板”插件：

---

有一些XSLT额外功能可以在客户机中完成所有转换，但我认为XSL不够“对设计人员友好”

有一些模板解决方案，但它们所做的工作并不比您已经做的更多。jQuery已经做了一些工作，一些jQuery已经作为解决方案出现。Prototype.js和其他人也有解决方案

一些选项包括：

一般来说，它有一些相当的狂野和被欺骗的东西，包括一些，但您将添加另一个库。现在有这么多的库被丢弃了，实现一个轻量级的、简单的定制解决方案通常要简单得多。尝试自己创建一些DOM对象。如果您有JSON数据，请将其解析到内存中，并通过函数运行它。这实际上是一场爆炸，很多人都在做

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

旁注：

---

通常不建议在客户机上生成整个DOM，至少对许多市场不建议。有时，它是一个A-OK解决方案，在您的情况下可能是这样，但值得向广大观众提醒的是，这种开发方式并不总是最佳的选择。

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

---

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

ExtJS有一个优秀的模板语法：

---

您的模板可以封装在小部件中。Prototype有一种创建附加组件的方法，但我最熟悉如何在jQuery中实现这一点。我首先尝试了prototype，但后来意识到jQuery拥有prototype拥有的一切以及更多。它还有更多由用户社区创建的附加组件/小部件/插件

生成器只是原型的一个附加组件。然而，在jQuery中构建HTMLDOM元素是核心功能的一部分

结合：

下面是构建一些html并将其添加到jQuery元素选择中的示例

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

$（document.body）.append（$（''）；

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

以下是jquery加载函数文档中的示例

$（文档）.ready（函数（）{ $（“#links”）.load（“/Main#Page#jq-p-Getting-start-li”）； });

就这样。如果您的ajax调用返回所有要插入的html，并且您知道元素id所在的位置，那么这就是您所需要的。现在，您只需要确定如何在服务器端创建html。不知道你正在建设的具体细节是很难回答的。但是服务器端的模板引擎不需要知道生成的html将放在什么地方。

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