[JQUERY] 宏观欣赏

使用JQUERY也有一段时间了,也看了些源码,现在对他的总体规划做一下剖析,如有不足或错漏之处,请大家补充,互相进步:

 

JQUERY是OO设计出来的前端框架,它利用了prototype来做对象的继承,使得它能很轻易的扩展.

 

在看JQUERY源代码的时候,有两个对象困惑我很久: jquery 和 jquery.fn

那么这两个到底是什么东西呢？

我们先来看一段代码

jQuery.fn = jQuery.prototype = {...........

这段代码说明了jquery.fn是一个prototype对象，那么什么是prototype对象撒?

prototype对象是javascript特有的概念，每一个function 对象都会自动生成一个prototype对象，这为我们实现方法和属性的继承提供了可能

 

再来看一段代码

 

var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }

这里对jQuery做了定义，我们接着看 jQuery.fn.init()做了什么事情

 

jQuery.fn = jQuery.prototype = { init: function( selector, context ) { var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined) if ( !selector ) { return this; } // Handle $(DOMElement) if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } // The body element only exists once, optimize finding it if ( selector === "body" && !context ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } // Handle HTML strings if ( typeof selector === "string" ) { // Are we dealing with HTML string or an ID? match = quickExpr.exec( selector ); // Verify a match, and that no context was specified for #id if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) if ( match[1] ) { doc = (context ? context.ownerDocument || context : document); // If a single string is passed in and it's a single tag // just do a createElement and skip the rest ret = rsingleTag.exec( selector ); if ( ret ) { if ( jQuery.isPlainObject( context ) ) { selector = [ document.createElement( ret[1] ) ]; jQuery.fn.attr.call( selector, context, true ); } else { selector = [ doc.createElement( ret[1] ) ]; } } else { ret = buildFragment( [ match[1] ], [ doc ] ); selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; } return jQuery.merge( this, selector ); // HANDLE: $("#id") } else { elem = document.getElementById( match[2] ); if ( elem ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $("TAG") } else if ( !context && /^/w+$/.test( selector ) ) { this.selector = selector; this.context = document; selector = document.getElementsByTagName( selector ); return jQuery.merge( this, selector ); // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return jQuery( context ).find( selector ); } // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } if (selector.selector !== undefined) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); }

 

这段是我们常见的 $('#id') 的真实面目，这段主要通过选择符和上下文来查找页面元素并返回jQuery的prototype对象

 

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

这段代码表明jQuery.fn.init继承了jQuery.fn对象，也就是jQuery的prototype

 

这么连起来看，我们就知道，其实 jQuery 这个对象是一个函数对象，他返回了一个jQuery.fn.init 这个对象，也就是jQuery的prototype

然后利用prototype对象的特性，来实现一些扩展的功能，这样就形成了一个比较良好的框架结构