05 | 2017/06 |  07

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQuery() の挙動を解読する(5) jQuery.each()解読──jQuery解読(9)

このエントリイの改訂履歴
  • 初稿:2007/11/13
  • 改訂:2009/3/12…… ver1.3.2 対応とするために最小限の改訂を施しました。
jquery.js 1.3.2 におけるこのエントリイの対象箇所
■ jQuery.each() メソッドコード
670: // args is for internal usage only
671: each: function( object, callback, args ) {
672:  var name, i = 0, length = object.length;
673:
674:  if ( args ) {
675:   if ( length === undefined ) {
676:    for ( name in object )
677:     if ( callback.apply( object[ name ], args ) === false )
678:      break;
679:   } else
680:    for ( ; i < length; )
681:     if ( callback.apply( object[ i++ ], args ) === false )
682:      break;
683:
684:  // A special, fast, case for the most common use of each
685:  } else {
686:   if ( length === undefined ) {
687:    for ( name in object )
688:     if ( callback.call( object[ name ], name, object[ name ] ) === false )
689:      break;
690:   } else
691:    for ( var value = object[0];
692:     i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
693:  }
694:
695:  return object;
696: },

jQuery.each() はどんなことをするための関数か?

何はともあれjQuery.each() の実例を見て何をするメソッドなのかを理解する必要があるでしょう。

jQuery.each(
 ["white","red","blue"],
 function(i, n){alert(i +"番目は : " + n +"です");}
);

上の例は jQuery.com Web サイトの例題をちょっと改訂したものです。序でに本家の解説も引用しておくと「普遍的な反復処理関数で、オブジェクトと配列の両方で継ぎ目なく反復処理を行う場合に使える。なおこの関数は$().each()とは別物で、何であろうと反復処理する場合に使用出来る。ここでcallback(呼び出)される関数の引数は2つあり、1番目はオブジェクトのキー文字列か配列のインデックスで2番目は値である。」

これを踏まえて対象が配列ではなくオブジェクトの場合の反復関数を作ってみます。

jQuery.each(
 {"a":"white","b":"red","c":"blue"},
 function(i, n){alert(i +" は " + n +" です");}
);

上を実行すると、「a は white です」「b は red です」「c は blue です」と順にalertされます。つまり jQuery.each()は、任意のオブジェクトか配列に対して、その内容を順番に取りだし何らかの処理をさせるための関数です。これは所謂イテレーターと呼ばれる関数で、Javascript そのものに実装されていないことから、それぞれのフレームワークであれこれと定義されているようです。prototype.js にも arrayObject.each(arg) なる形式のイテレーターがあった気がします。

さて、jQuery.each() は最大 3 つの引数( obj, callback, args )を取り、obj が配列であってもオブジェクトであっても、また args があってもなくても、それぞれの要素又はプロパティに対して callback 関数でその各々に対して何らかの処理をするよう定義されています。

▲ToTop

jQuery.each() の解読──概要編

5jQuery.each() は最大3つの引数(obj, fn, args)を取り、第3引数の有無と第1引数が配列であるか否かによって、都合4つのケースに分けて定義されています。

670: // args is for internal usage only
671: each: function( object, callback, args ) {
672:  var name, i = 0, length = object.length;
673:
674:  if ( args ) { // 第3引数argsがある場合
675:   if ( length === undefined ) { // 配列でないならば
676:    for ( name in object )  // オブジェクトを走査して
       // object[ name ]を呼び出し元として、callback
       // 関数を args を引数にして起動する。返値が得られなければ break する。
       // これにより例えば、プロパティ値を args で加工するような callback
       // 関数を定義すれば、プロパティ値の変更が出来る。
677:     if ( callback.apply( object[ name ], args ) === false )
678:      break;
679:   } else
680:    for ( ; i < length; ) // 配列の場合
       // その要素を呼び出し元にして args 引き数付きの callback を実行する。
       // break は上と同様に作用する。
681:     if ( callback.apply( object[ i++ ], args ) === false )
682:      break;
683:
684:  // A special, fast, case for the most common use of each
685:  } else { // こちらの方が一般的な使われ方である。
686:   if ( length === undefined ) { // オブジェクトならば
687:    for ( name in object ) // オブジェクト走査
       // プロパティ値を呼び出し元に、プロパティ名とプロパティ値を引数とする
       // callback 関数を実行する。break は上と同様。
688:     if ( callback.call( object[ name ], name, object[ name ] ) === false )
689:      break;
690:   } else
691:    for ( var value = object[0]; // 配列走査
       // 配列要素を呼び出し元にして、インデックスと要素を引数とする
       // callback 関数を実行する。break は上と同様。
692:     i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
693:  }
694:
695:  return object; // 加工された obj を返す
696: },

▲ToTop

jQuery.each()の解読──学習編

apply()メソッドの活用

jQuery.each() の 4 つのケースでは全て apply() 又は call() メソッドが活用されています。そしてこれらのメソッドは素人には馴染みが薄く、これまできちんと理解していませんでした。

しかし、それらが理解できなければ jQuery.each は全く分かりませんので、必死に学習した結果、今は何とか分かったような気持ちになっています。

fn.apply(obj,args) は obj.fn(args) であり、fn.call(obj,arg1,arg2,・・・) は obj.fn(arg1,arg2,・・・) であることが何とか理解出来、やっと jQuery.each の解読を果たすことが出来ました。

なお、apply の第2引数 args は必ず配列でなければなりませんが、それが callbakck 関数に引数として引き渡される時点では、配列そのものとしてではなく、その要素が取り出されて渡されます。いわば args.join() 適用後の文字列が引数に渡される訳です。

そのことを試してみたのが以下のコードです。alertは 1,2,3,4,this,test と表示されます。

■ arguments プロパティの「展開」をテストするコード
 function doDisp(n){
     alert(n);
 }

 function doTest(){
     doDisp.apply(this,arguments) 
}

 doTest([1,2,[3,4],["this","test"]])
if(・・・) break;文

if ( callback.apply( obj[i], args ) === false ) break;
には戸惑いました。false でなかった場合、つまり break しない場合の処理がどこにも見あたらないからです。「if (expression) statement」の statement がないのです。jQuery の動作結果から判断して false でない場合には、それが for ループ文の出力結果となる、と理解せざるを得ないわけで、「そういうものか」と合点せざるを得ませんでした。

しかし、よくよく考えてみれば、callback.apply( obj[i], args ) の実行結果と false を同値演算子で比較しているということは、まさしく callback.apply( obj[i], args ) は実行されているわけです。

実は、正確に言えば、if 文の statement は break; であり、expression が statement 的な式文となっているのでした。

また、等値演算子ではなく同値演算子を使う理由についても調べる迄は全く理解できませんでした。もしこのケースで等値演算子を利用すると false を 0 に置き換えられてから左辺と比較されるため、この式は常に false となってしまいます。どうしても同値演算子でなければならないわけです。

またしても 1 つ学習しました!

for ループ文の特徴的使い方

for ループ文も特異です。

ここでもまた等値演算子ではなく同値演算子が利用されています。そしてこの for 文は空オブジェクト{}を返していますが、callback.call(val,i,val) !== false; である限り、つまり callback.call(val,i,val) の実行結果がある限り callback.call(val,i,val) を返しています。こうして意味のあるコードとなっている訳でやっと理解は出来ましたが、難解でした。

次に、691 行の for に続くループ条件部分の( )内も不思議の連鎖です。

条件が2つあるように見えるケースに、最初は戸惑いました。勿論 2 つの条件があるのではなく条件は 1 つですがそれが複合的になっているのでした。( i < ol && callback.call(value,i,value) !== false )

最後に増分値が単なるインクリメントではなく式であるケースも初体験です。

ここで使われている for loop 文はまさしく未知との遭遇でした。

---------------------------------------------------

次回は init() メソッド内で呼び出されて重要な役割を果たす jQuery.clean() メソッドを解読する予定です。

▲ToTop

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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