05 | 2017/06 |  07

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jQuery()の挙動を解読する(20) $(args).unbind()、$.event.remove()、$.removeData() 解読 ──jQuery解読(31)

$(args).unbind() 【ver1.2.2で変化なし】について

イベントの登録メソッドに較べて、それを削除する $(args).unbind() は余り使用頻度の高いメソッドではないでしょう。登録したイベントハンドラーをわざわざ解除する必要性は、決して高いとは思えないからです。

そのことはさて置き、$(args).unbind() メソッドは僅か数行のもので、全ての処理を $.event.remove() メソッドに委ねており、更に $.event.remove() メソッドの骨格は $(args).data() と $(args).removeData() メソッドによって構成されています。

ここでも $(args).add() メソッド同様に、本家サイトで Internals ジャンルに分類されている Data Cache を取り扱うメソッドが不可欠となっています。

$(args).unbind() のコードは以下の通りです。対象要素ノード毎に $.event.remove() を呼び出してその結果を受け取っています。

2199: unbind: function( type, fn ) {
2200:  return this.each(function(){
2201:   jQuery.event.remove( this, type, fn );
2202:  });
2203: },

$.event.remove() 【ver1.2.2で部分的に変更された】について

引数と変数指定

unbind() メソッドから3つの引数を受け取り、実際にイベントをアンバインドするメソッドです。

elem がテキストノードかコメントだった場合には何もせずに終わります。

1902 行の data() メソッドにより、当該対象要素ノードに対応する Namespaced event handlers をData Cache から抽出し、変数 events に代入します。なお、変数を3つ指定していますが、index はどこでも使われていません。

