jQuery缓存操作-cache数据

原创 2015年07月11日 07:27:49
jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段

jQuery.extend({
    cache: {},
 
    // Please use with caution
    uuid: 0,
     
    ...
     
});

即给jQuery添加了静态字段/方法,有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分别介绍


jQuery.cache 空对象,用来缓存。它的结构较复杂。


jQuery.uuid 自增唯一的数字。


jQuery.expando 字符串,使用Math.random生成,去掉了非数字字符。它作为HTMLElement或JS对象的属性名。
    
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),


jQuery.noData JS对象,对于指定的HTMLElement禁用data方法。如embed、applet。


jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性,则返回true。

<div>aa</div>
<script>
    var div = document.getElementsByTagName('div')[0];
    $.hasData(div); // false
    $.data(div, 'name','jack');
    $.hasData(div); // true
</script>

jQuery.acceptData 用来判断该元素是否能接受数据,返回true或false。在jQuery.data中使用。

jQuery.data 这是提供给客户端程序员使用的方法,它同时是setter/getter。

1,传一个参数,返回附加在指定元素的所有数据,即thisCachejQuery.data(el); // thisCache

2,传二个参数,返回指定的属性值jQuery.data(el, 'name'); 

3,传三个参数,设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
4,传四个参数,第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data,为避免人为的不小心重写在这个版本中加入的。

jQuery.removeData 删除数据。

上面是jQuery数据缓存模块的整体概述,下面详细说下jQuery.data方法。jQuery.data为两种对象提供缓存:JS对象和HTMLElement
    
// 为JS对象提供缓存
var myObj = {};
$.data(myObj, 'name', 'jack');
$.data(myObj, 'name'); // jack
 
// 为HTMLElement提供缓存
<div id="xx"></div>
<script>
    var el = document.getElementById('xx');
    $.data(el, 'name', 'jack');
    $.data(el, 'name'); // jack
</script>

内部实现上也是有区别的,


1,为JS对象提供缓存时,直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性(类似于jQuery16101803968874529044),属性值也是个JS对象。举例说明

var myObj = {};
$.data(myObj, 'name', 'jack');
console.log(myObj);

myObj的结构如下
myObj = {
    jQuery16101803968874553435 : {
        name : 'jack'
    }
}


jQuery16101803968874553435 这个字符串在data内部命名为id(注意并非HTMLElement元素的id),它实际就是jQuery.expando。上面已经提到它是在jQuery.js引入到页面后随机生成的。

2,为HTMLElement提供缓存时,却不会直接保存在HTMLElement上。而是保存在jQuery.cache上。cache为jQuery.cache。此时先给HTMLElement添加属性(类似于jQuery16101803968874529044),属性值为数字(1,2,3递增)。即只将一些数字保存在了HTMLElement上,不会直接将数据置入。这是因为IE老版本中可能会存在内存泄露危险。而HTMLElement如何与jQuery.cache建立联系呢? 还是id。刚刚提到属性值数字就是id。举例说明
<div id="xx"></div>
<script>
    var el = document.getElementById('xx');
    $.data(el, 'name', 'jack');
    console.log(el[jQuery.expando]); // 1
    console.log(jQuery.cache); // {1 : {name:'jack'}}
</script>

el 上添加了属性jQuery.expando,值为id,这个id是从1开始递增的。而id又作为jQuery.cache的属性(key)。这样就HTMLElement就与jQuery.cache建立了联系。如图





不知注意到没有,jQuery.data还有第四个参数pvt,这个参数只在jQuery._data中使用。
// For internal use only.
_data: function( elem, name, data ) {
    return jQuery.data( elem, name, data, true );
},

jQuery._data从命名上就指定它是私有的,使用jQuery的客户端程序员不应该去调用该方法。jQuery的API文档上也不会公开它。


jQuery的数据缓存模块从1.2.3到1.6.1几乎每个版本都在变。jQuery._data的提出就是为了避免客户端程序员覆盖/重写了默写模块。如jQuery事件模块中事件handler等就使用jQuery.data存储,如果重写了该模块。那么事件模块将瘫痪。因此特意添加了pvt参数及jQuery._data方法。


但如果你刻意要破坏,那么还是可以做的。如下

<div id="xx">Test</div>
<script>
    $('#xx').click(function(){
        alert('click');
    });
     
    // 语句1
    $.data($('#xx')[0], 'events', '', true);
     
    // 语句2
    //$._data($('#xx')[0], 'events', '');
</script>

点击div[id=xx]将不会触发点击事件。
版权声明:本文为博主http://www.feixueteam.net原创文章,未经博主允许不得转载。

相关文章推荐

jQuery源码分析-07数据缓存-Cache

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接。    读读写写,不对的地方请告诉我...

数据处理cache缓存

  • 2017-06-30 09:08
  • 32KB
  • 下载

jquery cache 缓存

做前端开发的朋友都用过javascript,用过js一定知道js缓存,说缓存其实不恰当,严格意义上这些缓存都是运行在内存中的,当你打开一个页面,该页面中的js就已经加入到了内存中,所以可以看到当打开网...

HTML5 使用application cache 接口实现离线数据缓存

1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest 文件名称:name.manifest 作用:用于配置需要缓存的文件 2.使用方法 在服务...

SpringBoot学习笔记(6) SpringBoot数据缓存Cache [Guava和Redis实现]

Spring定义了org.springframework.cache.CacheManager和org.springframework.cache.Cache接口来统一不同的缓存技术,而 Spring...

Guava Cache 缓存数据被移除后的监听器RemovalListener

guava的容量管理,有4种方式可以将数据从缓存中移除。有的时候,我们需要在缓存被移除的时候,得到这个通知,并做一些额外处理工作。这个时候RemovalListener就派上用场了。监听器有几个特点需...

Django中过期@cache_page中缓存的views数据

django的缓存系统中,cache_page 这个装饰器非常好用,只要添加一个装饰器就可以缓存views的响应内容,但是django没有提供过期这个views缓存数据的功能。 @cache_page...

8.5 数据缓存Cache

8.5 数据缓存Cache8.5.1 Spring缓存支持 Spring定义了CacheManager和Cache接口用来统一不同的缓存的技术。CacheManager是Spring提供的各种缓存技...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)