jQuery 结构分析

jquery核心  转自http://www.iteye.com/topic/783260

 

(function( window, undefined ) {
// 构造jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
// 工具函数 Utilities
// 异步队列 Deferred
// 浏览器测试 Support
// 数据缓存 Data
// 队列 queue
// 属性操作 Attribute
// 事件处理 Event
// 选择器 Sizzle
// DOM遍历
// DOM操作
// CSS操作
// 异步请求 Ajax
// 动画 FX
// 坐标和大小
window.jQuery = window.$ = jQuery;
})(window);


一  构造jquery.

相对于其它库里传统的构造对象方法. jquery提供了一种截然不同的方法. 它选择创造一个全新的奇异世界.

首先所有的jquery代码被一个自动执行的闭包包裹起来, 只在后面暴露$和jQuery这2个变量给外界 尽量避开变量冲突.

Java代码  收藏代码
  1. (function(window,  undefined){  
  2. …..  
  3. })(window)  


window和undefined都是为了减少变量查找所经过的scope. 当window通过传递给闭包内部之后, 在闭包内部使用它的时候,
可以把它当成一个局部变量, 显然比原先在window scope下查找的时候要快一些.
undefined也是同样的道理, 其实这个undefined并不是javascript数据类型六君子之一的undefined, 而是一个普普通通的变量名.
只是因为没给它传递值. 它的值就是undefined.  undefined并不是javascript的保留字.

然后是一个套子套住jquery的构造方法

Java代码  收藏代码
  1. var jQuery = (function(){   --------------------jq1  
  2.     var jQuery = function( selector, context ){    ---------------jq2  
  3.         ……..  
  4. };  
  5.     return (window.jQuery = window.$ = jQuery);  
  6. })()  



首先定义jq1, 这个jQuery最终在return  (window.jQuery = window.$ = jQuery)的时候会变成
window下面的变量供外界使用.
而jq2供jquery内部执行的时候调用. 最终作为jq1的引用返回.
return (window.jQuery = window.$ = jQuery);这句话等价于

Java代码  收藏代码
  1. window.jQuery = window.$ = jQuery;  
  2. return window. jQuery.  




现在来看看jquery对象是怎么被创建出来的. jquery作为一个独立特行的库,  它产生jquery对象时并不需要用new 操作符..
它宁愿选择这种方式, 比如要产生一个构造函数Man的对象.

Java代码  收藏代码
  1. function Man(name){  
  2.     this.name = name;     
  3. }  
  4.   
  5. function People(name){  
  6.     return new Man(name);  
  7. }  
  8.   
  9. var pe = People("zengtan");  
  10. alert (pe.name);  


同样真正作为jQuery对象的构造方法的并不是
function (selector, context){
}
而是jQuery.fn.init.

Java代码  收藏代码
  1. var jQuery  =  function( selector, context ) {            
  2.         return new jQuery.fn.init( selector, context );  
  3.     }  


jQuery.fn就是jQuery.prototype. 见源码102行.
jQuery.fn = jQuery.prototype = {}

init是挂在jQuery.prototype上的属性.
当jQuery(‘div’)的时候, 实际上转交给了jQuery.fn.init构造函数来生成对象.
当然我们想用new jQuery来生成jquery对象也可以. 跟直接用jQuery()没区别.
因为构造函数一定会返回一个对象.如果显示指定了返回某个对象.就会返回那个对象,
否则才会返回this对象.
好比说, 有只母鸡被你强迫下一个蛋, 它会先看窝里有没有别人的蛋, 如果没有,才会自己努力下一个.
这里显然返回的是jQuery.fn.init的对象.

也许现在你开始回忆制作jquery插件时, 明明是给jQuery.prototype添加方法.
这里返回的又是jQuery.prototype.init的对象.
原来在源码333行,  jQuery.prototype.init.prototype = jQuery. prototype;
现在很容易看明白. 给jQuery.prototype添加方法就等于给jQuery. prototype.init.prototype添加方法了.
JQuery api里的方法大部分都是通过jQuery.prototype扩展上去的, 除此之外. 我们还要给jquery对象加上索引. 给集合添加length属性,让他们更像一个数组里的元素.

搞明白这些, 再来看jQuery. prototype.init这个方法里究竟是怎样生产jquery对象的.
我们可以把jQuery. prototype.init想象成一个火腿肠加工器. 只要你放了正确的原料进去,
它就可以把原料变成火腿肠生产出来.如果你不小心放错了原料.它也会帮你变成火腿肠. 不过只有塑料包装, 里面没有火腿.
当然这个加工器里面的构造是很复杂的, 它需要判断材料种类, 数量等等.
一般这个材料主要为这4种情况
1 dom节点
2 字符串
3 函数
4 数组
5 其他元素

一 jQuery构造方法
jQuery的构造方法会生成一组jquery对象的集合.具体关于init方法的分析, 还是留在选择器部分说吧.

二 jQuery对象访问

jquery构造完对象之后, 会提供一些方法访问这些对象.

1  jQuery.prototype.size 
集合内元素的数量
就是通过this.length得到.

2  jQuery.prototype.get 
按照索引取得集合内某个元素, 返回包装前的原始对象

Java代码  收藏代码
  1. get: function( num ) {  
  2.         return num == null ?   
  3.  //如果参数为null或者undefiend. 注意是==.  
  4.             this.toArray() :  //如果不传参数, 集合内的元素全部转化为一个数组(1)  
  5.             ( num < 0 ? this.slice(num)[ 0 ] : this[ num ] );   
  6. //调用silce方法截取某一个.可以传入负数并且返回的是包装前的对象.  
  7.     }  
  8.   
  9. (1) 看看这里的this.toArray函数.  
  10. toArray: function() {  
  11.         return slice.call( this0 );  
  12.     }  