1896: // Detach an event or set of events from an element
1897: remove: function(elem, type, handler) {
1898:  // don't do events on text and comment nodes
1899:  if ( elem.nodeType == 3 || elem.nodeType == 8 )
1900:   return;
1901:
1902:  var events = jQuery.data(elem, "events"), ret, index;
1903:

ここで、events 変数には何が代入されるのか、視覚的にも明らかにしておくことが得策だと思います。

下図はあるサイトのある要素ノードに、クリックとダブルクリックの2つのイベントハンドラーをバインドした時の、Namespaced events handlers と jQuery.js が呼んでいるオブジェクトの一部、つまり jQuery.cache オブジェクトの一部を切り取ったものです。

この図にある events オブジェクトと同じような構造の、「 element 」要素ノードに対応するオブジェクトが 1651 行の変数 events に代入されます。

Namespaced_Eents_Object
jQuery ネームスペース内のイベントハンドラー
   // 当該対象ノードにイベントハンドラーが登録されていれば
1904: if ( events ) {

 /* 削除その1
  * 第2引数の type が与えられていない場合の処理である。
  * この場合には、events オブジェクト内の全ての type プロパティ、つまり登録
  * されている全てのイベントハンドラー毎に、remove() メソッドを再帰呼び出し
  * する。再帰的に呼び出す場合には、events オブジェクトから type 名称を取り
  * だして第2引数としている。
  * このブロックの処理によって、対象要素ノードに登録されている Namespaced 
  * イベントハンドラーの全てを削除することになる。
  */
1905:  // Unbind all events for the element
1906:  if ( types == undefined )
1907:   for ( var type in events )
1908:    this.remove( elem, type );

 /* イベントオブジェクトが引数となった場合の処理
  * 「type.type がある場合」とは、何らかの事情によって第2引数の type が
  * 文字列ではなく、イベントオブジェクトであった場合を指している。
  * その場合には、handler にはイベントオブジェクトの handler プロパティを
  * type にはイベントオブジェクトのtypeプロパティを代入している。
  */
1909:  else {
1910:   // types is actually an event object here
1911:   if ( types.type ) {
1912:    handler = types.handler;
1913:    types = types.type;
1914:   }
 /* の処理
  * 複数イベント一括 bind() メソッド に呼応して、unbind()メソッドもマルチ
  * イベント対応としている。
  * つまり、各イベントタイプ毎にイテレートして登録解除を進めることになる。
  * type にはイベントtype名が入る。
  */
1916: // Handle multiple events seperated by a space
1917: // jQuery(...).unbind("mouseover mouseout", fn);
1918: jQuery.each(types.split(/\s+/), function(index, type){
1919:  // Namespaced event handlers
1920:  var parts = type.split(".");
1921:  type = parts[0];
 /* 削除その2
  * 次は第2引数の type が与えられていて、それが events オブジェクトの
  * プロパティと一致する場合── if ( events[type] ) ──の処理である。
  * 1925行……第3引数 handler が与えられていれば、
  * 1926行……登録されているプロパティ=ハンドラー関数を削除する。
  * ここでは type 名のオブジェクトは削除せず、その handler 名の関数
  * だけを削除する。
  * ここに handler.guid プロパティの値はハンドラー関数である。
  * ※ event.add() メソッド参照。
  */
1923:  if ( events[type] ) {
1924:   // remove the given handler for the given type
1925:   if ( handler )
1926:    delete events[type][handler.guid];
1927:
  * 削除その3
  * 第3引数の handler が与えられていない場合には(1929行以下)
  * events[type] オブジェクト内の各プロパティに対して(1930行)
  * カスタムイベントがないか(!parts[1])、又は登録されているカスタムイベ
  * ントタイプと、指定されたカスタムイベントタイプが一致すれば(1932後段)、
  * handler プロパティを削除する。
  * これにより指定した type で登録されているイベントハンドラー関数を
  * 全て削除する。
  */
1928:   // remove all handlers for the given type
1929:   else
1930:    for ( handler in events[type] )
1931:     // Handle the removal of namespaced events
1932:     if ( !parts[1] || events[type][handler].type == parts[1] )
1933:      delete events[type][handler];
1934:
一般のイベントハンドラーの削除
 /* event[type] オブジェクト内にプロパティが残ってないかチェックする。
  * もし、残っていれば for loop を 中止する。
  */
1935:   // remove generic event handler if no more handlers exist
1936:   for ( ret in events[type] ) break;
 /* 削除その4
  * もし、 event[type] オブジェクト内にプロパティが残っていれば、 
  * !ret は false となるので 1938行以下は実行されない。
  * さて、もはや eventsオブジェクトに type プロパティが存在しない場合
  * ──if ( !ret )──には、一般的なイベントハンドリングによって登録した
  * ハンドラー関数の登録を解除する。
  * ここに jQuery.data(element, "handle") はイベントハンドラー登録時に利用
  * される代理母的な関数である。既に add() 及び handle() メソッドの項で述べ
  * たように、add()メソッドによってNamespaced イベントハンドラーに登録済みの
  * 関数から、jQuery.event.handle() メソッドがバインドする関数を選択し登録する。
  */
1937:   if ( !ret ) {
1938:    if ( !jQuery.event.special[type] || jQuery.event.special[type].teardown.call(elem) === false ) {
1939:     if (elem.removeEventListener)
1940:      elem.removeEventListener(type, jQuery.data(elem, "handle"), false);
1941:     else if (elem.detachEvent)
1942:      elem.detachEvent("on" + type, jQuery.data(elem, "handle"));
1943:    }
1944:    ret = null;
1945:    delete events[type];
1946:   }
1947:  }
1948:  });
1949: }
 /* 削除その5
  * 最後の処理は再び Data Cache オブジェクト内のクリーニングである。
  * これまでの処理で全てのイベントハンドラー(タイプ、カスタムイベント、
  * ハンドラー関数、id 番号など)を削除するが、まだ Data Cache オブジェク
  * ト内には残存物がある。それは events と handle オブジェクトである。
  * これらを以下の数行で削除する。
  * ret がないことつまり events オブジェクト内が空であることを確認して、
  * events と handle オブジェクトを削除する。
  * 以上の結果、当該要素ノードelementに関してData Cache オブジェクト内に
  * 存在するオブジェクトは、当該要素ノードに対応するuuid番号を振られた空
  * のオブジェクトだけとなる。
  */
1951:   // Remove the expando if it's no longer used
1952:   for ( ret in events ) break;
1953:    if ( !ret ) {
1954:     var handle = jQuery.data( elem, "handle" );
1955:     if ( handle ) handle.elem = null;
1956:      jQuery.removeData( elem, "events" );
1957:      jQuery.removeData( elem, "handle" );
1958:     }
1959:  }
1960: },

