cimada-ism

若手IT勉強会(jQueryコードリーディング#1回目) をやってきました。

JavaScript, 勉強会

しょっぱな

Sizzleを読み始める。

。

。

。

無理ｗ

みんな「ほえ〜」という感じなので、気を取り直してはじめから。

15-18行目

• 高速化のためのものらしい。
• どのくらい高速化になるのだろう？

  15     // Will speed up references to window, and allows munging its name.
  16     window = this,
  17     // Will speed up references to undefined, and allows munging its name.
  18     undefined,

19-22行目

• 名前の衝突を防ぐための対策。
• 619-626行目に衝突を回避する関数がある。

  19     // Map over jQuery in case of overwrite
  20     _jQuery = window.jQuery,
  21     // Map over the $ in case of overwrite
  22     _$ = window.$,

619-626行目

• 19-22行目で退避させていた変数を戻す関数。

 619     noConflict: function( deep ) {
 620         window.$ = _$;
 621
 622         if ( deep )
 623             window.jQuery = _jQuery;
 624
 625         return jQuery;
 626     },

24-27行目

• jQueryの玄関。
• 実体は36-94行目。

  24     jQuery = window.jQuery = window.$ = function( selector, context ) {
  25         // The jQuery object is actually just the init constructor 'enhanced'
  26         return new jQuery.fn.init( selector, context );
  27     },

29-33行目

• HTML文字列、CSSセレクタのID指定文字列/クラス指定文字列を拾う正規表現。

  29     // A simple way to check for HTML strings or ID strings
  30     // (both of which we optimize for)
  31     quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
  32     // Is it a simple selector
  33     isSimple = /^.[^:#\[\.,]*$/;

36-94行目(init関数)

  36     init: function( selector, context ) {
             //以下細かく
  94     }

37-38行目

• selectorが未指定の時のデフォルト値。

  37         // Make sure that a selection was provided
  38         selector = selector || document;

40-46行目

• selectorがDOM要素だったら、そのDOM要素をラッピングしたjQueryオブジェクトを返す。

  40         // Handle $(DOMElement)
  41         if ( selector.nodeType ) {
  42             this[0] = selector;
  43             this.length = 1;
  44             this.context = selector;
  45             return this;
  46         }

49-53行目 in 48-78行目

• 48-78行目全体は、selectorが文字列の時の処理。
• 49-53行目は、その文字列がHTML文字列orCSSセレクタのID指定かどうかのチェック。

  49             // Are we dealing with HTML string or an ID?
  50             var match = quickExpr.exec( selector );
  51
  52             // Verify a match, and that no context was specified for #id
  53             if ( match && (match[1] || !context) ) {

55-57行目 in 48-78行目

• HTML文字列をjQueryオブジェクトにする前の下ごしらえ。
• jQuery.cleanは847-965行目にある関数で、渡されたHTMLを綺麗にする関数。
• 閉じタグがないとかそういうのを正しいHTML文字列にしてくれるありがたい人。

*1

  55                 // HANDLE: $(html) -> $(array)
  56                 if ( match[1] )
  57                     selector = jQuery.clean( [ match[1] ], context );

59-73行目 in 48-78行目

• ID指定の場合はgetElementByIdでサクっと取得する。
• でもIEとOperaでバグがあるからちょっと注意。(63-66行目)
• IDでちゃんと取得できたorなにも取得できなかったらそのままjQueryオブジェクトにする。(68-72行目)

  59                 // HANDLE: $("#id")
  60                 else {
  61                     var elem = document.getElementById( match[3] );
  62
  63                     // Handle the case where IE and Opera return items
  64                     // by name instead of ID
  65                     if ( elem && elem.id != match[3] )
  66                         return jQuery().find( selector );
  67
  68                     // Otherwise, we inject the element directly into the jQuery object
  69                     var ret = jQuery( elem || [] );
  70                     ret.context = document;
  71                     ret.selector = selector;
  72                     return ret;
  73                 }

75-78行目 in 48-78行目

• 文字列なんだけどHTMLでもID指定でもない場合はfind関数で探しにいく。
• find関数はまだ読んでない。

  75             // HANDLE: $(expr, [context])
  76             // (which is just equivalent to: $(content).find(expr)
  77             } else
  78                 return jQuery( context ).find( selector );

80-83行目

• selectorに関数が渡された時は、DOM構築待ちをしてから実行。
• すごくよく使う。いわゆる「$(function(){ ... });」ってやつ。

  80         // HANDLE: $(function)
  81         // Shortcut for document ready
  82         } else if ( jQuery.isFunction( selector ) )
  83             return jQuery( document ).ready( selector );

85-89行目

• jQueryオブジェクトが渡された時の動作？
• コピーコンストラクタ的な？

  85         // Make sure that old selector state is passed along
  86         if ( selector.selector && selector.context ) {
  87             this.selector = selector.selector;
  88             this.context = selector.context;
  89         }

91-94行目

• jQueryでラップして返すところ。
• setArrayもmakeArrayもまだ読んでない。

  91         return this.setArray(jQuery.isArray( selector ) ?
  92             selector :
  93             jQuery.makeArray(selector));
  94     },

151-156行目

• jQueryオブジェクトの配列に対して、それぞれにいてレーションする関数。
• 実体は670-696行目

 151     // Execute a callback for every element in the matched set.
 152     // (You can seed the arguments with an array of args, but this is
 153     // only used internally.)
 154     each: function( callback, args ) {
 155         return jQuery.each( this, callback, args );
 156     },

670-696行目

 670     // args is for internal usage only
 671     each: function( object, callback, args ) {
            //以下細かく
 696     },

674-683行目 in 670-696行目

• 内部的な処理っぽいのでとりあえずは飛ばす。

686-689行目 in 670-696行目

• eachに渡されたオブジェクトが配列じゃなければそのオブジェクトの各プロパティに対してコールバックを呼ぶ。

 672         var name, i = 0, length = object.length;
 686             if ( length === undefined ) {
 687                 for ( name in object )
 688                     if ( callback.call( object[ name ], name, object[ name ] ) === false )
 689                         break;

690-695行目 in 670-696行目

• eachに渡されたオブジェクトが配列なら配列の各要素に対してコールバックを呼ぶ。
• 最後は自分自身(jQueryオブジェクト)を返す。(メソッドチェーンのため)

 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;

まだまだ読んだけど長くなるので続きはまた今度。

コードリーディングは結構体力使うなー＞＜

Permalink | コメント(0) | トラックバック(2) | 01:47