很简单, 就是让当前jquery对象冒充Array的对象, 调用Array.prototype.slice进行截断. 返回的是一个数组.
至于为什么可以像这样使用对象冒充. 我们抽个地方来好好讨论一下.
其实如果查看v8之类开源引擎的源码就知道(当然也可以在ecma里挣扎一番). 要调用Array原型链上的方法. 通常这个对象满足2个条件就可以了.
1, 本身可以存取属性.
2, length属性不能是只读(可以没有length属性).
由于Array.prototype.slice方法太长了. 我拿Array.prototype.push方法举例. 在V8的src目录下的array.js可以找到这些方法.
比如push

Java代码  收藏代码
  1. function ArrayPush() {  
  2.   var n = ToUint32(this.length);  
  3.  /* 
  4.     对象/数组本身的length. 如果为null或者undefined, 会在ToUint32中转化为0. 所以 
  5.     即使没有length属性,也会给一个默认的0值. 
  6.  */  
  7.   var m = %_ArgumentsLength();    //参数的length.  
  8.   for (var i = 0; i < m; i++) {  
  9.     this[i+n] = %_Arguments(i);   //复制属性  
  10.   }  
  11.   this.length = n + m;            //重设length.  
  12.   return this.length;  
  13. }  


可以看到push操作的核心就是复制属性和重设长度.
jquery对象完全可以满足这2个条件. 同样的道理 一个对象字面量{}也可以.
而string类型的不可以, 因为不能在string上存取属性. function对象虽然可以存取属性, 也有length属性.
不过它的length属性比较特殊, 表示形参的个数, 是一个只读属性, 源码中的this.length = n + m这一句不起作用, 所以function对象也不行. 同理window对象也不行.
上面的slice.call也是这个原理, 虽然slice方法的实现更复杂一点.

明白了这个,我们可以解释很多奇怪的问题.比如:

Java代码  收藏代码
  1. var a = {};  
  2. a[0] = 1;  
  3. a[1] = 2;  
  4. Array.prototype.push(a, 3);  
  5. alert (a.length)   // a没有length属性, 默认的给0值, 所以结果为1 .  


如果在push操作之前添加一句 a.length = 2;
再进行push操作后, a.length就为3了.



3 jQuery.prototype.index 
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
没有什么特别需要解释的, 直接看代码.

Java代码  收藏代码
  1. index: function( elem ) {  
  2.         if ( !elem || typeof elem === "string" ) {     
  3.         //如果没有参数, 或者参数是选择器.  
  4.             return jQuery.inArray( this[0],  
  5.                 elem ? jQuery( elem ) : this.parent().children() );  
  6.         //如果有参数(选择器), 则查找元素本身在这些选择器组成的jq对象集合中的位置  
  7.         //如果没有参数, 查找元素本身在它的兄弟节点之间的位置. this.parent().children()可以取得自己和全部兄弟节点.  
  8. }  
  9.         return jQuery.inArray(  
  10.             //参数是一个对象  
  11.             elem.jquery ? elem[0] : elem, this );  
  12.             //如果是jquery对象, 取得它的原始节点. 再查找在当前集合中的位置     
  13. }  


顾名思义jQuery.inArray就是判断数组里有没有某个元素.当然这里的数组也包括伪数组.
这个方法虽然实现起来很简单, 关于inArray这个名字在jquery的官方论坛却有颇多争议.
很多人认为它应该返回true或者false, 而不是索引的位置.
john resig只是说暂时还不准备修改这个方法.

有些浏览器还不支持Array.prototype.indexOf方法. 所以首先在源码的851行, 有这样一段代码.

Java代码  收藏代码
  1. if ( Array.prototype.indexOf ) {  
  2.     jQuery.inArray = function( elem, array ) {  
  3.         return indexOf.call( array, elem );  
  4.     };  
  5. }  


如果支持Array.prototype.indexOf. 则重写jQuery.inArray, 直接用Array.prototype.indexOf.call(array, elem );
在页面加载的时候就重写这个方法. 也避免了在函数里反复判断造成的浪费.
然后

Java代码  收藏代码
  1. inArray: function( elem, array ) {  
  2.         if ( array.indexOf ) {  
  3. //确认indexOf方法存在.或防止indexOf方法被改写.  
  4.             return array.indexOf( elem );  
  5.         }  
  6.         for ( var i = 0, length = array.length; i < length; i++ ) {  
  7.             //否则遍历数组, 返回正确的索引.  
  8. if ( array[ i ] === elem ) {  
  9.                 return i;  
  10.             }  
  11.         }  
  12.         return -1;  //如果数组里没有这个元素, 返回-1.  
  13.     }  


三 数据缓存

jQuery.data

在实际应用中, 我们经常需要往节点中缓存一些数据. 这些数据往往和dom元素紧密相关. dom节点也是对象, 所以我们可以直接扩展dom节点的属性.
不过肆意污染dom节点是不良少年的行为. 我们需要一种低耦合的方式让dom和缓存数据能够联系起来.

jquery提供了一套非常巧妙的缓存办法.

我们先在jquery内部创建一个cache对象{}, 来保存缓存数据.

然后往需要进行缓存的dom节点上扩展一个值为jQuery.expando的属性, 这里是”jquery” + (new Date).getTime().

