用Javascript / JQuery（DRY方式）动态替换HTML

Question

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

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

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

Answer 1

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

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

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

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

另一种方法是简单地使用.hide（）和.show（）来讨论相关内容。使用.detach（），你可以选择在网页的另一个地方追加你想要的状态元素，而不是修复它（比如在另一个div中）。

Answer 2

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

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

Answer 3

您有多种选择：

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

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