首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Jquery1.4.3源码分析(1)

2012-11-03 
Jquery1.4.3源码分析(一)Jquery是站在开发者的角度去考虑问题,在使用Js的时候,大部分时间都是对Dom元素进

Jquery1.4.3源码分析(一)
Jquery是站在开发者的角度去考虑问题,在使用Js的时候,大部分时间都是对Dom元素进行操作,比如修改元素的属性,修改内容,修改CSS等。但是取Dom元素的,如getElementsByTag,有可能会取到一些Dom元素的集合,而又正好要这个集合的所有的元素都要进行同样的操作。如果只有一个元素,完全可以看作只有一个元素的集合。

这样只要对这个集合进行操作,就会对集合的每个元素都进行操作。jQuery就是基于这个集合而提供了众多的实用方法,包含了日常开发所需要的功能。对于这个集合,我们称为jquery对象。

我们可以通过$(params)或jquery(params)来生成Jquery对象。在Jquery文档中提供了四种方式:jQuery(expression,[context]),jQuery(html),jQuery(elements),jQuery(callback)四种构寻jquery对象的方式。其实Jquery的参数可以是任何的元素,如空参数,都能构成jquery对象。

那么jquery是如何实现的呢?

var jQuery = function( selector, context ) {//jQuery对象其实就是jQuery.fn.init函数生成的对象,不是通过new jQuery生成对象。return new jQuery.fn.init( selector, context );},

现在我们看一下jQuery.fn.init函数的实现:
init: function( selector, context ) {var match, elem, ret, doc;        //处理传空值的情况// Handle $(""), $(null), or $(undefined)if ( !selector ) {return this;}        //// 第一种情况 Handle $(DOMElement)单个Dom 元素,忽略上下文// Handle $(DOMElement)if ( selector.nodeType ) {this.context = this[0] = selector;this.length = 1;return this;}//如果selector为'body',而且只存在一次,那么使用优化找到它// The body element only exists once, optimize finding itif ( selector === "body" && !context && document.body ) {this.context = document;this[0] = document.body;this.selector = "body";this.length = 1;return this;}        //// Handle HTML stringsif ( 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 #idif ( match && (match[1] || !context) ) {                 //处理$(html) -> $(array)// HANDLE: $(html) -> $(array)if ( match[1] ) {doc = (context ? context.ownerDocument || context : document);                     //如果只有个一个字符串传递进来,那么直接使用createElement创建元素,跳过剩下的部分// 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 {                        //$('<div>sgsgsg</div>')解析字符串ret = jQuery.buildFragment( [ match[1] ], [ doc ] );selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;}//把创建出来的element放进Jquery对象集合中.return jQuery.merge( this, selector );// HANDLE: $("#id") //处理$("#id")} else {elem = document.getElementById( match[2] );// Check parentNode to catch when Blackberry 4.6 returns// nodes that are no longer in the document #6963if ( elem && elem.parentNode ) {// Handle the case where IE and Opera return items// by name instead of IDif ( elem.id !== match[2] ) {return rootjQuery.find( selector );}// Otherwise, we inject the element directly into the jQuery objectthis.length = 1;this[0] = elem;}this.context = document;this.selector = selector;return this;}// HANDLE: $("TAG") 处理$('p')} else if ( !context && !rnonword.test( selector ) ) {this.selector = selector;this.context = document;selector = document.getElementsByTagName( selector );return jQuery.merge( this, selector );// HANDLE: $(expr, $(...))   处理$(expr, [context])==$(content).find(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) 处理$(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;}      // 处理$(elements)return jQuery.makeArray( selector, this );}

上面的可以看出$(xx)或Jquery(xx)得到不是真正的jQuery函数生成的对象,而是jQuery.fn.init函数生成的对象。也是就是jQuery的对象继承的是jQuery.fn.init的原型。jQuery.fn = jQuery.prototype={..}。我们基本上不用new jQuery(xx),而是直接jQuery(xx),就是采用了new jQuery(xx),先生成jQuery函数的对象,把原型中的继承下来,返回的也是jQuery.fn.init函数生成的对象。而jQuery函数的对象也抛弃了。可见给jQuery.prototype上增加方法的意义不大。同时也可以看出采用new jQuery(xx)的效率更低。jQuery.fn.init是通过jQuery.fn.init.prototype = jQuery.fn;来获得的。在扩展jQuery的时候,只要把相关的函数extend到jQuery.fn就可以了。

jQuery.fn.init负责对传的参数进行分析然后生成jQuery对象。它把第一个参数分成四种情况:




 从上面的代码和上表中,我们也可以看出构建jquery对象就是往jquery对象的集合中添加元素(一般都应该是dom元素)。添加的元素有两种形式:

  一是单个元素,可能通过直接的dom元素的传参形式,还可以通过#id从dom文档中找元素。

  二是集合,如jquery对象,还有数组,还有通过CSS Selector找到的Dom集合等Array-Like。

  上表仅仅是分析传入的参数的类型,它是怎么做呢?它实现CSS1~CSS3的兼容的Selector的查寻器的功能。通过jQuery().find(selector);来进行分析String并查找到符合传入的Selector语法的Dom文档树中的元素集合。

 它实现了把html的字符串转换成Dom元素节点的集合。这个是通过jQuery.clean([match[1]], context);来实现的。

  它实现DomReady的jQuery对象的统一入口,我们可以通过$(fn)要注册domReady的监听函数。所有的调用jQuery实现的功能代码都应该在domReady之后才运行。$(fn)是所有的应用开发中的功能代码的入口。它支持任意多的$(fn)注册。其是通过return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);来完成的。

  找到元素之后就是构建集合了,就是通过this.setArray(jQuery.makeArray(selector));来构建jquery对象内部的集合。

在jQuery.fn.init函数中,最终的结果是把Dom元素放到jQuery对象的集合,我们可以传入单个Dom元素或Dom元素集合直接把其存到jQuery对象的集合。但是如果第一个参数是string类型的话,如#id就要把Dom文档树去查找。对于html的片断就得生成Dom元素。我们再进一步,传入的单个Dom元素或Dom元素集合参数又是从那里来的?我们可以通过Dom元素的直接或间接的查找元素的方式。

  这一部分首先分析如何从html的片断就得生成Dom元素,然后分析jQuery是如何通过直接或间接的方式在在Dom树中找到dom元素,第三就是分析基于CSS1~CSS3的CSS selector。
3.1生成Dom元素

  Init方法中通过ret = jQuery.buildFragment( [ match[1] ], [ doc ] );来实现把html片断转换成Dom元素,这是一个静态方法:
jQuery.buildFragment = function( args, nodes, scripts ) {var fragment, cacheable, cacheresults,doc = (nodes && nodes[0] ? nodes[0].ownerDocument || nodes[0] : document);     //只有缓存小于0.5K的字符串,有些元素不能缓存啊 // Only cache "small" (1/2 KB) strings that are associated with the main document// Cloning options loses the selected state, so don't cache them// IE 6 doesn't like it when you put <object> or <embed> elements in a fragment// Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cacheif ( args.length === 1 && typeof args[0] === "string" && args[0].length < 512 && doc === document &&!rnocache.test( args[0] ) && (jQuery.support.checkClone || !rchecked.test( args[0] )) ) {cacheable = true;cacheresults = jQuery.fragments[ args[0] ];if ( cacheresults ) {if ( cacheresults !== 1 ) {fragment = cacheresults;}}}if ( !fragment ) {fragment = doc.createDocumentFragment();jQuery.clean( args, doc, fragment, scripts );}if ( cacheable ) {jQuery.fragments[ args[0] ] = cacheresults ? fragment : 1;}return { fragment: fragment, cacheable: cacheable };};

jQuery.clean( args, doc, fragment, scripts );
 // 把html转换成Dom元素,elems多个html string 的数组    clean: function( elems, context, fragment, scripts ) {context = context || document; ;//默认的上下文是document        //在IE中!context.createElement行不通,因为它返回对象类型        //在IE中 typeof document.createElement返回object, firefox返回functionif ( typeof context.createElement === "undefined" ) {        //这里支持context为jQuery对象,取第一个元素。context = context.ownerDocument || context[0] && context[0].ownerDocument || document;}var ret = [];for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {if ( typeof elem === "number" ) {elem += "";// 把int 转换成string的最高效的方法}if ( !elem ) {continue;}// Convert html string into DOM nodesif ( typeof elem === "string" && !rhtml.test( elem ) ) {elem = context.createTextNode( elem );//如果elem为文本,不包含元素标签} else if ( typeof elem === "string" ) {// Fix "XHTML"-style tags in all browsers                //修改元素使得符合xhtml的标准elem = elem.replace(rxhtmlTag, "<$1></$2>");// Trim whitespace, otherwise indexOf won't work as expected                //取得元素标签var tag = (rtagName.exec( elem ) || ["", ""])[1].toLowerCase(),                    //判断是否要进行修正option, legend,thead,tr,td, col,areawrap = wrapMap[ tag ] || wrapMap._default,depth = wrap[0],div = context.createElement("div");// Go to html and back, then peel off extra wrappersdiv.innerHTML = wrap[1] + elem + wrap[2];// Move to the right depth   转到正确的深度,对于[1, "<table>","</table>"],div=<table>while ( depth-- ) {div = div.lastChild;}// fragments去掉IE对<table>自动插入的<tbody>if ( !jQuery.support.tbody ) {                    // 第一种情况:tags以<table>开头但没有<tbody>。在IE中生成的元素中可能会自动                    // 加的<tbody> 第二种情况:thead|tbody|tfoot|colg|cap为tags,                    // 那wrap[1] == "<table>" .tbody不一定是tbody,也有可能是thead等等// String was a <table>, *may* have spurious <tbody>var hasBody = rtbody.test(elem),tbody = tag === "table" && !hasBody ?div.firstChild && div.firstChild.childNodes :// String was a bare <thead> or <tfoot>wrap[1] === "<table>" && !hasBody ?div.childNodes :[];                    // 除去<tbody>                     for ( var j = tbody.length - 1; j >= 0 ; --j ) {if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {tbody[ j ].parentNode.removeChild( tbody[ j ] );}}}                 //使用innerHTML,IE会去开头的空格节点的,加上去掉的空格节点                // IE completely kills leading whitespace when innerHTML is usedif ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );}elem = div.childNodes;}if ( elem.nodeType ) {ret.push( elem ); //elem放进集合里面} else {ret = jQuery.merge( ret, elem );}}if ( fragment ) {for ( i = 0; ret[i]; i++ ) {if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );} else {if ( ret[i].nodeType === 1 ) {ret.splice.apply( ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) );}fragment.appendChild( ret[i] );}}}return ret;},


 在上面的代码中,我们可以看出对于elems, context的参数的支持是多种形式的,elems可以为(类)数组的形式,还可以采用对象的形式。数组中的元素或对象的属性可以是混合形的,如string,ojbect,甚至(类)数组的形式。对于数字类型,会转换在string形,除string形之外的都放入返回的数组中,当然对于集合的形式,那就会取集合中每个元素。

  对于string的形式就转换成Dom元素的形式,之后存到返回的数组中。这是这个函数的主要任务。对于把html转换成Dom元素,这里采用innerHTML把html挂到Dom文档树中。这样就转换成了Dom元素。

  有些html标签片断是有约束的,比如<td>xx</td>,它必须存在table的tr中,也就是说在要进行html的标签片断的修正。这也是上面的代码处理的重点。



热点排行