接着把每个节点的dom[jQuery.expando]的值都设为一个自增的变量id,保持全局唯一性.
这个id的值就作为cache的key用来关联dom节点和数据.
也就是说cache[id]就取到了这个节点上的所有缓存.

而每个元素的所有缓存都被放到了一个map里面,这样可以同时缓存多个数据.

比如有2个节点dom1和dom2, 它们的缓存数据在cache中的格式应该是这样

Java代码  收藏代码
  1. cache = {  
  2.     dom1[  jQuery.expando ]: {  
  3.         key1: value1,  
  4.         key2: value2  
  5. },  
  6. dom2[ jQuery.expando ] {  
  7.     key3: value3,  
  8.     key4: value4  
  9. }  
  10. }  



jQuery.expando的值等于”jquery”+当前时间, 元素本身具有这种属性而起冲突的情况是微乎其微的.

我们在看源码之前, 先根据上面的原理来自己实现一个简单的缓存系统.以便增强理解.

先把跟data相关的所有代码都封装到一个闭包里,通过返回的接口暴露给外界.
同时为了简便,我们拆分成setData和getData两个方法.

Java代码  收藏代码
  1. <div id="ddd">dddddddd</div>  
  2.   
  3. <script>  
  4.   
  5. var Data = function(){  
  6.     var cache = {};  
  7.     var expando = "zengtan" + +new Date;  
  8.     var uuid = 1;  
  9.       
  10.     var setData = function(elem, key, value){  
  11.             var id = elem[expando];  
  12.             if (!id){   //第一次给元素设置缓存  
  13.                 id = ++uuid;  
  14.                 elem[expando] = id;  
  15.             }  
  16.             if (!cache[id]){   //这个元素第一次进行缓存或者缓存已被清空  
  17.                 cache[id] = {};  
  18.             }  
  19.             cache[id][key] = value;  
  20.     };  
  21.   
  22.     var getData = function(elem, key){  
  23.         var id = elem[expando];  //取得cache里跟dom节点关联的key  
  24.         return cache[id] && cache[id][key] || null;  //如果缓存里没有, 返回null  
  25.     }  
  26.   
  27.     return {  
  28.         setData: setData,  
  29.         getData: getData      
  30.     }  
  31. }()  
  32.   
  33. </script>  
  34.   
  35. var div = document.getElementById("ddd");  
  36. Data.setData(div, "name""zengtan");  
  37. var value = Data.getData(div, "name");  
  38. alert (value)  


看看源码实现.

首先声明一些特殊的节点, 在它们身上存属性的时候可能会抛出异常.

Java代码  收藏代码
  1. noData: {  
  2.         "embed"true,  
  3.         // Ban all objects except for Flash (which handle expandos)  
  4.         "object""clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",  
  5.         "applet"true  
  6.     }  



这个对象里的数据用在acceptData方法中, 跟1.42版本相比, 这里多了对什么flash的object的特殊处理.
总之acceptData方法就是判断节点能否添加缓存.

看具体的jQuery.data

Java代码  收藏代码
  1. data: function( elem, name, data ) {  
  2.     if ( !jQuery.acceptData( elem ) ) {  
  3.         return;  
  4.     }  
  5.     //noData类型  
  6.     elem = elem == window ?  
  7.         windowData :  
  8.         elem;  
  9.     //处理elem是window的情况, 如果不单独处理的话, 等于增加了一个全局变量, windowData也是一个{}  
  10.     var isNode = elem.nodeType,  
  11.     //判断是不是dom节点,由于非dom节点的缓存在继承和内存泄露上都会造成麻烦,1.43版本已经把dom节点和其他对象分开处理了.  
  12.         id = isNode ? elem[ jQuery.expando ] : null,  
  13.         cache = jQuery.cache, thisCache;  
  14.     //因为存数据的时候, 会给elem[ jQuery.expando ]设置一个全局唯一标志量. 判断id是否为undefined, 就知道已经有没有往这个元素上缓存过数据.   
  15.   
  16.     if ( isNode && !id && typeof name === "string" && data === undefined ) {  
  17.     //如果是dom节点对象, 并且现在是get方式(typeof name === "string" && data === undefined表示get方式), 又没有缓存(!id表示没有缓存).  
  18.         return;  
  19.     }  
  20.   
  21.     if ( !isNode ) {  
  22.         cache = elem;  
  23.     //如果是非dom节点对象, 取缓存里的属性就直接取元素本身属性.  
  24.     } else if ( !id ) {  
  25.         elem[ jQuery.expando ] = id = ++jQuery.uuid;  
  26.     //第一次进行缓存, 分配一个全局唯一标志id.  
  27.     }  
  28.   
  29.     if ( typeof name === "object" ) {  
  30.     //如果key是对象类型  
  31.         if ( isNode ) {  
  32.             cache[ id ] = jQuery.extend(cache[ id ], name);  
  33.     /* 
  34.     把整个对象都复制到原来的缓存上, 比如 
  35.          $('#ddd').data({ 
  36.                 "v2": "bbb", 
  37.                 "v3": "ccc" 
  38.             }); 
  39.             相当于$('#ddd').data("v2", "bbb").data("v3":"ccc"); 
  40.             1.42版本用的cache[ id ] = jQuery.extend(true, {}, name). 这样会清空以前的缓存. 
  41.         */  
  42.         } else {  
  43.             jQuery.extend( cache, name );  
  44.         //如果不是dom节点. 把属性复制到元素本身.  
  45.         }  
  46.   
  47.     } else if ( isNode && !cache[ id ] ) {  
  48.         //如果cache[ id ]中没有东西, 表示这个元素第一次进行缓存或者缓存已被清空, 设置cache[ id ]为一个新的map.  
  49.         cache[ id ] = {};  
  50.     }  
  51.   
  52.     thisCache = isNode ? cache[ id ] : cache;  
  53.   
  54.     if ( data !== undefined ) {  
  55.         /* 
  56.             set操作, 也可以防止一些意外的情况下缓存被清空. 比如data未定义的情况下, 缓存操作是无效的. 
  57.             var a = {}; 
  58.             var b; 
  59.             $(a).data("c", 3); 
  60.             $(a).data("c", b); b为undefined. 这句是无效的. 要移除缓存可以用removeData方法. 
  61.         */  
  62.         thisCache[ name ] = data;  
  63.         //即cache[ id ][ name ] = data, 把data设置进cache缓存对象中, 前面分配的自增id当做key来关联  
  64.     }  
  65.   
  66.     return typeof name === "string" ? thisCache[ name ] : thisCache;  
  67.     //如果key是string类型, 返回key对应的缓存, 否则返回整个元素上的缓存  
  68. }  


