01 | 2017/03 |  03

  1. 無料サーバー

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

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

jQuery()の挙動を解読する。(11) 簡単なインスタンスメソッドいくつか──jQuery解読(19)

このエントリイの改訂履歴
  • 初稿:2007/12/3
  • 改訂:2009/2/28……get()メソッド解読箇所をjquery Ver1.3.2対応に

this の何たるかが一応分かったことを踏まえて・・・

直前のエントリイでthisを分析しました。これを踏まえて早速jQuery()インスタンスメソッド内で、縦横無尽に活用されている this に注目して、挙動解読を行いたいと思います。

ここでは get()、pushStack()、 setArray()、index() を順に取り上げてみようと思います。とりあえず内容が簡単ですから(苦笑)。

なお、以下において共通して InsObj とはインスタンスオブジェクトの意味です。

また、以下のコードリストでは jQuery UI の resizable を利用していますので、サイズは縦横自由に変更できます。W3C の仕様を守らない IE 以外では、このブログに設定されているコンテナ幅を飛び出すリサイズは出来ないので、pre タグの overflow スタイルを auto に設定し、W3C仕様の場合でも全文が見えるようにしました。

get()……目的の DOM Elements を格納した jQuery インスタンスオブジェクトから、目的のノードを要素とする配列を取得する、あるいは num 番目のノードを抽出する。

get() は2つの役割を担っています。まず、jQuery(selector,context) で取得したノードオブジェクトを、配列として取り出す為に機能します。引数を与えずに get() メソッドを実行すればノードを要素とする配列が取得できます。但し、返される配列の要素はノードですから、そのまま alert しても [Object HTMLPagraphElement] のように表示されるだけです。nodeName などの DOM メソッドで展開しないと意味のある結果は表示されません。

例えば次のボタンをクリックすると、このサイト上で alert($("p").get();) が実行されます。このページ上にある p タグの一覧を取得する訳ですが、どの様な結果が表示されるのか試すことが出来ます。

他方、整数値を引数としてget(num)を実行すれば、目的のノードを取得した jQuery インスタンスオブジェクトから num プロパティに登録されているノードが返されます。

<jquery.js ver 1.3.2>
109: // Get the Nth element in the matched element set OR
110: // Get the whole matched element set as a clean array
111: get: function( num ) {
112:  return num === undefined ?
113:
114:   // Return a 'clean' array
115:   Array.prototype.slice.call( this ) :
116:
117:   // Return just the object
118:   this[ num ];
119: },

上で色づけした行が下の Ver 1.2.1 と異なっています。

ここに this は、0 から始まる連番をプロパティ名とし、jQuery("selector") で指定した条件を満足する DOM Element をプロパティ値とする array like なプロパティ群と、jQuery.prototype プロパティ群とで構成されるオブジェクトです。Array.prototype.slice.call( this ) メソッドはこのオブジェクトから array like なプロパティ値だけを 「 配列として 」 抽出します。( → jQueryに学ぶ Javascript の基礎(6) func.apply(obj , array) upon Ver1.3.2──jQuery解読(39) 参照 )

またこの変化した行の意味は以下の引用が簡潔明瞭に説明してくれます。

Array.prototype.slice.call(arguments) というのは Arguments オブジェクトを配列に変換するための決まり文句のようなものです。Array オブジェクトの slice メソッドは、配列の一部を抜き出し新たな配列として返しますが、引数を省略すると 0 番目から length - 1 番目までの要素を抜き出したもの、すなわち元の配列全体のコピーを返します。これを Arguments オブジェクトに適用することで、Arguments オブジェクト全体をコピーした配列が返ってくるというわけです。

( 出典: JavaScript でカリー化、再び: Days on the Moon

<jquery.js ver 1.2.1>
95: get: function( num ) { // 目的とする num 番目の n を引数とし
93:  return num == undefined ? //numが未定義ならば
94:
95:   // Return a 'clean' array
96:   jQuery.makeArray( this ) : //InsObj の中の対象要素ノードの全体を配列
97:                 //に変換して返値とし
98:   // Return just the object
99:   this[num]; //num が与えられていれば InsObj 配列から num 番目を
          //抽出して返値とする。
100: },

pushStack()……対象オブジェクトの変更とバックアップ

102: pushStack: function(a) { //所与の第一引数を受け取り、
103:  var ret = jQuery(a); //それを第一引数とするjQuery(a)を起動して
          //別のInsObjを作成して、それを ret 変数に代入する。
104:  ret.prevObject = this; //その時の this を
        //retのプロパティに代入し、this をプロパティとして
105:  return ret; //持つ新規 InsObj を呼出し元に返す。
106: },

この pushStack() は大変興味深いメソッドです。新しいインスタンスオブジェクトの その名も prevObject プロパティに、直前のthisオブジェクトが格納されるようにコーディングされています。このメソッドは jQuery.js で7箇所利用されています。なお、 pushStack()解読──jQuery解読(21) にて pushStack() の必要性、役割について考えてみました。よろしければご覧ください。

setArray() ……インスタンスデータの初期化と更新

108: setArray: function( a ) {
109:  this.length = 0; //InsObjに代入されている値を全て削除して空にする。
110:  Array.prototype.push.apply( this, a ); //空のInsObjに a 配列の要素を挿入
111:  return this; // a の各要素が代入された InsObj 配列を呼出し元にreturnする。
112: },

index()……取得したノード内でobjが何番目にあるか?

118: index: function( obj ) { //目的のオブジェクトを引数とする
119:  var pos = -1; //pos変数を初期化する。
120:  this.each(function(i){ //InsObj からeach()メソッドを起動
121:   if ( this == obj ) pos = i; //定義からthis=InsObjであり、
122:  });  //その各要素をobjと比較して、objと一致すればその位置を
       //示す i を pos 変数に代入する。
123:  return pos; //合致した位置が代入された pos の値を呼出し元に return する。
124: },

 

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

200712030032