在 Javascript 中生成内容时，我应该使用字符串还是节点？答案

【问题标题】：Should I work with strings or nodes when generating content in Javascript?在 Javascript 中生成内容时，我应该使用字符串还是节点？
【发布时间】：2012-12-09 16:37:58
【问题描述】：

我正在尝试将页面设置为最终需要脱机工作的应用程序的模板。

现在我正在玩 HTML 代码的 sn-ps（= 增强但未格式化的 jquery mobile 元素），我将其存储为 HTML 页面，如下所示：

<!-- template_listview.html -->
<!DOCTYPE html>
<html>
<head><title>static_listview_templates</title></head>
<body>


<!-- listview basic start -->
<ul id="tmp_listview_basic" class="ui-listview"></ul>
<!-- listview basic end -->

<!-- listview inset start -->
<ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>
<!-- listview inset end -->

</bdoy>
</html>

我的应用程序使用requireJS，因此用户第一次点击包含列表视图的页面（具有指定要加载的动态内容以及列表视图外观的 data-config 属性）时，需要拉出上面的模板，这将被缓存以供所有后续使用。

现在上面的页面作为 HTML 字符串返回。由于它将包括列表视图元素的所有“变体”（<ul>,<ol>,<li>...），我需要一些方法来选择我在特定场合需要的元素，这就是我现在卡住的地方。

问题：
在性能方面，使用返回的 HTML 模板的大字符串并尝试提取必要的子字符串会更好，还是应该将其包装到 $() 并使用 jquery/javascript 来提取我需要的内容？如果它应该是一个字符串，有没有一种简单的方法可以从这个字符串中提取一个元素（从到）？

谢谢！

【问题讨论】：

标签： javascript jquery string object select

【解决方案1】：

我认为字符串抽象在性能方面会更好。

事实上，如果我认为你想从结果中以字符串形式获取相关列表视图是正确的，那么根据我编写的以下 jsperf 测试，字符串抽象要快得多：

http://jsperf.com/jqobj-vs-string-abstraction

因此，您可以使用我为该测试编写的字符串抽象方法从结果中获取您的列表视图：

function getTemplateBlock(block, context) {
    var regex = new RegExp('<!-- ' + block + '(.)+' + block + '(.)+?-->'),
        tmpl = context.match(regex);

    return tmpl.length ? tmpl[0].replace(/<!--[\s\S]*?-->/g, '') : '';
}

// get listview templates where 'mystuff' is
// the HTML string returned by your request
var basic = getTemplateBlock('listview basic', mystuff),
    inset = getTemplateBlock('listview inset', mystuff);

此外，关于如何从创建的对象中进行选择的问题的答案也在那个 jsperf 中......

$('<div />').html(mystuff).find('ul');

这是必要的，因为.find() 搜索匹配元素的后代，因此如果我们将匹配元素设为新的<div /> 并附加我们的结果，我们可以在<div /> 中搜索我们的<ul />。

取自jQuery docs：

“给定一个代表一组 DOM 元素的 jQuery 对象，.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并从匹配的元素中构造一个新的 jQuery 对象。”

【讨论】：

完美。性能上的差异很大，而且我的想法也差不多。我开始使用 jQuery Mobile 的小部件模板工具，因此我正在为每个小部件创建一个库，其中包含已增强元素的 HTML 字符串（如列表视图）。我不想为每个元素变体做单独的文件，所以这几乎正是我正在寻找的。谢谢！
这是一个很好的基于字符串和正则表达式的参考模板库，仅供参考，用于研究现有技术。 github.com/flatiron/plates/blob/master/lib/plates.js

【解决方案2】：

使用$(html)。它几乎完全符合您的需要。这是一个内存操作。如果您不打算尝试每秒执行数百个这样的操作，那么将您的性能优化工作集中在 yslow 或类似的性能分析工具所指示的其他领域，您将获得更大的收益。

【讨论】：

所以现在我很好奇。如何从我创建的对象中进行选择。我尝试的一切。使用$( mystuff ).find('ul') 之类的东西无法真正访问任何内容。谢谢。