从新版本的源码里可以看到,  1.42版本中data方法的几个缺点已经被解决了.

当然我们用jquery缓存系统的时候, 一般调用的是prototype方法, prototype方法除了调用上面的静态方法之外. 还加入了对节点上自定义事件的处理, 留在event部分再讲.

当然, 我们还需要删除缓存的方法. 现在看看removeData的代码

Java代码  收藏代码
  1. Jquery.removeData  
  2.   
  3.     removeData: function( elem, name ) {  
  4.         if ( !jQuery.acceptData( elem ) ) {  
  5.             return;  
  6.         }  
  7.   
  8.         elem = elem == window ?  
  9.             windowData :  
  10.             elem;  
  11.   
  12.         var isNode = elem.nodeType,  
  13.             id = isNode ? elem[ jQuery.expando ] : elem,  
  14.             //id是该元素在cache上面的key, 如果不是节点就返回元素本身.  
  15.             cache = jQuery.cache,  
  16.             thisCache = isNode ? cache[ id ] : id;  
  17.   
  18.         if ( name ) {  
  19.             if ( thisCache ) {  
  20.                 delete thisCache[ name ];  
  21.                 //删除key对应的缓存数据  
  22.                 if ( isNode && jQuery.isEmptyObject(thisCache) ){  
  23.                     //如果元素是dom节点并且缓存为一个空对象.说明所有缓存的数据都已经被删掉了.  
  24.                     //那么重新调用一次removeData方法, 删掉缓存系统里已经无用的东西, 防止内存泄露, 注意现在走的是下面else分支.   
  25.                     jQuery.removeData( elem );   
  26.                 }  
  27.             }  
  28.         } else {  
  29.             if ( isNode && jQuery.support.deleteExpando ) {  
  30.                 //如果支持delete, 见特性检测部分.  
  31.                 delete elem[ jQuery.expando ];  
  32.                 //删掉元素的jQuery.expando属性  
  33.   
  34.             } else if ( elem.removeAttribute ) {  
  35.                 //如果支持removeAttribute  
  36.                 elem.removeAttribute( jQuery.expando );  
  37.   
  38.             } else if ( isNode ) {  
  39.                 delete cache[ id ];  
  40.                 //如果是dom节点, 全局缓存里删除以这个id为key的对象.  
  41.             } else {  
  42.                 for ( var n in elem ) {  
  43.                     //如果是其它对象, 删除对象的所有属性. 防止内存泄露.  
  44.                     delete elem[ n ];  
  45.                 }  
  46.             }  
  47.         }  
  48.     }  


四 队列控制
队列控制也是jquery中很有特点的一个功能. 可以用来管理动画或者事件等的执行顺序. queue和dequeue主要为动画服务.
比如在jquery的动画里, 因为javascript的单线程异步机制, 如果要管理一批动画的执行顺序, 而不是让它们一起在屏幕上飞舞.
一般我们是一个一个的把下个动画写在上个动画的回调函数中, 意味着如果要让十个动画按次序执行. 至少要写9个回调函数.
好吧我承认我做过这样的事, 直接导致我的视力从5.2变为5.1.

现在有了队列机制, 可以把动画都放到队列中依次执行.究竟怎样把动画填充进队列.用的是queue方法.
不过queue非常先进的是.把动画push进队列之后,还会自动去执行队列里的第一个函数.
队列机制里面的另外一个重要方法是dequeue, 意为取出队列的第一个函数并执行.此时队列里面的函数个数变为N-1.

看个例子.比如我要让2个div以动画效果交替隐藏和显示.同时只能有一个div在进行动画.

Java代码  收藏代码
  1. <style type="text/css">   
  2. #div1 {background:#aaa;width:188px;height:188px;position:absolute;top:10px;left: 110px;}  
  3. #div2 {background:#aaa;width:188px;height:188px;position:absolute;top:310px;left: 110px;}  
  4. </style>  
  5.   
  6. <body>   
  7. <div id="div1">我是一个div</div>  
  8. <div id="div2">我是另一个div</div>  
  9. </body>  
  10.   
  11. 用queue可以这样做.  
  12. <script type="text/javascript">  
  13. $(document).queue([  
  14.     function(fn){  
  15.         $("#div1").hide(1000, fn);   
  16.       //fn === $(document).dequeue;  
  17.     },  
  18.     function(fn){  
  19.         $("#div2").hide(1000, fn);  
  20.     },  
  21.     function(fn){  
  22.         $("#div1").show(1000, fn);  
  23.     },  
  24.     function(fn){  
  25.         $("#div2").show(1000, fn);  
  26.     }  
  27. ])  
  28. </script>  


