首页 > 代码库 > (五)JS学习笔记 - JQuery缓存机制
(五)JS学习笔记 - JQuery缓存机制
历史背景
开发中常常因为方便,把状态标志都写到dom节点中,也就是HTMLElement,缺点:
- 循环引用
- 直接暴露数据,安全性?
- 增加一堆的自定义属性标签,对浏览器来说是没意义的
- 取数据的时候要对HTML节点做操作
根本目的:
使用一种低耦合的方式让DOM和缓存数据能够联系起来
jQuery现在支持两种:
•$("ele").data()
1 jQuery.fn.extend({ 2 data: function( elem, name, data ) { 3 return jQuery.access( this, function( value )){ 4 //区别在each方法了,处理的是每一个元素dom节点 5 this.each(function() { 6 7 } 8 } 9 }10 },11 ........
•jQuery.data( element, key, value )
1 jQuery.extend({2 acceptData: Data.accepts,3 hasData: function( elem ){},4 //直接调用 data_user.access 数据类的接口,传入的是elem整个jQuery对象5 data: function( elem, name, data ) {6 return data_user.access( elem, name, data );7 },8 ........
区别:
•jQuery.data( element, key, value )
每一个element都会有自己的一个{key:value}对象保存着数据,所以新建的对象就算有key相同它也不会覆盖原来存在的对象key所对应的value,因为新对象保存是是在另一个{key:value}对象中
•$("div").data("a","aaaa")
它是把数据绑定每一个匹配div节点的元素上
DEMO
<div id="test">data test</div>var t1=$("#test");var t2=$("#test");//=======第一组========= $(‘‘").data()方法t1.data(‘a‘,1111);t2.data(‘a‘,2222);t1.data(‘a‘) //结果222222,被覆盖t2.data(‘a‘) //结果222222//=======第二组========= $.data()方法$.data(t1,"b","1111")$.data(t2,"b","2222")$.data(t1,"b") //结果111111,未被覆盖$.data(t2,"b") //结果222222
(五)JS学习笔记 - JQuery缓存机制
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。