10

ユーザーが1日をクリックして、ポップアップするフォームでその日のエントリを入力できるカレンダーページを作成しています。

私はjQueryを使用したDOM操作に不慣れではありませんが、これは以前に行ったことであり、これを行うためのより効率的な方法があるかどうか疑問に思い始めています。

JavaScript内でHTMLを手動で構築することは、パフォーマンス面で最も効率的な方法でしょうか（appendTo（）などの関数を使用するよりも、これが当てはまると思います）、またはDOM内に非表示の構造を作成し、それを複製する方が良いでしょうか？

理想的には、コードの整理とパフォーマンスのバランスをとるためにこれを行う最適な方法を知りたいと思います。

ありがとう、

意思

4

3 に答える 3

15

JavaScriptでHTML文字列の巨大なチャンクを操作すると、非常にすぐに醜くなる可能性があります。このため、JavaScriptの「テンプレートエンジン」を検討する価値があるかもしれません。それらは複雑である必要はありません-Resigによるこれをチェックしてください。

それが気に入らない場合は、そのまま続行しても問題ありません。文字列操作と比較すると、DOM操作は一般的に非常に遅いことを覚えておいてください。

このパフォーマンスギャップの例：

// DOM manipulation... slow
var items = ['list item 1', 'list item 2', 'list item 3'];
var UL = $('<ul/>');
$.each(items, function(){
    UL.append('<li>' + this + '</li>');
});

// String manipulation...fast
var items = ['list item 1', 'list item 2', 'list item 3'];
var UL = $('<ul/>').append( '<li>' + items.join('</li><li>') + '</li>' );
于 2009-06-23T12:21:34.787 に答える
3

ここに説明があります。

于 2009-06-23T11:53:23.003 に答える
0

おそらく最も人気のあるアプローチではありません。

バックエンドでHTMLコードを生成します。ダイアログはcssの非表示のdivになります。「ポップ」させたい場合は、さまざまなcssスタイルを適用し、非表示の入力値を変更するだけです（ダイアログはその特定の日付と相互作用すると思います）。

于 2009-06-23T12:32:53.940 に答える