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