首先我们需要一个载体, 来保存这个队列, 这里选择了document. 其实选什么节点都一样, 保存队列其实也是一个jQuery.data操作.
然后queue的参数是一个数组. 里面的函数就是队列依次执行的函数. 前面讲到, queue方法会自动把队列里的第一个函数取出来执行.
意味着这些代码写完后, div1已经开始渐渐隐藏了. 隐藏完毕后, 如果要让后面的动画继续执行, 还要用$(document).dequeue()继续取出并执行现在队列里的第一个函数.
当然这个操作是放在第一个动画的回调函数里, 以此类推, 第二个.dequeue()要放在第二个动画的回调函数里.
我们看到这里没有用$(document).dequeue(). 因为这句代码太长. 注意队列函数里有一个参数fn, fn是dequeue方法内部传给此函数的, 就是$(document).dequeue().

在看源码之前, 先自己来想想这个功能应该怎么实现.
首先我们需要一个数组, 里面存放那些动画. 然后需要2个方法, set和get.可以存取动画.
可能我们还需要一个变量来模拟线程锁, 保证队列里的函数不会同时被执行.
最后我们要把这个数组存入dom的缓存中, 方便随时存取和删除.

看源码, 先是prototype方法.

Java代码  收藏代码
  1. jQuery.prototype.queue = function( type, data ) {  
  2.         if ( typeof type !== "string" ) {  
  3.             data = type;  
  4.             type = "fx";    
  5. //修正type, 默认为表示jquery动画的fx, 如果不为"fx", 即为自己的自定义动画, 一般我们用"fx"就足够了.  
  6.         }  
  7.         if ( data === undefined ) {   
  8.             return jQuery.queue( this[0], type );    
  9. //get队列. 不论集合中是单个或者多个元素, 总是返回第一个元素的队列  
  10.         }  
  11.         return this.each(function( i, elem ) {    
  12. //set队列, 遍历集合内所有元素  
  13.             var queue = jQuery.queue( this, type, data );    
  14. //set并返回队列  
  15.             if ( type === "fx" && queue[0] !== "inprogress" ) {  
  16.          //防止在执行函数的时候, 这里又进行dequeue操作, 这样会同时执行2个函数, 队列就不受控制了.  
  17.                 jQuery.dequeue( this, type );      
  18. //如果队列没有被锁住, 即此时没有在执行dequeue. 移出队列里第一个函数并执行它.  
  19. //毕竟queue的主要任务是添加队列, 执行函数的操作上, 只能当二等公民.  
  20.             }  
  21.         });  
  22.     }  
  23. 看看jQuery.queue这个静态方法.  
  24.     jQuery.queue = function( elem, type, data ) {  
  25.         if ( !elem ) {  
  26.             return;  
  27.         }  
  28.         type = (type || "fx") + "queue";  
  29.         var q = jQuery.data( elem, type );  
  30.         //取得元素缓存上面的队列  
  31.         if ( !data ) {    
  32.         //如果当data为空, 只是查询queue. 那么返回队列或者[]  
  33. return q || [];  
  34.         }  
  35.         if ( !q || jQuery.isArray(data) ) {  
  36.             q = jQuery.data( elem, type, jQuery.makeArray(data) );   
  37.         //否则是set操作,注意!q || jQuery.isArray(data)这句代码的含义,   
  38. //如果q为null, 说明缓存上没有队列. 此时哪怕队列里只有一个函数, 也把它转成数组, 保证队列是数组形式  
  39.         //如果q不为null, 说明缓存上已经存在队列, 但是如果现在被添加的函数是一个数组的话, 以现在的数组来代替原来的队列, 即把原来的队列清空了.  
  40.         // clearQueue函数就是用的这一句代码执行清空队列操作.     
  41. else {  
  42.             q.push( data );  
  43.         //缓存上有队列并且只添加一个函数  
  44.         }  
  45.         return q;  
  46.     }  
  47.   
  48. 再看dequeue, dequeue的原型方法什么也没做, 直接把参数交给jQuery.dequeue来处理.  
  49.   
  50.     dequeue: function( elem, type ) {  
  51.         type = type || "fx";  
  52.         var queue = jQuery.queue( elem, type ), fn = queue.shift();  
  53.         //取得队列, 和队列里的第一个元素, 这里直接给shift掉了, 先斩后奏.  
  54.         if ( fn === "inprogress" ) {  
  55.         //如果fn===” inprogress”, 说明杀错了人, 我要找的是函数  
  56.         fn = queue.shift();  
  57.         //继续找下一个, 下一个肯定是函数了.  
  58.         }  
  59.         if ( fn ) {  
  60.             if ( type === "fx" ) {  
  61.                 queue.unshift("inprogress");  
  62.         //函数执行前, 在queue数组的最前面添加一个进程锁, 复活刚才杀错的人.   
  63. }  
  64.   
  65.             fn.call(elem, function() {  
  66.         //执行函数, 参数就是前面的fn  
  67.                 jQuery.dequeue(elem, type);  
  68.             });  
  69.         }  
  70.     }  
  71. })  


