2012-04-27 18 views
0

私は、JavaScriptプログラマーでもなくても、jQueryの専門家ではないと言い始めることにします。実際はjQueryから始まります。jQueryコードの相違点

私は2次のjQueryコードを持っている:基本的には上記の2つのコード間の違いは何ですか

  1. :これについて私が持っている

    $('.tipTrigger').hover(function(){ 
        $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
    }); 
    

    if ($(".tooltip-container").length > 0){   
        $('.tipTrigger').hover(function(){ 
         $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
        }); 
    } 
    

    いくつかの質問に?

  2. if ($(".tooltip-container").length > 0){の意味はなんですか?
  3. 上記を使用する利点はありますかif
  4. さらに、開発者の立場から「効率的」なものはありますか? (そういう小さなものであれば、パフォーマンスに大きな影響を与えることがあります)

この単純な比較で他のコメントや助けをいただければ幸いです。

ありがとうございます。

+1

jQueryへようこそ:D – SpYk3HH

答えて

1
  • 基本的には上記の2つのコード間の違いは何ですか?

    クラスのツールチップコンテナ 'がページ上の要素がある場合は、2番目にのみ($(」」場合の意味は何ですか

  • をホバー機能を設定します。ツールチップ-container ")。length> 0){'?

    単純な要素持つクラスtooltip-containerが文書

  • 上に存在するかどうかをテストするためのステートメントは、上記のifを使用する利点はありますか?.hoverが習慣要素がクラスtipTriggerを有する場合を除きasignedするため要するに

    が、この場合には、本当に、とにかく存在します。また、1つの tooltip-container要素が存在するかどうかを確認するだけであるため、パフォーマンス上の問題が発生する可能性があります。 tipTriggerがコンテナ内にあることを確認するチェックであれば、 tooltip-containerの要素が見つかるとすぐに、 tipTriggerのすべての要素は、サインホバー機能になり、これは望ましくないことがあります。

  • さらに、開発者の立場から「効率的」なのは何ですか?あなたはtooltip-container要素の内側のみtipTrigger要素が発射されていることを確認するためにチェックしなければならない場合

    (非常に小さい何かがどのような方法でかなりのパフォーマンスへの影響を持っているならばそれはある)、あなたはjQueryの.each functionまたは使用CSSの使用を検討するかもしれませんセレクタで、またの下で

>

$('.tooltip-container .tipTrigger').hover(function(){ 
    $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
}); 

を次のように立っ

  • .toggleClass:この要素上のトグルのクラスは、アクティブ
  • .prev
  • :DOM
  • .stopに現在の要素の前に来るクラスtipTextを持つ要素を参照するに動くチェーンは:この要素
  • に、現在ではすべてのanymationを停止
  • .fadeToggle:要素を「隠蔽」に退色させ始める
+0

SpYk3HHだから、私はカスタムスクリプトを使って一つのJavaScriptファイルを持っているとしましょう。つまり、 "custom-scripts.js"がサイトのすべてのページに含まれています。ページがcustom-script.jsファイルを読み込むときに上記の 'if'ステートメントを使用することによって、その特定のページのDOM内の要素と一致するスクリプトのみが実行されます。このようなことをしてもらえますか?ありがとう。 –

+0

@Ricardo Yepですが、 '.tooltip-container'要素(' if')を探してDOMトラバーサルをやっているので、何も買っていないと確信しています。非'if'バージョンは '.tip-trigger'要素を探すのと同じトラバーサルを行います - もし存在しなければ何もしません。 –

+0

少し詳しく説明します:私はそのアイデアを考えている理由は、私たちのオフショア開発者にとって単純なものを保つ必要があるため、ベストプラクティスに従うのはかなり難しいことです。したがって、すべてのスクリプトを処理する単一のJSファイルを持つことで、ページに特定のスクリプトを追加する心配がなくなり、カスタムJSファイルを1つだけ含めることができます。私のカスタムスクリプトを 'if'ステートメントで作成するのはいい考えです。これを行い、1つのJSファイルを作成するのも同様です。あなたの意見を知りたいですか? –

4

2つ目は、"tooltip-container"というクラスのDOM要素が1つ以上ある場合にのみ、ホバー機能を設定します。

どちらも、指定されたクラスを持つ要素を見つけるためにDOMをトラバースします。かどうか、効率の差は、それは文が呼び出されたDOMに依存する価値がある、など

4
  1. ...場合ホバー機能はのみ、少なくともそこにある...登録されますページ内の "tooltip-container"クラスを持つ1つの要素。
  2. これらのツールチップが動作する方法にいくつかの隠された魔法がないかぎり、わずかなパフォーマンスがわかりません。
  3. 遅くなったり遅くなったりすることがないなら、私は一般的に、パフォーマンスの微妙な調整に比べてよりクリーンなコードを好む。