jquery中prop，attr，data的区别

这两天翻了jq的源码，今天看到了jq关于数据存储的几个方法，遂总结一下，和小伙伴没分享一下，哪里说的不对，还望批评指正~~~

废话不多说，直接上代码：

$(function(){
    $('#div1').attr('name','one');
    console.log($('#div1').attr('name'));//one
    $('#div1').prop('name','one');
    console.log($('#div1').attr('name'));//one
    $('#div1').data('name','one');
    console.log($('#div1').attr('name'));//one
})    

我们看到attr ,prop, data都可以起到存储数据的作用，那么他们有什么区别呢？

1，首先来看attr ,在jquery源码中attr这个方法是用setAttribute,和getAttribute实现的

document.getElementById('div1').setAttribute('name','one');
console.log(document.getElementById('div1').getAttribute('name'));   //one

2，再来看prop,可以看到是通过点或[]操作符实现的

document.getElementById('div1').name = 'one'; //或者
document.getElementById('div1')['name'] = 'one';
console.log(document.getElementById('div1').name);  //one

3，上面的两种方法比较适合设置一些属性，或者存储一些数据量不大数据，比如简单的字符串或者简单的数字，但都不适合存储大量的数据，比如一个大的json,或者大的数组，这是为什么呢？？？

这就得说到js的内存泄漏！！！

什么？什么？你不知道什么是内存泄漏？

好吧，我就献丑了，就当是抛砖引玉了，翻看网上的很多资料都讲的晦涩难懂，对新入手的小白很不友好，我就按照我自己理解的来说，希望能用最通俗直白的话，能让你多少理解一点（大牛跳过）；

js这们语言，有个特点，js中没用的变量（即没有被引用）会被垃圾回收机制所销毁掉，这时变量就不存在了，内存就会释放，也就减小内存的开销，但是js中的一些操作是会引起内存泄漏的，所谓的内存泄漏在我看来就是，变量一直存在引用关系，导致变量无法被垃圾回收机制所回收，内存无法释放，计算机的性能就会低，从而引起卡顿现象，比如DOM元素和对象之间的相互引用就会引起内存泄漏

var oDiv = document.getElementById('div1');
var json = {};
oDiv.name = json;
json.aaa = oDiv;

如上代码，就是DOM元素引用了对象，对象也引用了DOM元素

var json = {a:1,b:2,c:3};
$('#div1').attr(name,json);

看了上面的代码，小伙伴们就应该知道了为什么不能用attr和prop了吧

============================================================================================================================

而data，他是可以存储任何数据的，包括json，并且不会引起内存泄漏，那么他是如何做到的呢？

其实再jq源码中使用了一个映射的关系，进行实现的，它并没有直接的将对象挂载到元素的属性上，而只是在元素上加了一个自定义属性，自定义属性的值是一个唯一的id，真正的数据是存储在一个对象上的，这个对象存储的所有的数据，我暂且叫它为cache，且每一个数据都有一个唯一的id，与元素身上自定义的属性的id是对应的，cache在中间起了一个中介的作用，巧妙的联系在了一起，避免了内存泄漏。

支持原创从我做起！！！