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

Question

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

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

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

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

谢谢！

编辑：出于某种原因，Javascript 支持什么好的模板语言？当我输入这个问题时，没有出现在小搜索结果中。但是，它确实显示在此处的“相关”侧栏中。

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

score 7 · Accepted Answer

有一些模板解决方案，但它们并没有比你已经做的更多。jQuery 一直在沿着这些方向做一些工作，并且一些 jQuery插件已经成为解决方案。Prototype.js 和其他人也有解决方案。

一些选项包括：

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

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

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

score 2 · Accepted Answer

jQuery 有几个“模板”插件：

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

score 2 · Accepted Answer

您的模板可以封装在一个小部件中。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 加载函数文档的示例。

$(document).ready(function(){ $("#links").load("/Main_Page #jq-p-Getting-Started li"); });

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

ExtJS 具有出色的模板语法：链接文本

于 2008-10-14T18:53:00.533 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

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

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

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

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

8 回答 8

Related

Reference