David Aragonによる「jQueryのソースコードを読むことによる18の驚き」の翻訳。
私はjQueryが大好きで、自分自身を高度なJavaScript開発者と考えていますが、jQueryのソースを最初から最後まで読んだことはありません。 これを行うことで学んだことをいくつか示します。
注：構文$.fn.method()を使用して、選択した要素でmethod呼び出しを指定します。 たとえば、 $.fn.addClassを記述すると、これは$('div').addClass('blue')または$('a.active').addClass('in-use')として使用することを意味します。 $.fnはjQuery要素ラッパーのプロトタイプです。- シズルの重み： シズルは、DOMのCSSセレクター用のjQueryエンジンです。 これが、
$('div.active')を操作可能な要素の配列に変えるものです。 SizzleがjQueryの大部分を構成していることは知っていましたが、それが実際にどれほど巨大であるかを知って驚きました。 これは、jQueryソースコードの行数の点で最大の機能です。 私の計算によると、コードベース全体の22％を占めています。 これは、ライブラリコードの8％のみを$.ajax jQueryの次の最大の$.ajaxである$.ajax覆い隠します。
- $ .grep： このメソッドはUnderscore
_.filterメソッドに似ています。また、要素の配列と関数の2つの引数を取り、関数テストに合格した要素を返します。
- バブリングに関する注意事項： jQueryは、1つのタイプのイベントのバブリングを防ぎます。 これは
loadイベントです。 内部では、jQueryはすべてのloadイベントに対して特別なフラグnoBubble: trueを渡します。そのため、image.loadイベントはウィンドウオブジェクトまで浮動できません（window.loadと間違われる可能性があります）。
- デフォルトのアニメーション速度： jQueryは、スタイルをすばやく連続して変更することで要素をアニメーション化します。 これらの迅速な変更はそれぞれ「ティック」と呼ばれます。 デフォルトのアニメーション速度は13ミリ秒ごとに1ティックです
jQuery.fx.intervalを独自の数値にオーバーライドすることで設定できます。
- $ .fn.addClassは関数を取ります：通常、クラス名を含む文字列を$ .fn.addClass関数に渡します。 しかし、彼女はその機能も受け入れます。 渡される関数は、クラス名をスペースで区切った文字列を返す必要があります。 ボーナスとして、この関数は、適用される要素のリストから要素のインデックスを取得します。これにより、スマートクラス名を作成できます。
- $ .Fn.removeClassは同じことを行うことができます。このメソッドは、上記のメソッドのように関数も受け入れます。 渡された関数は、要素のインデックスも取ります。
- 疑似セレクター：emptyこの便利な疑似セレクターは、子ノードのない要素を選択します。
- 擬似セレクタ：ltおよび：gt：これらの擬似セレクタは、選択内のインデックスによって要素を選択します。 たとえば、
$('div:gt(2)') 、最初の3つ（インデックス付けがゼロから始まる）を除くすべて$('div:gt(2)')返します。 引数に負の数を渡すと、jQueryは選択範囲の最後からカウントバックします。
- $（ドキュメント）.ready（）はpromiseを使用します： jQueryは独自の製品を使用することがわかります。 内部では、古き良き
$(document).ready() 、DOMが完全にロードされたときを判断するために遅延jQueryによって使用されます。
- $ .type：
typeof使用に慣れていると思いますが、jQueryが.type()メソッドを提供していることを知っていましたか？ jQueryバージョンは、ネイティブブラウザバージョンよりも合理的です。 たとえば、 typeof (new Number(3))は「オブジェクト」を返し、 $.type(new Number(3))は「number」を返します。追加： ShirtlessKirkがコメントで指摘したように、$ .typeは.valueOf（ ） したがって、$ .typeがオブジェクトの戻り値の型を通知すると言う方が正しいです。
- $ .fn.queue：次のコードで要素の効果キューを取得できます：
$('div').queue() 。 これは、要素に適用する必要があるエフェクトの数を知る必要がある場合に役立ちます。 自分でキューにエフェクトを追加するとさらに便利です。 jQueryドックから：
$( document.body ).click(function() { $( "div" ) .show( "slow" ) .animate({ left: "+=200" }, 2000 ) .queue(function() { $( this ).addClass( "newcolor" ).dequeue(); }) .animate({ left: "-=200" }, 500 ) .queue(function() { $( this ).removeClass( "newcolor" ).dequeue(); }) .slideUp(); });
- 非アクティブな（無効な）要素でのクリックイベントは禁止されています。jQueryは無効な要素でのクリックイベントを処理しません。これは、これを自分でチェックする義務を取り除く最適な最適化です。
- $ .fn.onはオブジェクトを受け入れます：
$.fn.onはオブジェクトを受け入れて、複数のイベントに一度に接続することを知っていましたか？ jQueryドックの例：
$( "div.test" ).on({ click: function() { $( this ).toggleClass( "active" ); }, mouseenter: function() { $( this ).addClass( "inside" ); }, mouseleave: function() { $( this ).removeClass( "inside" ); } });
- $ .camelCase：このヘルパーメソッドは、ハイフン文字列をcamelCaseに変換します。
- $ .active：$ .activeを呼び出すと、アクティブなXHRリクエストの数が返されます。 これは、同時にアクティブなAJAX呼び出しの数を制限するのに役立ちます。
- $ 。 基本的に、これらのメソッドは、渡された停止要素に到達するまで親要素/ next / prev要素を選択します。
- 引数$ .fn.clone：要素のクローンを作成するとき、
cloneメソッドへの最初の引数true渡すことで、そのデータ属性とイベントのクローンを作成することもできます。
- その他の$ .fn.clone引数：さらに、2番目の引数に
trueを渡すtrueにより、データ属性と子のイベントを複製できます。 これは「ディープクローニング」と呼ばれます。 2番目の引数のデフォルトは最初の引数です（デフォルトではfalseです）。 したがって、最初の引数がtrueで、2番目の引数をtrueしたい場合、2番目の引数を省略できます。
この記事の以前のバージョンでは、例5の引数関数の戻り値はコンマ区切りの文字列である必要があると述べていました。 これは、スペースで区切られた文字列でなければならないことがわかりました。 ジョナサンありがとう！