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在中間起了一個中介的作用，巧妙的聯系在了一起，避免了內存泄漏。

支持原創從我做起！！！