1

まず第一に、このコードは機能し、いくつかのアイテムを処理するときは非常に迅速に機能します。ただし、JSONが解析している場合、50以上のアイテムがあるとはいえ、電話でテストする場合はリソースを大量に消費する可能性があります。

誰かが私がJAVAScriptまたはJQUERYの世界で見ることができる機能または機能を提案できますか？

理想的には、これを高速化できない場合は、次のいずれかを実行できるようにしたいと思います。a）取得時にJSONを分割し、[詳細]ボタンを使用して次の25エントリをロードするか... b）画面に表示する必要がある場合にのみ、各エントリを解析します。

よろしくお願いします。

TIA

編集追加するだけで、このサーバー側（限られたリソース）またはエントリを制限する（再びサーバー側）ことができますが、オフラインでダウンロードして携帯電話（またはブラウザー）でデータとプロセスを使用することを目指しています...

function showResultjsonp() {
    var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
    var json_parsed = $.parseJSON(retrieveddodlocaldata);

    for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
        var parseddata = json_parsed.svccurrentaiot_jsonp[d];


        $('#eventlist')
            .append($('<div data-role="collapsible" data-collapsed="true">')
            .html('<h3><img alt="' + parseddata.dataitem.1 + '" src="images/icons/' + parseddata.dataitem.2 + '.gif">  ' + parseddata.dataitem.2 + '</h3><p>' + parseddata.dataitem.9 + '</p>Event ' + parseddata.dataitem.4 + ' ' + unittype + '<br/>Retricted ' + parseddata.dataitem.5 + '<br/>Impact ' + parseddata.dataitem.6 + '<br/>Delay <br/>Lat / Long ' + parseddata.dataitem.7 + ' / ' + parseddata.dataitem.7 + '<br/>Valid to  ' + parseddata.dataitem.8 + '</div>'));
    }

    $('div[data-role=collapsible]').collapsible();
};

このページとhttp://twitter.github.com/hogan.js/の貢献に感謝するソリューション

    function showResultjsonp() {
 var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
 var json_parsed = $.parseJSON(retrieveddodlocaldata);
 var datatemplate = Hogan.compile('<div data-role="collapsible" data-collapsed="true"><h3><img alt="{{item}}" src="images/trafficicons/{{item}}.gif"></div>');
 // store for all rendered items
 var result = "";
 for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
    var parseddata = json_parsed.svccurrentaiot_jsonp[d];
   //result += render(parseddata);
result += datatemplate.render({"item" : parseddata.dataitem.item});
console.log(result);    
}
4

3 に答える 3

2

jQueryは、それほど多くないDOM要素を処理するのに費用がかかります。テンプレートテキストをjavascript関数にコンパイルするテンプレートエンジンを使用することを強くお勧めします。ホーガンはツイッターで使えます。口ひげのテンプレートを、必要な回数だけ再利用できるjavascript関数にコンパイルします。

簡単な例を次に示します。

var template = "<div><span>{{some-value-from-template}}</span> </div>";

次に、コンパイルします。

var templ = hogan.compile(template);

次にそれを使用します：

var result = templ.render({"some-value-from-template": "hello world"});
$(result).appendTo("#someElementInTheDom");

Mustacheには、非常にシンプルでエレガントなテンプレート表記があります。

口ひげ： http： //mustache.github.com/

ホーガン：http ：//twitter.github.com/hogan.js/

編集：

jaredとfelixがコメントで言ったように。必要なパフォーマンスを得るには、他のことを改善する必要があります。

// create template
var template = "<div>....</div>";
// compile
var templ = hogan.compile(template);
// store for all rendered items
var result = "";

for (...)
   result += templ.render(currentJsonParsedElement);
}

// and then, insert all items at once in the DOM
$("#eventlist").append(result);

実際、口ひげはforループを実行できます。詳細については、口ひげのドキュメントをご覧ください。

于 2012-07-30T22:57:13.593 に答える
0

テンプレートに加えて、を使用しDocumentFragmentてHTMLノードを挿入することを検討することをお勧めします。それらを1つずつDOM（「高価」）に配置する代わりに、フラグメントを作成し、DOMに触れずにいくつかの要素を追加して、1つの操作でそれらを一緒に挿入することができます。この例は、Googleのページ「 JavaScriptの高速化：DOMの操作」からのものです。

function addAnchors(element) {
  var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);
}
于 2012-07-30T23:10:06.047 に答える
0

このページとhttp://twitter.github.com/hogan.js/の貢献に感謝するソリューション

function showResultjsonp() {
 var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
 var json_parsed = $.parseJSON(retrieveddodlocaldata);
 var datatemplate = Hogan.compile('<div data-role="collapsible" data-collapsed="true"><h3><img alt="{{item}}" src="images/trafficicons/{{item}}.gif"></div>');
 // store for all rendered items
 var result = "";
 for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
    var parseddata = json_parsed.svccurrentaiot_jsonp[d];
   //result += render(parseddata);
result += datatemplate.render({"item" : parseddata.dataitem.item});
console.log(result);    
}
于 2012-08-05T10:36:31.253 に答える