0

私が書いているjQueryプラグインでは、プラグインが呼び出されているDOMオブジェクト内の特定の要素を確認したいと思います。コードは次のようになります。

//the object that you call the plugin on, stored in the variable "o"
o = this;

//Store children of a child element inside "o" in the variable "elInsideO"
elInsideO = o.find('selector').children('childrenSelector');

/* check if elInsideO is empty in case 'selector' is not present and then look for 
alternative element 'selector2' */
if (elInsideO.length == 0) {
    elInsideO = o.find('selector2').children('childrenSelector');
}

この選択を行うためのより効率的な方法はありますか？私が考えることができるもう1つの可能性はこれです：

if (o.find('selector').length != 0) {
    elInsideO = o.find('selector').children('childrenSelector');
} else {
    elInsideO = o.find('selector2').children('childrenSelector');
}

これらのソリューションのどれがより効率的ですか（つまり、パフォーマンスが向上します）？さらに良い別の方法はありますか？

助けてくれてありがとう！

4

2 に答える 2

1

これらの2つのコードフラグメントは何か違うことをします...o.find('selector')要素はあるがそれらの要素に子がない場合、最初のメソッドは2番目のセレクターに移動します。ただし、コードの2番目のビットは、存在しない子の空のセットを返します。したがって、この場合、どちらがパフォーマンスが優れているかではなく、どちらが正しいかという質問があります。:)

o.find('selector')あなたが子供を保証されている状況では、条件付きチェックと結果でそれを実行するのではなく、あなたが変数に結果をキャッシュしたと仮定するのとほとんど同じだと私は思ったでしょう。どちらの場合も、o.find('selector')最初に実行します。どちらの場合も、それが存在する場合、あなたは子供を得るので、時間はほとんど同じになります。

それが存在しない場合、最初のメソッドも子を呼び出しますが、空のjqueryオブジェクトでこれを呼び出すのは簡単な時間です。その後、両方とも同じことを行います。

2番目のコードセットは、冗長な呼び出しを回避しますが、それ以外の場合は、ごくわずかな違いに気付くでしょう。

いつものように、このパフォーマンスが本当に重要であると思われる場合は、ベンチマークを実行して、使用している状況で最高のパフォーマンスを発揮するかどうかをテストしてください。

于 2012-10-16T09:46:00.540 に答える
1

さて、私は最終的に初めていくつかのベンチマークテストを行いました。jsPerfを使用しました。テストによると、最も効率の悪い方法は次のとおりです。

elInsideO = o.find('selector').children('childrenSelector');
if (elInsideO.length == 0) {
    elInsideO = o.find('selector2').children('childrenSelector');
}

同じ結果が得られるさらに3つのバリアントをテストしました。

2：

if (o.find('selector').length != 0) {
    elInsideO = o.find('selector').children('childrenSelector');
} else {
    elInsideO = o.find('selector2').children('childrenSelector');
}

3：

 if (o.find('selector').length != 0) {
    elParent = o.find('selector');
 } else {
    elParent = o.find('selector2');
 }
 elInsideO = stopsParent.children('childrenSelector');

4：

elParent = o.find('selector');
if (elParent.length == 0) {
    elParent = o.find('selector2');
}
elInsideO = elParent.children('childrenSelector');

2、3、および4はすべて、最初のバリアントよりもパフォーマンスが優れています。テストでは、これら3つのうちの別の1つが常に最良であると宣言されるため、どれが最良であるかを確実に判断することはできませんが、最初の1つは常に最悪のパフォーマンスを示します。親要素を追加の変数に格納するため、4番目のバリアントを好みます。これにより、他の目的にも使用でき、バリアント3と比較してコード行が1行少なくなります。

ここで自分でテストできます：

http://jsperf.com/fallback-selection

于 2012-10-16T13:02:06.433 に答える