js的$.data() 和 $('div').data() 緩存機制

文章轉載自 https://blog.csdn.net/rocling/article/details/81483167

1.JS緩存機制

利用$.data() 和 $('div').data() 都可以將數據暫存到某個jq對象（一般是dom對象被jq選擇器生成的jq對象）上。

這兩種方式是有區別的，寫個小例子:

    ...
    <div id="people">
    </div>
    ...   
 

    // 注意這裏是兩個不同的JQ對象   lucy === lily  false
    var lucy = $("#people");
    var lily = $("#people");
     
    // 分別設置age
    lucy.data('age',12);
    lily.data('age',13);
     
    lucy.data('age'); // 13（注意）
    lily.data('age'); // 13

爲什麼導致這樣的情況呢？
大家再看一個例子

    // 注意這裏是兩個不同的JQ對象   lucy === lily  false
    var lucy = $("#people");
    var lily = $("#people");
     
    $.data(lucy,'age',12);
    $.data(lily,'age',13);
     
    $.data(lucy,'age'); // 12（注意）
    $.data(lily,'age'); // 13

大家看到了吧，這個地方獲取出來的 lucy age爲12 和上面是有區別的，爲什麼呢？
對於jquery中的封裝，兩個是有區別的。
簡單的來講：（注意這是高能預警）

    lucy.data() 是針對dom對象的。上面的$("#people")對應的是同一個dom對象（即div）！！
    $.data(lucy) 是針對jquery對象的。上面的$("#people")對應的是不同的jq對象！！

實際上對於這兩者而言，其內部實現方法都是一樣的，只不過lucy.data() 在調用底層cache方法的時候，將進行了this[0]處理。
如果要使用$.data來獲取 某個元素的值的話，也是可以的，使用 $.data(lucy[0])
再給大家補充一點：
如果lucy是一個li標籤，那麼$("li").data('hello','world') 這個時候，等於給所有的li標籤添加了一個緩存值，名字叫做hello，對應的value 爲world。
這個時候再使用$.data(lucy[0]) 來獲取屬性的時候，實際上是獲取整個dom元素中的，第一個li標籤的hello的值world

實際上整個cache過程，主要是Data實例對象的cache