“inprogress”进程锁是这样工作的:
如果是dequeue操作, 去掉锁, 执行队列里的函数, 同时给队列加上锁. 如果是queue操作, 要看锁的状态, 如果被锁上了, 就只执行队列的添加操作. 不再调用dequeue.
其实dequeue和queue都可以执行队列里的第一个函数.queue操作添加完队列之后, 会调用dequeue方法去执行函数.
但是用dequeue执行函数的时候, 这时候如果又用queue触发dequeue的话, 很可能同时有2个函数在执行. 队列就失去一大半意义了(还是可以保证顺序, 但是2个动画会同时执行).
不过这个锁只能保证在dequeue的时候, 不被queue操作意外的破坏队列.
如果人为的同时用2个dequeue, 还是会破坏动画效果的. 所以要把fn写在回调函数里.

清空队列

Java代码  收藏代码
  1. clearQueue: function( type ) {  
  2.         return this.queue( type || "fx", [] );  
  3.     }  


原理上面已经提到过了, 就是这一句

Java代码  收藏代码
  1. if ( !q || jQuery.isArray(data) ) {  
  2.             q = jQuery.data( elem, type, jQuery.makeArray(data) );   
  3. }  


用一个空数组代替了原来的队列.

五  多库共存
jQuery.noConflict
将变量$的控制权让渡给上一个实现它的那个库.
可能很多人都被多库共存时的$变量问题困扰过. 比如你先引入了prototype库,然后又引入了jquery.因为jquery的$会覆盖prototype的$.
现在想调用prototype的$怎么办呢, noConflict方法就派上用场了.
Jquery代码里最开始就有一句_$ = window.$ , 在加载的时候就用_$来引用原来的$ (比如现在就是prototype库里的$).

