jQuery 之缓存

最新推荐文章于 2022-07-28 10:12:06 发布

原创最新推荐文章于 2022-07-28 10:12:06 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #缓存

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了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);
			}
		}
	}
   
}