jquery中prop，attr，data的区别

$(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;

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

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