06 | 2017/07 |  08

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQuery()の挙動を解読する。(12) pushStack()解読 upon ver1.3.2──jQuery解読(21)

このエントリイの改訂履歴
  • 初稿:2007/12/04
  • 改訂:2009/3/8…… ver1.3.2 対応とするために全面改訂しました。

pushStack()再考

以前こちら( 簡単なインスタンスメソッドいくつか──jQuery解読(19) )で pushStack() について次のように触れました。

この pushStack() は大変興味深いメソッドです。新しいインスタンスオブジェクトの その名も prevObject プロパティに、直前の this が指し示すオブジェクトが格納されるようにコーディングされています。このメソッドは jquery.js で7箇所利用されています。

このことの意味をもう少し掘り下げてみたいと思います。この pushStack() メソッドはどの様な場合に利用するのか、と言う点を明らかにしたいのです。そうしないとこのメソッドを本当に分かったことにはならないと思うからです。

jQuery(obj) 再解析 upon ver 1.3.2

ところで、1.3.x でこのメソッドの機能が拡張されました。従前のこのメソッドは、新しい jQuery インスタンス( newIns とする)を作成する際に、既に在る別の jQuery インスタンス( これを仮に oldIns とする)を、newIns のプロパティに格納するだけの単純な機能しかありませんでした。

ver1.3.x では pushStack() メソッドの引数を 2 つ増やして 3 つとし、find() メソッドやその他のインスタンスメソッドをそのメソッドの引き数付きで指定出来るようになりました。

この結果、単に newIns のプロパティに oldIns を格納するだけでなく、oldIns に対して様々な jQuery インスタンスメソッドを実行する際に、当該の oldIns とメソッド情報をセットにして newIns のプロパティに格納出来るようになりました。

これにより、end() メソッドで遡れる「過去」が拡張されたはずですが、その件はまだ未確認です。

以下に、こうした機能拡張を踏まえて、改めて pushStack() メソッドのコードを解読してみます。以下の色づけしたコメントがコード進行過程を解析したつもりの解説です。

119: // Take an array of elements and push it onto the stack
120: // (returning the new matched element set)
121: pushStack: function( elems, name, selector ) {
122:  // Build a new jQuery matched element set
    // elems をそのプロパティ値に保持する新しい jQuery
    // インスタンスを作成し、それを ret に代入する。
123:  var ret = jQuery( elems );
124:
125:  // Add the old object onto the stack (as a reference)
    // pushStackの起動元オブジェクトthisを ret オブジェクトの prevObject
    // プロパティに代入する。
126:  ret.prevObject = this;
127:
    // this の contextプロパティ値を ret の context プロパティに代入する。
128:  ret.context = this.context;
129:
130:  if ( name === "find" ) // 第 2 引数が文字列 find の時には
     // 起動元に selector プロパティがあればその値の後に半角スペース
     // を付け、更に 第 3 引数の selector を付けて ret の selector プロ
     // パティ値とする。 例:this.selector = "document", selector = "p"
     // の時には、→ ret.selector = "document p" となる。
     // 尚 this.selector プロパティがなければ、右辺は selector だけとなる。
     // 従って引数 selector がなければ ret.selector = "" となる。
131:   ret.selector = this.selector + (this.selector ? " " : "") + selector;
    // find ではない第 2 引数 name が存在している場合には
132:  else if ( name )
     // 例:ret.selector = "thisSelctor.method(arg)" つまり、thisSelector
     // を起動元とする引数付き method を selector プロパティ値とする。
133:   ret.selector = this.selector + "." + name + "(" + selector + ")";
134:
135:  // Return the newly-formed element set
136:  return ret; // ret オブジェクトを返す。
137: },

▲ToTop

pushStack メソッドによるインスタンスオブジェクトの変化

以上のコメントは機械的な説明に過ぎない感があるので、もう少し具体的・視覚的に分かりやすい表現はないものかと思案して、次のようにプロパティの変化を表示してみました。起動元インスタンスを oldIns、 pushStack メソッドによる elems をプロパティとして持つ新しいインスタンスを newIns とすると、pushStack() メソッドによって、newIns オブジェクトのプロパティは以下のようになります。

newIns = jQuery(sel1.cont1).pushStack(elems,name,selector) によるインスタンスの変化

ここに定義から oldIns = jQuery(sel1.cont1) です。

