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 属性を含む) を含むページにアクセスしたときに、require は上記のテンプレートをプルし、それ以降のすべての使用のためにキャッシュされます。 .

現在、上記のページは HTML 文字列として返されます。リストビュー要素 ( ) のすべての「バリエーション」が含まれる<ul>,<ol>,<li>...ため、特定の機会に必要な要素を選択する手段が必要です。

質問:
パフォーマンスの観点から、返された HTML テンプレートの大きな文字列を操作して必要な部分文字列を抽出する方が良いですか、それとも代わりにこれをラップして$()jquery/javascript を使用して必要なものを取得する必要がありますか? 文字列である必要がある場合、この文字列から (から) 要素を取得する簡単な方法はありますか?

ありがとう！

4

2 に答える 2

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 オブジェクトを構築できます。」

于 2012-12-09T19:16:01.170 に答える
1

を使用し$(html)ます。それはあなたが必要とすることをほぼ正確に行います。これはメモリ内操作です。これらを 1 秒間に何百回も実行しようと計画していない場合は、yslowなどのパフォーマンス分析ツールで示されるように、パフォーマンスの最適化の取り組みを他の領域に集中させることで、より多くの成果を上げることができます。

于 2012-12-09T16:48:00.860 に答える