2

並べ替え可能なテーブルを作成していますが、テーブルヘッダーの「並べ替え順序」アイコンを更新する必要があります。

私のコードが何をしているのかをよりよく理解できるように、ここに少し情報があります。

コードはクリックイベント内から実行されており、クリックされて$(this)いるテーブルヘッダーセルを参照しています。

テーブルヘッダーセルには3つのスパンがあります。ラッパー、テキストスパン、およびアイコンスパン。これがどのように見えるかです

<span class='ui-button ui-widget ui-state-default ui-button-text-icon-secondary'>
  <span class='ui-button-text'>text</span>
  <span class='ui-button-icon-secondary ui-icon ui-icon-triangle-2-n-s'></span>
</span>

collectionからのリターンです$("thead:first th")

これがアイコンの切り替えを行う私のコードです。

var new_class = sort_info.order == "asc" ? "ui-icon-triangle-1-n" : "ui-icon-triangle-1-s";
collection.find(".ui-icon").removeClass("ui-icon-triangle-1-n ui-icon-triangle-1-s ui-icon-triangle-2-n-s").addClass("ui-icon-triangle-2-n-s");
$(this).find(".ui-icon").removeClass("ui-icon-triangle-1-n ui-icon-triangle-1-s ui-icon-triangle-2-n-s").addClass(new_class);

ご覧のとおり、すべてのヘッダーアイコンセルを選択し、存在する可能性のあるアイコンクラスをすべて削除してから、該当するクラスを再度追加します。次に、クリックしたセルのアイコンを取得し、アイコンクラスを削除して、適切なクラスを適用します。

これはこれを行うための最良の方法ですか？それは動作します..そしてそれは約7ミリ秒（Windows 7、FF6.0）で実行されますが、これは私には問題ありません..多くの作業が行われているように見えます。

何かご意見は？

4

2 に答える 2

4

これらのオブジェクトに割り当てられている他の動的クラスがない場合は、最終結果がどうあるべきかがわかっているので、に置き換えることができo.removeClass().addClass()、o.attr("className", xxx)（私のテストケースでは）3倍高速化できます。

HTMLとコードを使用すると、次のように減らすことができると思います。

var new_class = sort_info.order == "asc" ? "ui-icon-triangle-1-n" : "ui-icon-triangle-1-s";
collection.find(".ui-icon").attr("className", "ui-button-icon-secondary ui-icon ui-icon-triangle-2-n-s"); 
$(this).find(".ui-icon").attr("className", "ui-button-icon-secondary ui-icon " + new_class);

addClass()jQuery呼び出しの数が半分であり、属性を設定するだけでとよりもはるかに高速であるため、これは高速であるはずremoveClass()ですが、実際に行おうとしている変更については、より脆弱で少し読みにくくなっています。これらのオブジェクトにさらにクラスを追加することにした場合は、それらを考慮してこのコードを変更する必要があります。この追加のパフォーマンスが保守性を少し低下させる価値があるかどうかを判断できるのはあなただけです。

セレクター操作を1回だけ実行し、カスタム関数を使用してそれを繰り返し処理して、各オブジェクトがこの下にあるかどうかを判断し、適切なclassNameを割り当てることで、セレクター操作の数を減らすことができます。これにより、DOM検索の数が減るだけでなく、classNameの重複割り当ても防止されます。これは次のようになります。

var new_class = sort_info.order == "asc" ? "ui-icon-triangle-1-n" : "ui-icon-triangle-1-s";
var that = this;
collection.find(".ui-icon").each(function() {
    if ($.contains(that, this)) {
        this.className = "ui-button-icon-secondary ui-icon " + new_class;
    } else {
        this.className = "ui-button-icon-secondary ui-icon ui-icon-triangle-2-n-s";
    }
});

これら3つすべてを反復で10項目のみのjsperfテストに入れると、Chromeで次のようになります。

Your method: 6691 ops/sec
Direct set of className: 11,210 ops/sec
Iteration with single selector: 20,280 ops/sec

Firefox 6ではさらに劇的な違いがあります（あなたの方法はさらに遅く、私の速い方法はさらに速くなります）。

ですから、それがあなたのアプリに関連しているなら、物事はあなたが持っているものよりもはるかに速く進むことができるように見えます。

于 2011-08-24T20:53:43.423 に答える
1

それはそれほど重要ではないと思いますが、おそらくこれはより速いでしょう（そしてあなたはそれを測定する方法を知っているので、私はあなたを裁判官にします）：

var new_class = sort_info.order == "asc" ? "ui-icon-triangle-1-n" : "ui-icon-triangle-1-s";
collection.not(this).find(".ui-icon-triangle-1-n, .ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-n ui-icon-triangle-1-s").addClass("ui-icon-triangle-2-n-s");
$(this).find(".ui-icon").removeClass("ui-icon-triangle-1-n ui-icon-triangle-1-s ui-icon-triangle-2-n-s").addClass(new_class);

しかし、それはそれほど重要ではありません。

于 2011-08-24T20:24:50.380 に答える