0

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

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

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

4

3 回答 3

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

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

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

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

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

于 2012-09-10T19:27:21.610 回答
0

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

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

于 2012-09-10T19:22:53.090 回答
0

您有多种选择：

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

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

于 2012-09-10T19:27:10.533 回答