jQuery 之缓存

本文探讨了jQuery的缓存功能,特别是在处理后台栏目单品数据时的应用。通过jQuery.data方法,可以为对象和DOM元素附加及获取数据。文章详细解释了如何给普通对象和DOM元素赋值,并分析了jQuery在不同浏览器环境下对DOM元素缓存的处理策略。还提供了网友的简单实现代码供参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.前言

       在后台中,某栏目添加多个单品,输入单片链接之后需要进行ajax请求该单品的详细数据,点击“保存”按钮,需要将所有的单品数据进行汇总为json并保存。

        给文本框的blur添加事件进行ajax请求后数据的存储成为一个问题,偶然看jquery源码时,发现.data是一个不错的实现。

2.使用

        jQuery.data可以为普通对象或是DOM element 附加及获取数据,分为以下三类:

        1)用name,value给普通对象赋值   $.data(obj,name,value),获取数据$.data(obj,name)

        2)用另一个对象给普通对象赋值    $.data(obj,another), 获取数据$.data(obj,name)

        3)给DOM element元素赋值   $.data(element,name,value) ,获取数据$.data(element,name)

3.详细

       1》给普通对象赋值解析

        给对象赋值时,其实就是将一个“cache”附加到了对象上,并使用了一个特殊的属性名称

         

        如上图所示:obj多了一个属性名:jQuery112100953224126715213 在该属性下存放了数据。

        属性名的生成:var expando="jQuery"+("1.2"+Mah.random()).replace(/\D/g,'');  //jquery版本加随机数,特殊名称,并用于标识不同的页面,它是jQuery引入到页面后随即生成的。

         2》给DOM element元素赋值

         因为在一些浏览器中(IE6,7)不能有效回收DOM element上附加的对象引用,所以采用不同的方式来附加数据

使用了cache,并附加uid(唯一且递增),不直接保存在DOM element上,保存于jQuery.cache上。uid附加在DOM Element 的 “expando” 属性中。 var id = obj[expando] = obj[expando] || ++uuid;

         

        另,有的Dom element具有其他的“事件”之类的。为防止被用户覆盖不能使用,缓存附加的属性不在jQuery164....该属性的下面。与其实兄弟平级。  

     

         如果想覆盖也是可以的,$.data中第四个参数为true(默认为false)此时修改的是expando内部的events

 

            

4.简单实现

         查了一下有网友对这部分内容的简单实现,敲了一下,附上代码:

$=function(){
	var globleCache={};
	var expando=jQuery+("1.6"+Math.random()).replace(/\D/,'');  //过滤非数字
	var uuid=0;
	function getcache(obj){  //根据对象的不同选择不同的存储位置
		if(obj.nodeType){  //DOM element 
			var id=obj[expando]=obj[expando]||++uuid;  //uuid 自增
			globleCache[id]=globleCache[id]||{};
			return globleCache[id];
		}else{
			obj[expando]=obj[expando]||{};
			return obj[expando];
		}
	}
	function getdata(cache,name){  //获取缓存值
                 return cache[name];
	}
	function setdata(cache,name,value){   //插入缓存值
		return cache[name]=value;
	}
	function setdatawithobject(cache,another){  //将对象向对象赋值
              for(var name in another){
        	cache[name]=another[name];
              }
	}
	return{
		data:function(obj,name,value){
			var cache=getcache(obj);
			if(name instanceof Object){  //值为另一个对象
                                setdatawithobject(cache,name);
			}else if(value===undefined){
				getdata(cache,name);
			}else{
				setdata(cache,name,value);
			}
		}
	}
   
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值