用 Javascript/JQuery 动态替换 HTML，DRY 方式答案

【问题标题】：Replace HTML on the fly with Javascript/JQuery, the DRY way用 Javascript/JQuery 动态替换 HTML，DRY 方式
【发布时间】：2012-09-10 19:14:54
【问题描述】：

我是前端开发的新手，我经常遇到的一个问题是在使用 JS/JQuery 动态生成 HTML 时不要重复自己。

让我们考虑一个具有多种状态的 DOM 对象。通常，你想要用 JS 做的就是从一种状态切换到另一种状态。但是通过在 DOM 对象上调用 html() 来执行此操作会使您在多个不同的位置（以及在 JS 文档中）编写相同的 HTML 代码。那么这样做的 DRY 方式是什么？

基本上，我想做的是在我的 HTML 文档中为每个状态预先编写一个示例 DOM（不改变文档结构），并且能够用我的状态的示例替换我的 DOM想要在飞行中。

【问题讨论】：

实际上有多少需要通过重写 DOM 来完成？以 DRY 方式更改页面外观和属性的一种技术是保持一致的结构，但更改 DOM 的类定义。这使您可以完全重新设置页面的样式。您还可以使用 .hide() 和 .show() 隐藏和显示元素。这可以避免将大量代码写入 DOM。相反，您有选择地重新设计和隐藏/显示
听起来你应该保留生成的 DOM，并切换类以显示/隐藏 DOM 的相关部分，而不是每次都尝试重建相同的区域。

【解决方案1】：

var state1= $(HTMLRootElement).detach();
$(document.body).append(state2);

只要您不丢失对 state1 变量的引用（否则它将被垃圾回收），您可以稍后再执行此操作：

var state2= $(HTMLRootElement).detach();
$(document.body).append(state1);

这样 HTML 元素仍然存在于内存中，只是不存在于 DOM 树上。

另一种方法是简单地 .hide() 和 .show() 有问题的内容。使用 .detach() 您可以选择将所需状态的元素附加到网页的另一个位置，而不是固定它（就像在另一个 div 中一样）。

【讨论】：

【解决方案2】：

在 javascript 中有不同种类的模板引擎。举几个 mustache.js 为例，underscore.js 有模板，jquery 也有模板（但 jQuery 版本从未超过 beta）。

当使用 javascript 做更复杂的事情时，您还可以考虑使用框架，如backbone.js、sammy.js 或 knockout.js（还有更多）。这些框架还大量使用模板（它们使用上面提到的模板）。

【讨论】：

【解决方案3】：

您有多种选择：

对于简单的对象，您可以为每个状态的 HTML 创建一个变量，然后使用 .wrap() 函数，与 .append() 或 .html() 链接来更新 DOM。

对于更复杂的 DOM 对象或交互，请使用 JS 模板系统：jquery 模板 (http://api.jquery.com/category/plugins/templates/) 或把手 (http://handlebarsjs.com/)。我强烈推荐后者，因为助手使它非常强大。

【讨论】：