Java代码  收藏代码
  1. jQuery.extend({     
  2.     noConflict: function( deep ) {  
  3.         window.$ = _$;     
  4. //window.$归还给原来的库. 要回归jquery再用window.$ = jQuery就可以了.  
  5.         if ( deep ) {      
  6.             window.jQuery = _jQuery;     
  7. //如果deep为true, jQuery这个变量也可以归还, 不过一般不需要也不推荐这么做.  
  8.         }  
  9.         return jQuery;  
  10.     }  


继承和拷贝
jQuery.prototype.extend和jQuery.extend
扩展 jQuery 元素集来提供新的方法, 或者把一个对象的属性拷贝到另外一个对象上.
通常javascript的继承实现有4种方式.
1 构造继承
2 prototype继承
3 属性拷贝
4 实例继承(这个有点特殊, 主要用于继承内置对象)

这4种继承都有各自的优点和缺陷.
构造继承查找属性快.但无法继承原型链上的方法,而且每次都要为属性复制一份新的副本进行储存
原型继承在性能方面好一些,可以共享原型链.但查找属性慢,因为可能要遍历N条原型链才能找到某个属性.而且原型链太多,会使得结构越加混乱.并且会丢失对象的constructor属性
(对象的constructor总是指向原型链最上层的构造器)
属性拷贝非常灵活,但明显效率偏低. 而且仅仅只是模拟继承.
实例继承主要用来继承Array, Date等内置对象, 用的较少.

jquery里采用的是属性拷贝.其实用哪种继承是个见仁见智的问题. 也有其它一些库就是用的原型继承.

前面也可以注意到, jquery只在构造方法或者原型链上定义了少量的核心方法. 其它功能块都是通过extend函数拷贝上去.按需定制.
好比开发商交给我们房子的时候, 只安装了水电暖气等基本设施.电视机洗衣机显然是自己去买比较好.

属性拷贝原理就是遍历第二个对象, 然后分别把键和值填入第一个对象中.类似于

Java代码  收藏代码
  1. for (var i in obj2){  
  2.     Obj1[i] = obj2[i]  
  3. }  


不幸的是jquery里面的做法复杂的多,不仅可以把多个参数的属性都复制到一个对象中,还能实现深度继承.
深度继承是指如果被继承对象和继承对象都有同名属性a, 而且这个属性的值分别是一个对象b和c.会把b和c的属性都合并到一个新的对象里, 作为值返回给合并后的对象.
说的有点复杂, 看个例子.

Java代码  收藏代码
  1.       
  2. jQuery.extend( true,          
  3.          { name: “John”, location: { city: “Boston” } },         
  4.          { last: “Resig”, location: { state: “MA” } }         
  5.      );          
  6.       结果为         
  7.        {   
  8. name: “John”, last: “Resig”,          
  9.         location: { city: “Boston”, state: “MA” }   
  10.        }  


jQuery的做法主要是这样, 先修正参数,根据第一个参数是boolean还是object确定target是哪个对象.
如果有且只有一个object类型的参数, 则把这个参数里的属性copy到jQuery或者jQuery.prototype上, 扩展jQuery对象.用这个办法可以很方便的编写插件.
否则依次遍历第一个object参数之后的所有object类型对象的属性. 根据是否深度继承用不同的方式进行copy操作.
extend会改变第一个参数的引用. 如果不想改变它,可以稍微变通一下,把所有的参数属性都拷贝到一个空对象上.如$.extend({}, obj1, obj2);

Java代码  收藏代码
  1. jQuery.extend = jQuery.fn.extend = function() {  
  2.     var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy, copyIsArray;  
  3.     //target应该指向被拷贝的对象, deep表示深度拷贝或者浅度拷贝, 如果为true,即深度拷贝.反之为浅度拷贝.  
  4.   
  5.     if ( typeof target === "boolean" ) {  
  6.     //如果显示声明了是深度拷贝还是浅度拷贝  
  7.         deep = target;  
  8.     //重新设置deep  
  9.         target = arguments[1] || {};  
  10.     //修正target, 让它指向第二个参数  
  11.         i = 2;  
  12.     //修正循环开始的位置, copy的时候跳过deep和target, 指向第一个copy对象.  
  13.     }  
  14.   
  15.     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  
  16.         //修正target. 确保target是一个可以迭代属性的对象, 从这句代码看出target可以为函数对象  
  17.         target = {};  
  18.     }  
  19.     if ( length === i ) {  
  20.         target = this;  
  21.         --i;  
  22.         /* 
  23.             当只有一个参数是对象的情况(可能前面还有一个true或false).  
  24.             把属性赋值给jquery或者jquery.fn. 帮jquery实现继承. 
  25.             并且重新修正循环起始位置. 
  26.         */  
  27.     }  
  28.   
  29.     for ( ; i < length; i++ ) {  
  30.         if ( (options = arguments[ i ]) != null ) {  
  31.             //只遍历不为null的参数  
  32.             for ( name in options ) {  //遍历copy对象的属性  
  33.                 src = target[ name ];    //记录target的属性值  
  34.                 copy = options[ name ];  //记录将要被copy进去的值  
  35.                 if ( target === copy ) { //防止死循环???  
  36.                     continue;  
  37.                 }  
  38.   
  39.                 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {  
  40.                     //如果是深度继承并且copy是对象字面量或者数组, 但必须保证至少为对象字面量和数组之一才会继续下面.  
  41.                     //copyIsArray = jQuery.isArray(copy)返回的是boolean.  
  42.                     //如果jQuery.isPlainObject(copy)和jQuery.isArray(copy)都是false,那整个if语句里的判断条件都返回false,  
  43.                     //也就不会执行下面了的深度继承了.比起1.42版本, 很多地方功能没变, 代码还是明显清晰了很多.  
  44.                     if ( copyIsArray ) {   //如果是数组  
  45.                         copyIsArray = false//重设copyIsArray  
  46.                         clone = src && jQuery.isArray(src) ? src : [];  
  47.                     //防止深度copy的时候, target为undefined. 此时target应该为对象类型.   
  48.                     //如果target本来为undefined, 要设一个不含属性的默认值, 且类型要跟copy对象保持一致.  
  49.                     } else {  
  50.                         clone = src && jQuery.isPlainObject(src) ? src : {};  
  51.                     //同上  
  52.                     }  
  53.                     target[ name ] = jQuery.extend( deep, clone, copy );  
  54.                     //深度继承递归调用extend方法进行合并  
  55.                 } else if ( copy !== undefined ) {  
  56.                     target[ name ] = copy;  
  57.                     //浅度继承直接复制属性, 但是不要带入undefined值.  
  58.                 }  
  59.             }  
  60.         }  
  61.     }  
  62.   
  63.     return target;  
  64.     //返回合并后的对象. 第一个obj参数的引用已经被改变了.  
  65. }  

转载于:https://www.cnblogs.com/anjey/archive/2012/01/12/2320283.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495169.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

北京航空航天大学王田苗教授:当前智能机器人发展若干挑战性问题

来源&#xff1a;雷锋网摘要&#xff1a;2018 全球人工智能与机器人峰会&#xff08;CCF-GAIR&#xff09;在深圳召开&#xff0c;峰会由中国计算机学会&#xff08;CCF&#xff09;主办&#xff0c;雷锋网、香港中文大学&#xff08;深圳&#xff09;承办&#xff0c;得到了宝…

JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6

Node.js 的基础教学 之 exports 和 module.exports&#xff1a;https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript、ES5、ES6&#xff1a;https://www.cnblogs.com/lovesong/p/4908871.html 1、为什么有模块概念 理想情况下&#xff0c;开发者只需要实现核心的业务逻辑&…

深度 | 智慧城市背景下的“多规合一”标准探究

来源&#xff1a;《技术与应用》 作者&#xff1a;杜青峰 万碧玉 王益 吴丽丽 王树东 姜栋 摘要&#xff1a;在参与智慧城市标准综合评价系统研发过程中&#xff0c;研究我国目前城市规划标准的现状&#xff0c;总结了我国现有城市规划标准中存在的自成标准、内容冲突、缺乏衔接…

Windows Terminal完整指南

原文&#xff1a;Windows Terminal: The Complete Guide&#xff1a;https://www.sitepoint.com/windows-terminal/ From&#xff1a;https://zhuanlan.zhihu.com/p/272082726 github&#xff1a;https://github.com/microsoft/terminal Windows Terminal&#xff0c;它是 WS…

谁将引领5G标准?

来源&#xff1a;中国知识产权杂志作者&#xff1a;王活涛 郑友德 沈剑锋 袁真富中国企业的5G技术创新之所以能不断取得突破性的成果&#xff0c;在全球通信标准上占有一定的“话语权”&#xff0c;在很大程度上得益于中国企业对技术创新的大力投入和发明专利积累。截止2018年6…

Python 操作 Kafka --- kafka-python

kafka-python&#xff1a;https://github.com/dpkp/kafka-python kafka-python 文档&#xff1a;https://kafka-python.readthedocs.io/en/master/apidoc/modules.html kafka 官方文档&#xff1a;http://kafka.apache.org/documentation.html Python 操作 Kafka 的通俗总结&a…

k8s 基本使用

Kubernetes 编排系统&#xff1a;https://www.cnblogs.com/gaoyuechen/p/8685771.html k8s 集群中的 yaml 文件详解&#xff1a;https://blog.csdn.net/qq_28361541/article/details/106089574 什么是 k8s&#xff0c;k8s 有什么功能 ? &#xff1a;https://www.jianshu.com…

全球芯片行业现状分析:大家都在依赖美国 未来如何破局?

来源&#xff1a;网易智能翻译&#xff1a;乐邦香港媒体《南华早报》近日发文称&#xff0c;中国依赖于美国的核心技术已有一定的时日&#xff0c;但全世界都是如此&#xff0c;美国在半导体制造领域无可撼动的领先优势&#xff0c;是50多年的研发成果。随着中兴事件进入下一个…

AI企业下一个使命:让生物特征数据使用走向阳光透明

来源&#xff1a;亿欧网摘要&#xff1a;时隔一年&#xff0c;生物特征识别技术不断被完善&#xff0c;公众的生物特征数据仍然每天被传感器收集汇总&#xff0c;但是对于生物特征数据的收集、储存、使用和流通仍然是半遮半掩的灰色区域&#xff0c;各方好像都等着导火索的出现…

命令行 浏览器

使用命令行浏览器在 Linux 终端上网浏览 我猜你阅读这篇文章可能是用 Firefox 或基于 Chrome 的浏览器&#xff08;如 Brave&#xff09;&#xff0c;或者&#xff0c;也可能是 Chrome 浏览器或 Chromium。 换句话说&#xff0c;你正在利用基于 GUI 的方式浏览网页。然而&…

重磅来袭,机器人四大家族财务报表大揭秘

来源&#xff1a;华尔街见闻摘要&#xff1a;四大家族实力强劲&#xff0c;在机器人技术与市场占有率上遥遥领先。在2015年之前&#xff0c;四大家族在全球的市占率在50%以上&#xff0c;而随着全球许多细分领域机器人厂商的崛起以及《中国制造2025》推动下国内厂商的发展&…

Python 定时任务框架 apscheduler

github 地址&#xff1a;https://github.com/agronholm/apscheduler apscheduler 基本概念介绍 说到定时任务&#xff0c;会想起 linux 自带的 crontab &#xff0c;windows 自带的任务计划&#xff0c;都可以实现守时任务。操作系统基本都会提供定时任务的实现&#xff0c;但是…

一文看懂人工智能产业链,未来10年2000亿美元市场

来源&#xff1a;传感器技术摘要&#xff1a;据腾讯研究院统计&#xff0c;截至2017年6月&#xff0c;全球人工智能初创企业共计2617家。美国占据1078家居首&#xff0c;中国以592家企业排名第二&#xff0c;其后分别是英国&#xff0c;以色列&#xff0c;加拿大等国家。根据艾…

如何跟机器人“抢”工作?专家:新的分工将形成

来源&#xff1a;经济日报摘要&#xff1a;随着人工智能技术的深度发展和机器人的广泛应用&#xff0c;人们会从许多传统生产活动中解放出来&#xff0c;有了更多闲暇时间&#xff0c;更强大的支持手段&#xff0c;让生活更有趣和丰富多彩。创新、创意会成为生活和工作中的必需…

互联网让我们变笨了吗:过去10年关于大脑的11个有趣发现

来源&#xff1a;资本实验室摘要&#xff1a;人类大脑&#xff0c;长期以来被认为科学和宇宙中最复杂的事物之一。鉴于其复杂性&#xff0c;受制于技术限制&#xff0c;过去科学家很难解开其内部运作的秘密&#xff0c;但目前的研究成果表明我们离秘密又近了一些。聚焦前沿科技…

美研究人员公布“盲动”机器人技术细节

来源&#xff1a;新华网摘要&#xff1a;&#xff17;月&#xff17;日美国麻省理工学院近日发布公报称&#xff0c;该校研究人员最新公布了一种“盲动”机器人的技术细节。这种机器人不需要借助视觉系统&#xff0c;可在崎岖地形中穿行跳跃&#xff0c;有望在危险工作环境中得…

AutoJs 4.1.1 实战教程

Auto.js 中文文档&#xff1a;https://hyb1996.github.io/AutoJs-Docs/#/?id综述 pro 版本支持 Node.js AutoJs Pro 7.0.4-1 实战教程---史上最全快手、抖音极速版 &#xff1a;https://blog.csdn.net/zy0412326/article/details/107180887/&#xff1a;https://blog.csdn.n…

人工智能军备竞赛:一文尽览全球主要国家AI战略

来源&#xff1a;网络大数据摘要&#xff1a;人工智能的迅速发展将深刻改变人类社会和世界的面貌&#xff0c;为了抓住 AI 发展的战略机遇&#xff0c;越来越多的国家和组织已争相开始制定国家层面的发展规划。人工智能的迅速发展将深刻改变人类社会和世界的面貌&#xff0c;为…

flex和js进行参数传递

来着&#xff1a;http://www.cnblogs.com/Cnol/archive/2009/09/20/1570365.html 方法一&#xff1a;flex接收网页传值&#xff01;~ 1<?xml version"1.0" encoding"utf-8"?> 2<mx:Application xmlns:mx"http://www.adobe.com/2006/mxml&q…

师法自然,仿生技术是如何改变世界的?

来源&#xff1a;36Kr摘要&#xff1a;“向自然学习”&#xff0c;这并非是句空话。本文介绍了科学家如何借鉴大自然&#xff0c;在材料科学&#xff0c;信息技术等领域实现创新。希望能为您带来启发。当今世界最伟大的创新者&#xff0c;非大自然莫属。大自然经过45亿年的演变…