04 | 2017/05 |  06

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQueryの挙動を解析する(26) jQuery 定義コードの再解析 on Ver1.3.2──jQuery解読(38)

このエントリイは、jQuery() の挙動を解読する(24) jQuery 1.2.2 における jQuery 定義コードを分析する──jQuery解読(36) の続編です。続編と言うよりも改訂編と言うべきかもしれません。上記エントリイには未解明な問題もあり、改めてこのエントリイで詳述することにしました。

jQuery定義と酷似する構造の簡易なコードを作成して解析する

jQuery の定義コードへの理解を深めるために、それに類似した短いコードを作成して解析してみました。

 jQuery 定義コードを解読するための簡単な類似コード
 1: (function(){
 2:     // block-A
 3:     var R  = window.R = function(a,b){
 4:         return new R.prototype.init(a,b);
 5:     } 
 6:     // block-B
 7:     R.prototype = {
 8:         init:function(){
 9:             this.x = arguments[0];
10:             this.y = arguments[1];
11:             this.z = this.x + this.y;
12:             return this;
13:         },
14:         area:function(){
15:             return this.x * this.y;
16:         },
17:         periphery:function(e,f){
18:             return 2* (e + f);
19:         }
20:     }
21:     // block-C
22:     R.prototype.init.prototype = R.prototype;
23: })();
上のコードの簡単な説明
  • jQuery オブジェクトに相当するそれとして R を定義し、( 2~5 行)
  • jQuery 定義コードと同様に そのプロトタイプオブジェクトの init メソッド(つまり R.prototype.init(a,b) )をコンストラクタとします。init メソッドの引数は本質的にどうでも良いことですが、数を変えるのも面倒なので jQuery 同様に2つ用意しました。( 2~5 行 )
  • R.prototype はそのプロパティに init() の他に、2つの関数オブジェクトを定義し、併せて3つのプロパティ(全て関数)を持つようにしました。( 6~20 行)
  • jQuery のコードに準じて init.prototype が R.prototype を参照するように設定しました。( 21~23 行)
  • jQuery 同様に全体を無名関数で包含し、かつ即実行するようにしました。( 1 と 23行 )
  • ここに R() はコンストラクタに関する Javascript の仕様から R.prototype.init.prototype のプロパティを継承します。
  • そして init.prototype は R.prototype を参照するよう定義付けられているので、結局 R() は R.prototype オブジェクトのプロパティを継承することになります。

こうして R() は次のようなプロパティを持つオブジェクトとなります。

要点は init コンストラクタ関数によって設定されたプロパティ(x,y,z)と共に、R.prototype のプロパティ(init、area 及び periphery の3つのメソッド)を継承している点です。

R() = {
 // x,y,z は init コンストラクタによって設定された。
 // x プロパティは 9 行の this.x で定義されているが、
 // R() に引数を付けなかったので値は未定義となっている。
 x : undefined,
 y : undefined, // 10行で定義されたが同上から未定義となっている。
 z : NaN, // 11行の this.z で定義されたが x,y 値が未定義なので NaN となる。

 // 以下は 22 行の R.prototype.init.prototype = R.prototype によって設定され
 // たもの。init コンストラクタのインスタンスである R() は Javascript の仕様から
 // init.prototype のプロパティを継承することになり、この init.prototype が 
 // R.prototype を参照するため、結局 R() は R.prototype オブジェクトのプロパティ
 // をそっくり継承することになる。
 init : function (x, y) { // init メソッドは insObj を初期化する働きをする
  // this は コンストラクタの仕様から insObj を参照する。
  this.x = x; this.y = y; this.z = this.x + this.y; return this;
 },
 // 14~16行で追加されている area プロパティ
 area : function () { return this.x * this.y; },
 // 17~19行で追加されているプロパティ
 periphery : function (c, d) { return 2 * (c + d); }
}
さて、以上のコード進行過程を解析してみます。
  1. 無名関数が実行されると R.prototype プロパティ共々関数が定義されます。無名関数が行うことはそれだけです。
  2. その後ユーザーにより R() が実行されると、説明の都合上当該インスタンスを insObj と名付ければ、(1) インスタンスオブジェクトが生成され、(2) this がこれを参照し、(3) R.prototype.init.apply( insObj, [a,b] ) が実行されます。
  3. そして最後に、3~4 行のコードによりこのインスタンスが呼び出し元に返されます。つまり、
       R(a,b) = this = insObj
    となります。

▲ToTop

上のコードを使ったインスタンスの例

以上で jQuery 定義コードの根幹部分を解読できたと思いますが、以下の幾つかの例示によって上記コードへの理解を深める一助にします。

なお、以下の getProp(obj) 関数によりオブジェクトのプロパティを取得します。

    var getProp = function(obj){
        var ret = [];
        for (var prop in obj) ret.push(prop + " : " +obj[prop]);
        return ret.join("\n") ;
    };
getProp(R(2,3))
/*  x : 2  y : 3  z : 5  init : function (x, y) {   this.x = x; this.y = y; this.z = this.x + this.y;  }  area : function () { return this.x * this.y; }  periphery : function (c, d) { return 2 * (c + d); } */
R("selector","content"); // {x:selector,y:content,z:selectorcontent}
R(2,3).init() // NaN
R(2,3).init(4,5) // {x:4, y:5, z=9}
R(2,3).area() // 6
R(2,3).area(4,5) // 6
R().area(2,3) // NaN
R(2,3).periphery(5,6); // 22
R().periphery(5,6); // 22

インクルードされる jQuery.js の読み込み過程で jQuery はどのようにプロパティを獲得するか

構造が jQuery に類似した上記コードの解析により、jQuery の定義コードの根幹部分は理解できましたが、そもそも知りたいことは、jQuery.js がブラウザに読み込まれる過程で、jQuery オブジェクトはどのように構成されるのか、という点なのです。

上記の類似コードの解析により、jQuery.prototype オブジェクトの全てのプロパティが、jQuery(selector,content) インスタンスのプロパティになることが分かりました。

ここに、jQuery.prototype オブジェクト( jQuery.fn オブジェクトに同じ ) は 35 行から 530 行(基本部分)、554~602 行( extend )、1351~1397 行( extend )、2778~2871 行( Event 関係の extend )、3105~3190 行( Ajax 関係の extend )、3662~3817 行( Animation 関係の extend )、4038~4084 行( offset )、4124~4162 行( position )と繰り返し登場します。

こうして、jQuery インスタンスには膨大なプロパティが登録されますが、この膨大なプロパティこそが、jQuery インスタンスプロパティとインスタンスメソッド及び jQuery クラスメソッドを駆使した、単一の記述「jQuery」による様々な window オブジェクトの操作を可能にしているわけです。

さて、これらの膨大な prototype オブジェクトからのプロパティの継承は、全て jQuery インスタンス生成時に行われます。他方、jQuery.extend(){ prop1:fn1(){}, prop2:fn2(){},・・・ } メソッドが jquery.js インクルード時に「実行」され、これにより jquery.js 読み込み完了時点で膨大な数のクラスメソッド( jQuery.prop1, jQuery.prop2, ・・・ )が jQuery オブジェクトに登録され、直ぐに活用できる状態になります。

そこで、extend() メソッドの解明をエントリイを改めて行うこととします。

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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