2

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

现在我正在使用 HTML 代码片段（= 增强但未格式化的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 来提取我需要的内容？如果它应该是一个字符串，有没有一种简单的方法可以从这个字符串中提取一个元素（从到）？

谢谢！

4

2 回答 2

1

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

于 2012-12-09T16:48:00.860 回答
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 />的 's.

取自jQuery 文档：

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

于 2012-12-09T19:16:01.170 回答