■ name="", selector="" の場合 newIns は次のようになります。
newIns = {
  prevObject : jQuery(sel1,cont1),
  context : cont1,
  selector : sel1,
  length : N,
  0 : elem1, // elem1 は elemsにマッチする最初のノード
  1 : elem2, // 以下ノードが順に並ぶ。
  ・・・,
  N-1 : elemN,
  jquery : "1.3.2",
  ・・・
}

■ name="find", selector="newsel" の場合 newIns は次のようになります。
newIns = {
  prevObject : jQuery(sel1,cont1),
  context : cont1,
  selector : "sel1 newsel", // findメソッドで使用する検索条件が保持される
  // 以下略
}
■ name!="find", selector="newsel" の場合 newIns は次のようになります。
newIns = {
  prevObject : jQuery(sel1,cont1),
  context : cont1,
  selector : sel1.name(newsel), // sel1の name メソッドが newsel を引数として保持される
  // 以下略
}

▲ToTop

jquery.js における pushStack メソッドの実例を見る

jquery.js における実際の pushStack() メソッドの使われ方をフォローして、学習を深めようと思います。まず、find() インスタンスメソッドを見てみます。このメソッドは呼び出し元オブジェクトの中から、selector 条件にマッチするノードをヒットするためのもので、jQuery オブジェクトのプロパティに、検索結果をセットするために、pushStack() メソッドが使用されています。

なお、 find() メソッドによる検索対象が 1 つの場合と、複数ある場合とに分けてコードが綴られています。

jQuery().find() インスタンスメソッド
288: find: function( selector ) {
    // ▼ this (= jQuery インスタンス) の length プロパティが 1 の場合
289:  if ( this.length === 1 ) {
     // 空配列に対応する jQuery インスタンスオブジェクト( A )を作り、その
     // プロパティに、起動元の jQuery() インスタンスや、find の検索条件
     // である selector の情報を保持する。そして当該 A オブジェクトを
     // 変数 ret に代入する。
290:   var ret = this.pushStack( [], "find", selector );
291:   ret.length = 0; //配列のようなプロパティの length 値を 0 とする。
     // これにより次行で求めるインスタンスの配列のようなプロパティ名は 0 
     // から始まることになる。
     // this[0]、つまり jQuery インスタンスの 0 プロパティ値を対象として、
     // jQuery.find() クラスメソッドを実行し、結果を ret オブジェクトに代入する。
292:   jQuery.find( selector, this[0], ret );
293:   return ret; // 代入された ret を this に返す。
    // ▼ this (= jQuery インスタンス) の length プロパティが 1 でない場合
294:  } else {
295:   return this.pushStack( jQuery.unique(jQuery.map(this, function(elem){
	    // this のプロパティの 1 つ 1 つを対象として走査し、その中
	    // から selector 条件に合致する要素を抽出して map する。つまり、
	    // elem を検索結果で上書きする。重複がないかどうかチェックしてから
296:    return jQuery.find( selector, elem );
     // pushStack メソッドにより生成され、find 結果である elem が登録されている
     // jQuery インスタンスの selector プロパティ値を " elem selector"とする。
297:   })), "find", selector );
298:  }
299: },
slice() インスタンスメソッド

次は、pushStack() メソッドの第 2 引数が find ではない場合です。not() メソッドにもそのようなコードがありますが、より簡単な slice() インスタンスメソッドを見てみます。

■ jQuery().slice() インスタンスメソッド(on jquery.js ver1.3.2)
499:slice: function() {
500: return this.pushStack( Array.prototype.slice.apply( this, arguments ),
501:  "slice", Array.prototype.slice.call(arguments).join(",") );
502:},

上のコードによって返値の jQuery インスタンスオブジェクトはどうなるのか考えてみます。なお、arguments は Javascript の仕様から、配列のようなオブジェクト Arguments を参照するプロパティです。そして slice メソッドの引数となるのですから、例えば [2,5] のような位置を示す数値でなければこの式には意味がありません。

以上を踏まえて slice() メソッドの返値 Insobj は次のようなプロパティを持つことになります。なお、言うまでもなく this は slice メソッドの起動元となった jQuery インスタンスオブジェクトです。

  InsObj:{
    prevObject : this, // 模式的に this と書いたが起動元 jQuery インスタンスのこと
    context : this.context, 
    selector : this.selector.slice( m, n ),
    length : n - m + 1, // augrument=[m,n] (m < n)
    m : this[m],
    m+1 : this[m+1],
    ・・・,
    n : this[n],
    jquery : "1.3.2",
    // 以下略
  },

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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