09 | 2017/10 |  11

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQuery の挙動を解読する(31):jQuery.each({ nameN:fnN(){}},function(){}) によるメソッド登録──jQuery解読(48)

$.each( { nameN,funcN }, fn ) 形式によるメソッドの一括登録

jquery.js #1177-1263 では $.each クラスメソッドを利用して、 fn の内容別に 3 つに分けて各種メソッドの一括登録が行われています。

この方法によるメソッド登録は他にも、2 箇所 ( #2888-2892、 #3954-3964 )ありますが、今回対象とする 3 ブロックのメソッド一括登録は、jQuery prototype オブジェクト、すなわちインスタンスメソッドの登録である点において、他の 2 箇所での使用方法と一線を画しています。

さて、#1177-1263 では obj オブジェクトプロパティとして、複数のメソッド名とメソッドを定義し、それらを巡回処理により順に jQuery インスタンスメソッドとして登録しています。まず #1177-1196 では トラバース系の DOM メソッドを、続く #1198-1216 では 挿入置換系の DOM メソッドを、#1218-1263 では属性処理 DOM メソッドを、それぞれ定義しています。

ここに、これらは共通して $.each( obj,fn ) メソッド実行コードなので、jquery.js 読み込み時に実行され、こうして obj オブジェクト内にリストアップされている各種メソッドは、プロトタイプオブジェクトに登録され jQuery インスタンスメソッドとなります。

以下に、これらの 3 つの $.each({nameN,funcN},fn) 形式によるインスタンスメソッド一括登録コードを解読します。

DOM トラバース系のインスタンスメソッド登録

次のコードは、親子、兄弟姉妹、前後などの要素ノードを扱うインスタンスメソッドを一括してプロトタイプオブジェクトに登録するものです。

   // #1177-1187 は「登録するメソッドリスト」をプロパティとするオブジェクト
1177:jQuery.each({ // $.dir、.nth、.sibling は Sizzle 内で定義されている。
1178: parent: function(elem){return elem.parentNode;},
1179: parents: function(elem){return jQuery.dir(elem,"parentNode");},
1180: next: function(elem){return jQuery.nth(elem,2,"nextSibling");},
1181: prev: function(elem){return jQuery.nth(elem,2,"previousSibling");},
1182: nextAll: function(elem){return jQuery.dir(elem,"nextSibling");},
1183: prevAll: function(elem){return jQuery.dir(elem,"previousSibling");},
1184: siblings: function(elem){return jQuery.sibling(elem.parentNode.firstChild,elem);},
1185: children: function(elem){return jQuery.sibling(elem.firstChild);},
1186: contents: function(elem){return jQuery.nodeName(elem,"iframe")?elem.contentDocument||elem.contentWindow.document:jQuery.makeArray(elem.childNodes);}
1187:}, function(name, fn){// name はリスト内のメソッド名称、fn はリスト内の関数を指す
    // プロトタイプオブジェクトに function name(selector){・・・ } を登録する。 
1188: jQuery.fn[ name ] = function( selector ) { // selector は name メソッドの引数
     // インスタンス this に fn メソッドを map する。
     // 例えばイテレート処理の最初には、parent プロパティが対象となるが、
     // map メソッドの定義から ret は this.length 個の this[i].parentNode 
     // を要素とする配列となる。
1189:  var ret = jQuery.map( this, fn );
1190:  // もし selector が文字型の場合
1191:  if ( selector && typeof selector == "string" )
      // ノードを要素とする配列 ret から selector 条件に
      // 合致するノードを抽出する。
1192:   ret = jQuery.multiFilter( selector, ret );
1193:  // 重複チェックを掛けて jQuery オブジェクトとして return
     // する。このとき this インスタンスは return オブジェクトの
     // prevObject プロパティに保持する。
1194:  return this.pushStack( jQuery.unique( ret ), name, selector );
1195: };
1196:});

以下には、上の each メソッド第 1 引数オブジェクトのプロパティ内で、繰り返し登場する Sizzle ユーティリティ内にある jQuery クラスメソッドを簡単に解読しました。

なお、これらの 3 つのコードは全て jQuery クラスメソッドの登録ですが、興味深いことに extend メソッドを使わずメソッドを直接 jQuery オブジェクトに登録する「 素朴な 」方法を採用しています。

■ jQuery.multiFilter
2383: jQuery.multiFilter = function( expr, elems, not ) {
2384:  if ( not ) {
2385:   expr = ":not(" + expr + ")"; // "not(expr)"文字列を生成して代入
2386:  }
2387:  // 要素ノード elems から expr に合致する要素を抽出し return 値とする。
2388:  return Sizzle.matches(expr, elems);
2389: };
■ jQuery.dir
2391: jQuery.dir = function( elem, dir ){
2392:  var matched = [], cur = elem[dir];
2393:  while ( cur && cur != document ) { // elem の dir プロパティを
2394:   if ( cur.nodeType == 1 ) // 走査し、それが要素ノードであれば
2395:    matched.push( cur );  // matched 配列に格納する。
     // cur の dir プロパティを cur に代入してloopを繰り返す。
     // これにより cur ノードの子ノードがあれば、それが走査対象となる
2396:   cur = cur[dir];
2397:  }
2398:  return matched; // 該当要素ノードを格納した配列を返す。
2399: };
■ jQuery.nth
2401: jQuery.nth = function(cur, result, dir, elem){
2402:  result = result || 1;
2403:  var num = 0;
2404:  // cur がある限りその dir プロパティを走査する
2405:  for ( ; cur; cur = cur[dir] ) // cur が要素ノードで num 値が
2406:   if ( cur.nodeType == 1 && ++num == result ) // result に等しくなるまで
2407:    break; // loopする。
2408: 
2409:  return cur;  // 該当した要素ノードを返す。
2410:
 };

▲ToTop

挿入置換系の DOM インスタンスメソッド

2 つめは、登録済みの jQuery インスタンスメソッドを使って、その機能を逆転させるためのメソッド群を一括登録するコードです。

1198: jQuery.each({
1199:  appendTo: "append",
1200:  prependTo: "prepend",
1201:  insertBefore: "before",
1202:  insertAfter: "after",
1203:  replaceAll: "replaceWith"
    // name はプロパティ名、original はプロパティ値
1204: }, function(name, original){
1205:  jQuery.fn[ name ] = function( selector ) { // selector は name メソッドの引数
      // selector に合致するノードを insert jQuery オブジェクトに代入
1206:   var ret = [], insert = jQuery( selector );
1207:    // 配列のようなプロパティを走査
1208:   for ( var i = 0, l = insert.length; i < l; i++ ) {
       // 要素があれば clone をイベント付きで作ってその、なければ this の
       // 要素を配列として取り出す。
1209:    var elems = (i > 0 ? this.clone(true) : this).get();
       // jQuery(insert[i]).original( elems ) メソッドを起動。
       // これにより insert[i] ノードに elems が追加される。
1210:    jQuery.fn[ original ].apply( jQuery(insert[i]), elems );
1211:    ret = ret.concat( elems );  // elems を ret 配列に線形化して結合する。
1212:   }
1213:    // ret jQuery オブジェクトを返し、その prevObject プロパティに this を保持する。
1214:   return this.pushStack( ret, name, selector );
1215:  };
1216: });

▲ToTop

属性処理系の DOM インスタンスメソッド

最後に、タグ属性を操作するメソッド群の登録です。

1218:jQuery.each({
1219: removeAttr: function( name ) {
1220:  jQuery.attr( this, name, "" );
1221:  if (this.nodeType == 1)
1222:   this.removeAttribute( name );
1223: },
1224:
1225: addClass: function( classNames ) {
1226:  jQuery.className.add( this, classNames );
1227: },
1228:
1229: removeClass: function( classNames ) {
1230:  jQuery.className.remove( this, classNames );
1231: },
1232:
1233: toggleClass: function( classNames, state ) {
1234:  if( typeof state !== "boolean" )
1235:   state = !jQuery.className.has( this, classNames );
1236:  jQuery.className[ state ? "add" : "remove" ]( this, classNames );
1237: },
1238:
1239: remove: function( selector ) {
1240:  if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
1241:   // Prevent memory leaks
1242:   jQuery( "*", this ).add([this]).each(function(){
1243:    jQuery.event.remove(this);
1244:    jQuery.removeData(this);
1245:   });
1246:   if (this.parentNode)
1247:    this.parentNode.removeChild( this );
1248:  }
1249: },
1250:
1251: empty: function() {
1252:  // Remove element nodes and prevent memory leaks
1253:  jQuery(this).children().remove();
1254:
1255:  // Remove any remaining nodes
1256:  while ( this.firstChild )
1257:   this.removeChild( this.firstChild );
1258: }
1259:}, function(name, fn){
1260: jQuery.fn[ name ] = function(){ // prototype オブジェクトに登録する。
     // each メソッドの定義から次のように読み解けます。
     // jQuery インスタンス(this) の各プロパティに fn(arguments) メソッド
     // を登録し、処理後の this インスタンスを返値とする。例えば、
     // name が remove の時には、remove.apply(this,arguments) となる。
1261:  return this.each( fn, arguments );
1262: };
1263:});
1264:

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

<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が開きます。

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