不知道大家有没有发现,用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的注册的事件逐一执行就可以了。这其实是一种通用的事件处理机制,事件处理机制是一种典型的观察者设计模式。

从jQuery的缓存到事件监听的更多相关文章

  1. jQuery EasyUI/TopJUI输入框事件监听

    jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...

  2. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

  3. jquery easyui控件事件监听委托给jquery事件监听,keyup取最新值问题

    <div id="<?php echo NS; ?>toolbar"> <div style="padding:5px"> ...

  4. Zookeeper Curator 事件监听 - 秒懂

    目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...

  5. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  6. jquery mobile 对手势触控提供了如下几个事件监听:

    jquery mobile 对手势触控提供了如下几个事件监听: 复制代码代码如下: tap  当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动 ...

  7. jQuery中的事件监听方式及异同点

    jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...

  8. jQuery中的事件监听小记

    一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...

  9. Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作

    <div id="divId" class="divTable"> <div class="tableBody"> ...

随机推荐

  1. [Duilib] 交替背景色设置失败的原因

    用列表显示一列数据时,相邻数据常用不同背景色来达到区别的作用.但是设置了Duilib相应属性之后交替背景色效果并未出现.逐一排除之后发现是item的enable属性设置为"false&quo ...

  2. mysql 用户名密码登陆不上

    问题1:刚安装完mysql,设置了用户名密码root,登陆OK的,后来再连怎么也连不上了 操作步骤: 输入:mysql -uroot -proot 提示:ERROR 1045 (28000): Acc ...

  3. cocoa中获取时间

    头文件#import "Foundation/NSCalendarDate.h" + (id)calendarDate; - (int)yearOfCommonEra;- (int ...

  4. 企业高并发的成熟解决方案(一)video(笔记&知识点)

    知识点 答案 什么是高可用(HA) 高并发发生在哪两处 app服务器会出现什么问题,有哪些解决方案? 数据库并发有什么要求? hadoop集群的作用 负载均衡的功能有哪些 负载均衡的分类 哪种负载均衡 ...

  5. 一个DataTable赋值给另一个DataTable的常用方法

    DataView view = new DataView();view.Table = DataTableA;view.RowFilter = "itemType = 'book'" ...

  6. bzoj3620 似乎在梦中见过的样子

    好久没有写过KMP了,今天写个KMP练练手.此题就是枚举左端点暴力,用KMP做到O(n^2) #include<cstdio> #include<cstring> using ...

  7. 安装linux操作系统--浪潮服务器

    一直都是在虚拟机上进行安装linux操作系统,在服务器上安装的很少,也没有碰到过没找到驱动的情况,例如什么raid卡驱动,网卡驱动等异常情况的发生. 这次安装了两台服务器,浪潮的提供的服务器,硬盘是两 ...

  8. 【leetcode】155 - Min Stack

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...

  9. 设计模式知识搜集(c++)

    理解设计模式有两种途径,一种是看UML类图,一种是看代码理解实例,UML(一个简单的介绍)看懂了对理解设计模式大有裨益,代码容易陷进去,因此最好能找到适当且易于理解的应用场景,这下面实际上每个都是我收 ...

  10. Mapreduce执行过程分析(基于Hadoop2.4)——(一)

    1 概述 该瞅瞅MapReduce的内部运行原理了,以前只知道个皮毛,再不搞搞,不然怎么死的都不晓得.下文会以2.4版本中的WordCount这个经典例子作为分析的切入点,一步步来看里面到底是个什么情 ...