▲ToTop

jQuery.removeData( elem,name ) 【 ver1.2.2 で変化なし】解読

jQuery.removeData() メソッドは、jQuery.data()メソッドで構築した Data Cache オブジェクト内のオブジェクトを削除するためのもので、jQuery.event.remove()メソッドの最後に登場します。その働きは既に上で述べたので、ここでは当該メソッドの解読を行ってこのエントリイを閉めます。

コード全体は name 引数がある場合とない場合の2通りに大別されます。

変数初期化
668: removeData: function( elem, name ) {
669:  elem = elem == window ?
670:    windowData :
671:    elem;
672:

 /* data() メソッドで elem, name を登録する時に、elemには、expando
  * プロパティが付与される。
  * ( data() メソッドの 518行 id = elem[ expando ] = ++uuid;)
  * ここではこれを取りだして改めて地域変数 id に代入している。
  * なお、この id は先の 518 行により、個々の elem に対応して
  * cache オブジェクト内のプロパティとして割り振られているので、
  * cache[id]とすれば 当該 uuid番号 のプロパティ値を指すことになる。
  * 勿論 elem の指定ミスがあればこの行は通過し、540行でも撥ねられ、
  * その先に進んでも全てスルーする。
  * また name がないか間違っている場合も全ての行がスルーされる。
  */
673:  var id = elem[ expando ];
674:
削除その1──cache.id オブジェクト内のプロパティ削除
 /* 抽出された id 番号を頼りに、その中にある name プロパティを削除する。
  * 1697、1698 行の引数に置き換えれば events と handle を削除することに
  * なります。
  */
675:  // If we want to remove a specific section of the element's data
676:  if ( name ) {
677:   if ( jQuery.cache[ id ] ) {
678:    // Remove the section of cache data
679:    delete jQuery.cache[ id ][ name ];
680:
削除その2── element に対応する id 番号名のオブジェクト削除
 /* id オブジェクト内に何もないことを確認し(546行)、
  * なければ(547行)、elem つまり当該 elementに対応する id 番号名のオブ
  * ジェクトそのものを、removeData()を再帰呼び出しして削除する。(548行)
  * なお 548 行を 564 行と同様のコードとしなかったのは、別の name 名のオブ
  * ジェクトが残っているケースもあるため、これに配慮したものと推測される。
  * 例えば、events オブジェクトを削除する段階では、まだ handle オブジェクト
  * が残っている。(1697-1698行参照)
  */
681:    // If we've removed all the data, remove the element's cache
682:    name = "";
683:
684:    for ( name in jQuery.cache[ id ] )
685:     break;
686:     if ( !name )
687:     jQuery.removeData( elem );
688:   }
689:
削除その3──elemオブジェクトのexpando プロパティ削除 及び cache 内の elem id プロパティ削除
 /* name 引数が与えられなかった場合の処置
  * elem の expando プロパティ削除を行う(556行)。
  * IE ではエラーが発生するのでDOMの removeAttribute メソッドを使って
  * elem の expando プロパティを削除する。
  * 最後に cache オブジェクト内の id プロパティを削除し、elem に対応する
  * cache オブジェクト内の全ての痕跡を消し去る。
  */
691:  // Otherwise, we want to remove all of the element's data
692:  } else {
693:   // Clean up the element expando
694:   try {
695:    delete elem[ expando ];
696:   } catch(e){
697:    // IE has trouble directly removing the expando
698:    // but it's ok with using removeAttribute
699:    if ( elem.removeAttribute )
700:     elem.removeAttribute( expando );
701:   }
702:
703:   // Completely remove the data cache
704:   delete jQuery.cache[ id ];
705:  }
706: },

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/613-be44832f

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200801151734
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。