若手IT勉強会(jQueryコードリーディング#1回目) をやってきました。
しょっぱな
Sizzleを読み始める。
。
。
。
無理w
みんな「ほえ〜」という感じなので、気を取り直してはじめから。
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行目
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文字列にしてくれるありがたい人。
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行目
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行目
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;
まだまだ読んだけど長くなるので続きはまた今度。
コードリーディングは結構体力使うなー><
*1:ちゃんと読んでないけどそんな感じだと思う><