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

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

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

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

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

Thanks!

编辑：由于某种原因，Javascript支持什么好的模板语言？ https://stackoverflow.com/questions/128949/what-good-template-language-is-supported-in-javascript当我输入这个问题时，没有出现在小搜索结果中。但是，它确实显示在此处的“相关”侧栏中。

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

有一些模板解决方案，但它们并没有比您已经做的多多少。 jQuery 已经做了一些沿着这些思路工作 http://ejohn.org/blog/javascript-micro-templating/，和一些 jQueryplugins http://plugins.jquery.com/project/jTemplates已作为解决方案出现。 Prototype.js 和其他人也有解决方案。

一些选项包括：

• 原型模板 http://www.prototypejs.org/api/template
• Ajax 页面 http://ajax-pages.sourceforge.net/

一般来说，Ext js http://extjs.com/有一些漂亮的狂野和欺骗东西，包括一些模板 http://extjs.com/deploy/dev/examples/core/templates.html，但你会添加另一个图书馆。现在有很多库被扔来扔去，而且实现一个库通常要简单得多轻巧简单定制解决方案。尝试自己创建一些 DOM 对象。如果您有 JSON 数据，请将其解析到内存中并通过函数运行它。这实际上是一件很轰动的事，很多人都在这样做。

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

边注： It's 一般来说不建议生成整个 DOM在客户端，至少对于许多市场来说不是。有时这是一个不错的解决方案，就像您的情况一样，但值得广大观众注意的是，这种开发方式并不总是最好的选择。