â–

【jQuery】 jQuery(1.4.2)のソースを少し読むなど

• jQueryのソース読みなど
  • なんとなく実行(ver 1.4.2)
  • 概要掴むくらいの感じで
  • 6000行くらいか(まあ6241行ですけど。。)

for loopのテクとか

• まあJsでは良く使うテクニックが散見される
  • 例えば下記のinArrayコードのfor ( var i = 0, length = array.length; i < length; i++ )って部分
  • ちなみにjQuery cook bookとかだとeachつかうよりforで回すほうが速いので処理速くする際にはこうする的なことが書いてたり。
  • あと、i++より++iのがブラウザによっては速くなるとか,htmlより[0].innerHTMLのがDOM Updateが速くなるとかいう事もjQuery Cook Bookに書いてたりしたり

inArray: function( elem, array ) {
	if ( array.indexOf ) {
		return array.indexOf( elem );
	}

	for ( var i = 0, length = array.length; i < length; i++ ) {
		if ( array[ i ] === elem ) {
			return i;
		}
	}

	return -1;
},

splitテクとか

• 何かしらの処理を一気にやるときに使う
  • 一気にevnent bindingしたりするときに使ったり
  • Ajax Event handler attachするときに使ったり

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
	"change select submit keydown keypress keyup error").split(" "), function( i, name ) {

	// Handle event binding
	jQuery.fn[ name ] = function( fn ) {
		return fn ? this.bind( name, fn ) : this.trigger( name );
	};

	if ( jQuery.attrFn ) {
		jQuery.attrFn[ name ] = true;
	}
});

ajax関連など(bind bind)

jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "), function( i, o ) {
	jQuery.fn[o] = function( f ) {
		return this.bind(o, f);
	};
});

Ajax周りの関数の実装など

• 色々な関数があるが、基本的には内部でjQuery.Ajaxを使う構造になっている

• get: 内部でjQuery.Ajax利用
• getScript 内部でjQuery.get利用
• getJSON: 内部でjQuery.get利用
• post: 内部でjQuery.Ajax利用
• load: 内部でjQuery.Ajax利用

global objectとしてのjQueryの登録

• まあ以下のような感じで

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

queueとかdequeueの実装とか

• overrideで実装(複数あり)

firstとかlastとか

• selectorとかは単純にeq(0)とかeq(-1)で取得してる

first: function() {
	return this.eq( 0 );
},

last: function() {
	return this.eq( -1 );
},

IE関連の対応実装とか

• やったらソースコードが長くなってるのはIE周りの対応が原因という節(まあそれほど多いというわけでもなかったり。。)
  • IEの対応部分は基本的にコメントに参考URLが載ってたり
    • memory leak対応が非常に多いのが特徴的(memoryで検索かけると大抵ID対策)
  • まあ、IE以外の部分も結構参考URLコメントに書いとりますがね。

例1: IEでのDOM準備判定とか

// The DOM ready check for Internet Explorer
function doScrollCheck() {
	if ( jQuery.isReady ) {
		return;
	}

	try {
		// If IE is used, use the trick by Diego Perini
		// http://javascript.nwbox.com/IEContentLoaded/
		document.documentElement.doScroll("left");
	} catch( error ) {
		setTimeout( doScrollCheck, 1 );
		return;
	}

	// and execute any waiting functions
	jQuery.ready();
}

例2: Ajaxのアレとか

// Create the request object; Microsoft failed to properly
// implement the XMLHttpRequest in IE7 (can't request local files),
// so we use the ActiveXObject when it is available
// This function can be overriden by calling jQuery.ajaxSetup
xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?
	function() {
		return new window.XMLHttpRequest();
	} :
	function() {
		try {
			return new window.ActiveXObject("Microsoft.XMLHTTP");
		} catch(e) {}
	},

IE用メモリリーク対策とか

// Prevent memory leaks in IE
// Window isn't included so as not to unbind existing unload events
// More info:
//  - http://isaacschlueter.com/2006/10/msie-memory-leaks/
if ( window.attachEvent && !window.addEventListener ) {
	window.attachEvent("onunload", function() {
		for ( var id in jQuery.cache ) {
			if ( jQuery.cache[ id ].handle ) {
				// Try/Catch is to handle iframes being unloaded, see #4280
				try {
					jQuery.event.remove( jQuery.cache[ id ].handle.elem );
				} catch(e) {}
			}
		}
	});
}

jQuery.fn.extendとかjQuery.extendとか

• 関数などをする際にはjQuery.fn.extendとかjQuery.extendを利用する
  • 実装は以下のような感じ?(途中省略)

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

jQuery.extend = jQuery.fn.extend = function() {...

謎な部分.ブラウザのJs実装に応じてダブってる値の扱いを変更させたりするっぽい?

// Here we check if the JavaScript engine is using some sort of
// optimization where it does not always call our comparision
// function. If that is the case, discard the hasDuplicate value.
//   Thus far that includes Google Chrome.
[0, 0].sort(function(){
	baseHasDuplicate = false;
	return 0;
});

Sizzle.jsの利用

• CSS Selector enzineのsizzleを内部で利用している

まあざっとソース見ただけだったり.