jQuery UI：加载 HTML 标记的最佳方式？答案

【问题标题】：jQuery UI: Best way to load HTML markup?jQuery UI：加载 HTML 标记的最佳方式？
【发布时间】：2010-09-26 03:37:00
【问题描述】：

为自定义 jQuery UI 小部件加载 HTML 标记的最佳方式是什么？

到目前为止，我已经看到了使用字符串（即$(...).wrap('<div></div>')）简单地创建的元素，这对于简单的事情来说很好。但是，这使得以后对更复杂的元素进行修改变得极其困难。

这似乎是一个相当普遍的问题，但我也知道 jQuery UI 库足够新，因此可能没有广泛接受的解决方案。有什么想法吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-plugins

【解决方案1】：

这是一件非常巧妙的事情：

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

这样，您正在创建一个元素，并将其引用存储在一个变量中，以供以后使用。

【讨论】：

好答案！值得考虑的是 DOM 操作可能代价高昂，因此在尝试任何操作之前尝试渲染加载所有 HTML 是值得的。还有一个约定是在任何 jQuery 变量前面加上 $。所以 newDiv 会变成 $newDiv。这有助于区分 jQuery 和非 jQuery 变量。
你实际上可以这样做... $('
').attr({ id: 'someid' // 更多属性 }).appendTo('body');跨度>
@RegionalC 当然，但我回答的重点是展示如何存储对元素的引用以供以后使用。
@AndreasGrech - 当然，我只是指出使用 jQuery 创建元素时不需要结束标记，并且可以一次设置多个属性。
@RegionalC：是的，很公平。

【解决方案2】：

如果您有大量复杂的 HTML，并且不想处理 JavaScript 代码中的硬编码字符串，可以将其放在单独的 HTML 文件中并使用Ajax load function。

它是可链接的，因此您可以加载 HTML 文件（整个文件或选定的片段），将其注入您当前的 DOM，然后继续前进。

【讨论】：

还值得一试 JS 模板引擎，例如 Underscore.js 中的那个 underscorejs.org/#template

【解决方案3】：

很多时候，对于非常复杂的模板，我只会将 html 块作为字符串存储在 JSON 对象中以供以后访问...例如：

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

然后在事情恢复时对那些执行一些替换。这样，标记与加载数据的逻辑在某种程度上是分开的，因此更换模板等可以更快一些。

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

无论如何，这种方法对我来说非常适用于 AJAX 小部件和类似的东西，设计可能会彻底改变。

【讨论】：

$(target) ?? $(target) 是什么？

【解决方案4】：

一种流行的、有效的方法是将所有附加标记（以后可能需要的）输出到页面底部的脚本标记中，这样浏览器就不会呈现标记。

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

然后您可以使用 jQuery 获取您的标记...

var markup = $('#template-example').html();

并使用模板引擎解析我投入其中的那些 JS 示例，例如 Underscore.js 中的那个（我推荐），或者这个答案中的 jQuery 之一：jQuery templating engines

玩得开心！

【讨论】：