jQuery源码解析1(Utilities)

使用jquery两年多了,  我最早是使用的是prototype库，后来使用mootools， 直到后来弟弟推荐我使用jquery(他是个UI设计师)，就一直用到现在。 我是被它的简洁和精炼所吸引的。

 

我喜欢看源代码，以前开发eclipse rcp时，就喜欢看eclipse的源码，因为有时候API文档并不那么明了，eclipse优秀的架构配合JDT强大的功能，让我们很容易地看懂。 一个设计优秀的产品，它的代码应该也是易于理解的。 现在我做web用的是php的ci，在开发过程中也是时常查看它的源代码。

 

为了更好地使用jquery, 所以我阅读了jquery的源代码。不敢独享，所以写出来，相互讨论，一起进步。

 

我使用的是 1.3.2

 

我们从开始的地方开始 ：

 

(function() {
 ...	
})();

 

所有代码包含在以上的函数中，避免名字冲突。

 

1. 几个"全局变量"

 

var 
	window = this,
	undefined, 
	_jQuery = window.jQuery, 
	_$ = window.$,

	jQuery = window.jQuery = window.$ = function(selector, context) {
		return new jQuery.fn.init(selector, context);
	},

	// A simple way to check for HTML strings or ID strings
	quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
	// Is it a simple selector
	isSimple = /^.[^:#\[\.,]*$/;

 

1.1

 

 window 还是那个window, undefined 还是那个undefined，只是这样让js 解释器更快地找到他们，提高速度。

 

 _jQuery = window.jQuery

_$ = window.$,

 

保存原来的 jQuery 和 $, 因为默认情况下jquery占用名字空间 jQuery 和$

 

搜索一下使用 _jQuery的地方吧：

 

 

jQuery.extend({
	noConflict: function( deep ) {
		window.$ = _$;

		if ( deep )
			window.jQuery = _jQuery;

		return jQuery;
	},

 

OK， 是为了 noConflict。

 

比如我们要同时使用prototype和jquery, 可以先让html页面包含 prototype.js 再包含 jquery.js。

 

然后调用  jq = jQuery.noConflict();   接着就可以用jq来使用jQuery框架， $ 就变回 prototype.js 中的方法了。

 

还有一个deep参数， 可以让另一个jQuery(可能不怎么有名， 但对你的项目有用) 和 现在的jQuery 共存。

 

 

quickExpr:  是一个正则表达式， 用于快速匹配一个 html tag 或 id 字符串（如 '#id')

isSimple: 也是一个与此同时表达式, 用于匹配一个 selector (css 选择器)

 

1.2

 

 

	jQuery = window.jQuery = window.$ = function(selector, context) {
		return new jQuery.fn.init(selector, context);
	},

 

我们思考： jQuery.fn.init 是构造函数， 那它的实例方法应该由 : jQuery.fn.init.prototype 指定。

 

搜索它， 在541行得到以下代码：

 

 

jQuery.fn.init.prototype = jQuery.fn;

 

所以 我们平常使用 $('#abc') 或 jQuery('#abc') 

 

$ 就是 jQuery，它返回一个对象。 这个对象的构造函数是 jQuery.fn.init(...

 

这个对象的实例方法和字段就是 jQuery.fn 的成员。

 

 

jQuery.fn = jQuery.prototype = {
	init: function( selector, context ) {
	...
	},
	size: function() {
		return this.length;
	},
        ...

 

从以上可以看出，下面的代码等效。

 

var a = $('#id'); // a = new jQuery('#id');

a.size();

 

 

上面我们隐约看到了jQuery的插件结构， 你可以添加方法到 jQuery.fn，就可以在jQuery对象中使用。

 

但首先，我们先看几个通用工具方法，因为其他很多部分使用它们。

 

2. 几个工具方法

 

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

 

我们分两部分看这个方法：首先是准备， 然后是拷贝。

 

准备：

 

jQuery.extend = jQuery.fn.extend = function() {
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};

		i = 2;
	}

	if ( typeof target !== "object" && !jQuery.isFunction(target) )
		target = {};

	if ( length == i ) {
		target = this;
		--i;
	}

 

可以看到，第一个参数可以指定为 boolean , 表示： 是否进行 深拷贝

 

如果是多于一个 object，那么第一个object 为 target，它将被其他的 object 的成员扩展

如果仅有一个object， 那么 this （jQuery 或 jQuery.fn） 为 target,  object 的成员将添加到 target中

 

 

我们常常这样使用:

 

var b = $.extend({}, a);  // 复制一份

options = $.extend({ 'name': 'editor', value: '100' }, options); // 默认参数


$.extend({

  myfunc: function() {...  // 为jquery添加 工具方法

});


$.fn.extend({

  myplugin: function() {...  // 为jquery添加插件

})

 

 

另一部分的拷贝代码也很容易：

 

	for ( ; i < length; i++ )
		if ( (options = arguments[ i ]) != null )
			for ( var name in options ) {
				var src = target[ name ], copy = options[ name ];

				if ( target === copy )
					continue;

				if ( deep && copy && typeof copy === "object" && !copy.nodeType )
					target[ name ] = jQuery.extend( deep, 
						src || ( copy.length != null ? [ ] : { } )
					, copy );

				else if ( copy !== undefined )
					target[ name ] = copy;

			}

	return target;

 

2.2  each(object, callback)

 

 

	// args is for internal usage only
	each: function( object, callback, args ) {
		var name, i = 0, length = object.length;

...

 

 

我们只使用到两个参数，args 内部使用。

 

		if ( args ) {
			if ( length === undefined ) {
				for ( name in object )
					if ( callback.apply( object[ name ], args ) === false )
						break;
			} else
				for ( ; i < length; )
					if ( callback.apply( object[ i++ ], args ) === false )
						break;

			// A special, fast, case for the most common use of each
		} else {

 

这一部分是是框架内部使用。我们else部分：

 

		} else {
			if ( length === undefined ) {
				for ( name in object )
					if ( callback.call( object[ name ], name, object[ name ] ) === false )
						break;
			} else
				for ( var value = object[0];
					i < length && callback.call( value, i, value ) !== false; 
					value = object[++i] ){}

 

 从代码中，我们知道，可以对“数组”或“对象”进行迭代。

 

var a = ['a', 'b', 'c', 'd', 'e'];

$.each(a, function() {
    alert(this);  // this即每次迭代的值
});

$.each(a, function(index, value) {
  // ...
});

$.each(a, function() {
   if (this == 'c') {
    return false;    // 'break'
  }
}

 

最后，each 返回 object 以支持链式调用

2.3  isFunction(obj),  isArray(obj), isXMLDoc(elem)

注: isXMLDoc 没有收录在API文档中， 所以不要使用。

	// See test/unit/core.js for details concerning isFunction.
	// Since version 1.3, DOM methods and functions like alert
	// aren't supported. They return false on IE (#2968).
	isFunction: function( obj ) {
		return toString.call(obj) === "[object Function]";
	},

	isArray: function( obj ) {
		return toString.call(obj) === "[object Array]";
	},

	// check if an element is in a (or is an) XML document
	isXMLDoc: function( elem ) {
		return elem.nodeType === 9 && elem.documentElement.nodeName !== "HTML" ||
			!!elem.ownerDocument && jQuery.isXMLDoc( elem.ownerDocument );
	},

 

2.4  trim(text)

这个太熟悉不过了：

 

	trim: function( text ) {
		return (text || "").replace( /^\s+|\s+$/g, "" );
	},

 

没有什么特殊的技巧， 使用简单的正则替换。

 

prototype.js是这样的：

 

  strip: function() {
    return this.replace(/^\s+/, '').replace(/\s+$/, '');
  },

 

2.5  grep(array, callback, insert),  map(array, callback)

 

	grep: function( elems, callback, inv ) {
		var ret = [];
		for ( var i = 0, length = elems.length; i < length; i++ )
			if ( !inv != !callback( elems[ i ], i ) )
				ret.push( elems[ i ] );

		return ret;
	},

 

所以我们这样使用：

 

var a = [2, 3, 6, 1, 8, 9];

$.grep(a, function(v) {  //   只要>= 3的数
    return v >= 3;
});

$.grep(a, function(v) {
    return v >= 3;
}, false); // 这样相当于 < 3

 

下面是map

 

	map: function( elems, callback ) {
		var ret = [];
		for ( var i = 0, length = elems.length; i < length; i++ ) {
			var value = callback( elems[ i ], i );

			if ( value != null )
				ret[ ret.length ] = value;
		}

		return ret.concat.apply( [], ret );
	}

 

最后一句话是干嘛？ return ret.concat.apply( [], ret );

上面的相当于：  return [].concat(ret[0], ret[1], ...);

 

var a = [].concat(1, 2, 3, [4, 5]) ; // a = [1, 2, 3, 4, 5];

 

原来这样是让函数更灵活， 让我们可以这样使用：

 

a = [1, 2, 3, 4];

b = $.map(a, function(v) {
	return [v, 2 * v];
});

// b = [1, 2, 2, 4, 3, 6, 4, 8];

 

返回值为null 会被过滤

 

---

 

2.6 makeArray(obj),  inArray(value, array)

 

	makeArray: function( array ) {
		var ret = [];

		if( array != null ){
			var i = array.length;
			// The window, strings (and functions) also have 'length'
			if( i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval )
				ret[0] = array;
			else
				while( i )
					ret[--i] = array[i];
		}

		return ret;
	},

 

 

如果没有length属性，或者是 string, function window 之一， 就返回一个元素的数组。

 

 

	inArray: function( elem, array ) {
		for ( var i = 0, length = array.length; i < length; i++ )
		// Use === because on IE, window == document
			if ( array[ i ] === elem )
				return i;

		return -1;
	},

 

如果元素elm在 array中，返回位置，否则返回-1

 

  2.7 merge(first, second)

 

 

 

	merge: function( first, second ) {
		// We have to loop this way because IE & Opera overwrite the length
		// expando of getElementsByTagName
		var i = 0, elem, pos = first.length;
		// Also, we need to make sure that the correct elements are being returned
		// (IE returns comment nodes in a '*' query)
		if ( !jQuery.support.getAll ) {
			while ( (elem = second[ i++ ]) != null )
				if ( elem.nodeType != 8 )
					first[ pos++ ] = elem;

		} else
			while ( (elem = second[ i++ ]) != null )
				first[ pos++ ] = elem;

		return first;
	},

 

但是我不知道 jQuery.support.getAll 是哪里来的？

只有 jQuery.support.objectAll， 这里会不会是笔误？

 

 整理一下先：

 

 

(PS: 本来想全部写好才发布的，但一开始保存在草稿箱中，后来修改的时候不小心按错了， 就将错就错，还是把它分成几部分，否则太长了）

评论

8 楼 forgood 2010-10-25  

var a = [].concat(1, 2, 3, [4, 5]) ; // a = [1, 2, 3, 4, 5];

concat（value）是Array的一个方法，可以合并value的数据生成一个新的数组

7 楼 __游乐场 2010-10-19  

jquery对象的length属性被delete了的时候

6 楼 lipeng88213 2010-10-19  

引用

merge: function( first, second ) {
var i = first.length, j = 0;

if ( typeof second.length === "number" ) {
for ( var l = second.length; j < l; j++ ) {
first[ i++ ] = second[ j ];
}

} else {
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}

first.length = i;

return first;
}

这是1.4.3版本的代码 请问楼主 

引用

} else {
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}

这个是判断什么的 什么情况会用到？

5 楼 freshman008 2010-06-17  

推荐jquery学习网站
http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html
绝对很有收获

4 楼 oolala 2010-06-11  

持续观看，请发布其余高见

3 楼 lipeng88213 2010-06-10  

我认真读了一遍 写的真的不错  希望楼主继续努力

2 楼 bencode 2010-04-06  

skyblue1984 写道

引用

从以上可以看出，下面的代码等效。
var a = $('#id'); // a = new jQuery('#id');
a.size();

这个是错的
应该是
var a = $('#id'); // a = new jQuery.fn.init('#id');

a = new jQuery('#id'); // 可以的，只是没有人这么用：）
当然 a = new jQuery.fn.init('#id'); 肯定也可以。

1 楼 skyblue1984 2010-03-30  

引用

从以上可以看出，下面的代码等效。
var a = $('#id'); // a = new jQuery('#id');
a.size();

这个是错的
应该是
var a = $('#id'); // a = new jQuery.fn.init('#id');