Jquery数据缓存

参考：https://blog.csdn.net/aitangyong/article/details/50323561

http://www.cnblogs.com/dolphinX/p/3348582.html

$.data的使用

　　通过这个API，可以在这个对象上附加一些属性以及读取属性。

    var el = document.getElementById('content');  
    $.data(el, 'name', 'aty');  
    console.log($.data(el, 'name')); // aty

　　对于要操作的对象，分成两类：DOM对象和其他JS对象。

　　在JQ初始化时，会生成一个随机的字符串expando，生成方式如下：

expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" )

操作DOM对象

　　附加的数据不直接添加到DOM对象上，因为对于IE9之前的浏览器，在移除DOM对象后，无法释放直接附加到DOM对象上的自定义对象。

　　附加的数据存放在$.cache对象中。在DOM对象上建立一个键值对：expando->自增的uuid，$.cache[dom对应的uuid]->{ data:对应dom的数据对象}

var dom = document.getElementById("a");  
$.data(dom, 'name', 'aty');  
console.log(dom[jQuery.expando]); // 1  
console.log(jQuery.cache); // {1 : {data:{name:'aty'}}}

操作其他JS对象

　　和以上操作DOM不同，操作其他JS对象时（包括JQ对象：$(dom)），会直接在这个对象上创建 obj[expando]->{ data:附加的数据对象}

var hisObj = {};  
$.data(hisObj, 'name', 'him');  
console.log(hisObj[jQuery.expando].data.name);//him

attr和prop的区别

　　对于DOM对象，获取和设置数据有两种方式

property：如xx.id，或者可以自定义属性，如
```
t.customizedProp='customized prop';
```
attribute：dom.getAttribute(name) / dom.setAttribute(name,value)，这种方式设置的值显示到dom节点上：

var t=document.getElementById('test');
t.setAttribute('class','active');
t.setAttribute('customizedAttr','customized');

// <div id="test" class="active" customizedattr="customized">123</div>

　　这两种方式操作的数据存在一定的交集，不管通过哪种方式修改，都会互相影响：

t.id='test1';
console.log(t.getAttribute('id'));//test1

　　在这个交集中，并不是所有的key都是一致的，如t.className对应t.getAttribute("class")。可以看出，以上这两种方式存取值容易导致混乱。

　　在jQuery1.6之前，.attr()方法在获取一些attributes的时候使用了property值，这样会导致一些不一致的行为。

　　在jQuery1.6中，.prop()方法仅提供获取property值的方式，而.attr()方法仅返回attributes。

$.data的使用

操作DOM对象

操作其他JS对象

attr和prop的区别

猜你喜欢