我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

从jQuery的缓存到事件监听

很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到)。不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性。

<DIV id=d1 jQuery1294122065250="1">abc </DIV>

首先jQuery1294122065250中的"1294122065250"其实是一个时间戳。看看jQuery的源代码。

var expando = "jQuery" + now(), uuid = 0, windowData = {};

由于使用了闭包,这样每一个jQuery对象都有一个expando属性。
属性值jQuery1294122065250="1"的"1"其实是jQuery的缓存的key。

首先了解一下jQuery缓存的相关API:

  • data(name):返回元素上储存的相应名字的数据
  • data(name,value):在元素上存放数据,同时也返回value。
  • jQuery.data(element,key,value):在元素上存放数据,返回jQuery对象。注意:这是一个底层方法。你应当使用.data()来代替。
  • jQuery.data([element],[key]): 查询在元素上存放的数据。如果不指定参数,则会返回元素上面存放的所有数据,以Object的形式返回。注意:这是一个底层方法。你应当使用.data()来代替。
  • removeData(data):移除元素上的缓存。

把jQuery.data方法是底层方法,data方法调用了该方法。要了解Query的缓存,最好的方法莫过于调试一下jQuery代码了。

<script type="text/javascript">
    $(
function(){
        
var $d1= $("#d1");
        $d1.data(
"key","value");
        
var v = $d1.data("key");

        $d1.click(
function(){
            alert(
"click");
        });
        
for (var k in jQuery.cache){
            alert(k
+"\n"+jQuery.cache[k]);
        }
        
debugger;
    });
</script>
<div id="d1" class="">
    abc
</div>

上面是一个简单的jQuery代码。在执行完$d1.data("key","value");后。经过调试后可以发现

jQuery是一个全局变量:
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
        
// The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

    
// Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    
// Map over the $ in case of overwrite
    _$ = window.$,


jQuery.data存放着所有的缓存key就是上面提到的DOM属性jQuery*********的值。
下面是读取缓存data函数的关键代码:
data: function( elem, name, data ) {
        
var id = elem[ expando ], cache = jQuery.cache, thisCache;

        thisCache 
= cache[ id ];

        
return typeof name === "string" ? thisCache[ name ] : thisCache;
    },

经过调试id 与jQuery********属性一致。直接通过jQuery.cache获取缓存值。

有缓存就必然会有清除缓存,不清除缓存意味着很有可能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) {}
            }
        }
    });
}
在window.unload时,jQuery将逐一删除jQuery.cache中的元素。

jQuery的事件绑定也利用了jQuery的缓存。上面的代码监听了#d1.click事件后,经过调试,可以发现,在缓存key为"events"上记录了监听的事件。


通过上面的调试,发现所谓的事件监听或者绑定bind,其实就是在缓存中注册一下处理函数,当事件触发时,将DOM的注册的事件逐一执行就可以了。这其实是一种通用的事件处理机制,事件处理机制是一种典型的观察者设计模式。

posted on 2011-01-04 15:20 衡锋 阅读(4347) 评论(5)  编辑  收藏 所属分类: javascriptJqueryWeb开发

评论

# re: 从jQuery的缓存到事件监听 2011-01-04 18:39 ugg boots stores

表示很无奈啊  回复  更多评论   

# re: 从jQuery的缓存到事件监听[未登录] 2011-01-06 18:17 dm1299onion@gmail.com

博主、你用的是什么测试工具呀?可以看代码结构?  回复  更多评论   

# re: 从jQuery的缓存到事件监听 2011-01-06 22:16 阳衡锋

@dm1299onion@gmail.com
这不是什么测试工具和代码结构,只是IE8 的开发者工具调试了一下javascript。截图是javascript面板的监视面板。  回复  更多评论   

# re: 从jQuery的缓存到事件监听 2011-01-12 15:32 窝窝影视

jQuery算是 知道了!  回复  更多评论   

# re: 从jQuery的缓存到事件监听 2011-09-16 08:28 tbw

不错 又学了一招了   回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: