1月 21, 2012
from tech.kayac.com

2 slice().sort()

jQuery.event周りのコードではよく以下のような記述が行われています。

var namespaces = type.split(".");
handler.type = namespaces.slice().sort().join(".");

namespacesは.split()の結果なのでArrayであることは保証されていますが、なぜか.sort()を行う前に.slice()を行っています。

これはJSの.sort()が破壊的であるためで、一旦.slice()を行うことにより配列のコピーを作成し、その結果に対して.sort()を実行するための記述です。

もしここで.slice()を行わない場合、.sort()段階でnamespaces自体が.sort()されてしまい、後でnamespacesを使用するときに元の順番を再現することができなくなってしまいます。

また、同じような処理として.slice()の代わりに.concat()を使用する場合もあります。

5 .extend()を使用したobject拡張

jQuery.extend()の基本的な機能はobjectの拡張ですが、単一の引数で呼び出された場合、jQuery object自体の拡張を行います。

jQuery.extend({ 'hoge' : 'huga' });
console.log(jQuery.hoge); // => huga

また、jQuery.fn.extend()も単一の引数で呼び出された場合、jQuery.fn object自体の拡張を行います。

jQuery.fn.extend({ 'hoge' : 'huga' });
console.log(jQuery().hoge); // => huga

ここで、jQuery.fn.extend()の拡張し対してjQuery()でアクセスしていますが、jQuery.fn.extend()への拡張はjQuery objectではなく、jQuery functionの呼び出し結果のobjectへの拡張になります。

jQueryの内部でもjQuery.method形式で呼び出すmethodとjQuery().method形式で呼び出すmethodでは同じ名前でも扱いが違うので注意してください。 ($.eachと$().eachは別物として定義されています)

6 jQuery.event

jQueryではブラウザの仕様から外れたeventの扱いが多く、実装のほとんどをjQueryの内部で行っています。 (namespace、eventのbubbling、eventへの独自引数、イベント設定時の初期化処理、カスタムイベント、live event、ブラウザ差異の補正)

コードを読むときは以下の点を注意して読んで見てください。

  1. namespaceは.区切りで複数の名前空間を指定できること($().bind(‘click.hoge.huga’, function () {})が可能)、
  2. 追加されたeventはjQuery.data(elem, “events”)に保存されていること、
  3. jQuery.data(elem, “events”)内のイベントの呼び出しをjQuery.data(elem, “handle”)経由で行っていること

(出典: tech.kayac.com)

  1. dameleonの投稿です