初心者向けのアドバイス: jQuery について深く掘り下げないでください。

Nettuts の編集者として、私は提出されたチュートリアルから多くのコードをレビューすることがあります。 jQuery は何年も前から存在していますが、今でもよく見かけるよくある間違いが 1 つあります。

---

例#1

次のコードを考えてみましょう:

リーリー

上記のコードは、さまざまな理由から複雑すぎます。コードが実際に何をするかについては心配しないでください (意味不明です)。代わりに、$(this) へのすべての参照を見てください。

DOM をプールとして考えてください。

DOM をプールとして考えてください。あなたが子供の頃、両親が見ているふりをしている間、コインを探してプールに飛び込んだことを覚えていますか?これは現実世界での比較になります。

$('.someClass') を使用するたびに、jQuery はプール (DOM) にジャンプし、そのコイン (またはノード) を検索します。したがって、関数内でそれを複数回参照する場合は、多くの作業が必要になります。あるいは、現実世界と比較すると、無駄で不必要です。必要ないのになぜ jQuery を呼び出すのでしょうか?いわゆる「キャッシュ」を行う必要があります。

リーリー

これははるかにクリーンです。最近のブラウザ エンジンは信じられないほど高速になり、貧弱なコーディングを補うために最善を尽くしますが、それでも効率的なコードを作成し、プール内を飛び回ってすべてのエネルギーを無駄にしないように努める必要があります。技術的に言えば、this のように jQuery に DOM ノードを渡すと、DOM は再クエリされません。 jQuery オブジェクトを返すだけです。

正直に言うと、この 2 つのパフォーマンスの差は無視できるものであるため、私たちはクリーンなコードを自分たちで書きます。

例 2

もう少し複雑な例であるタブを考えてみましょう。

リーリー

このコードはいたるところにあります。それは醜くて非効率的です。最初の解決策は、すべての CSS を削除することです。値が動的に作成される場合、スタイルは JavaScript にのみ配置できます。たとえば、画面上の要素の正確な位置を計算する必要がある場合は、.css('left',calculatedValue) を使用できます。この場合、すべてを外部スタイル シートにエクスポートできます。これにより、次のことがわかります:

リーリー

次に、DOM で .tabs li と $(this) のクエリを続けるのはなぜでしょうか?プールに飛び込むのはやめてください。 .tabs li の場所を「キャッシュ」しましょう。

リーリー

の方が優れていますが、それでも $(this) を 2 回呼び出しますが、これは大したことではありません。しかし、私の経験では、早期に芽を摘み取らないと、この数はすぐに増加する可能性があります。

リーリー ＃＃＃フィルター＃＃＃

もう 1 つの (あまり最適化されていない) オプションは、フィルタリングを使用することです。

リーリー

この例の違いは、

$(this)

を参照する代わりに、filter() メソッドを使用して、リスト項目のコレクションをクリックされた項目のみに減らすことです。

何をとるべきか

---

はい、関数内で

$('.tabs)

を複数回参照しても、問題は解決しません。最近の JavaScript エンジンは非常に高速です。これを何千回も実行してパフォーマンスをテストした場合、実行の差は数百ミリ秒になる可能性があります。しかし、疑問は残ります。なぜこれを行うのでしょうか? jQuery のような多くの抽象化を扱うとき、$('.tabs')

が多くのコードを実行する実際の関数であることを忘れがちです。これらの概念は jQuery だけでなく JavaScript 一般に適用されることにも注意してください。 上記の キャッシュ

手法を使用して、よりクリーンなコードを自分で作成してください。

以上が初心者向けのアドバイス: jQuery について深く掘り下げないでください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。