jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍

网上有很多教你怎么使用jQuery.data(..)来实现数据缓存，但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别，所以我用到了，研究下分享给大家。
$(“”).data([key],[value])与jQuery.data(element,[key],[value])的区别
这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象，当时我分别在使用它俩的时候真的吓我一跳，区别可大了，真是不用不知道，一用吓一跳。看例子先吧，后再根据源代码分析。
Js代码：

<div id=”test2″ onclick=”test()”>test2</div>
<div id=”abc3″ onclick=”test()”>test3</div>
<div id=”test” onclick=”test()”>test</div>
<p id=”ttt”>aaaa</p>
<script>
$(document).ready(function(){
$(“#test”).click(function(){
alert(“JQUERY”);
var e=$(“div”);//定义了两jquery对象
var w=$(“div”);//e是不等于w的。
//首先使用data([key],[value])用法。
$(e).data(“a”,”aaaa”);//分别在e和w上保存Key一样的数据，
$(w).data(“a”,”wwww”);// 看它是否会覆盖前面的，虽然是保存在不同对象上。
alert($(e).data(“a”));//你猜到答案了吗，里输出是wwww;是不是有点意外？
alert(e===w)//false
alert($(w).data(“a”));//这里也是wwww;
//使用jQuery.data(element,[key],[value])来存放数据。
$.data(e,”b”,”cccc”);//分别在e和w上保存Key一样的数据，
$.data(w,”b”,”dddd”);// 看它是否会覆盖前面的，虽然是保存在不同对象上。
alert($.data(e,”b”));//应该你能猜答案吧，输出cccc
alert($.data(w,”b”));//这输出dddd
});
});
</script>

看了上面的例子是不是发现data([key],[value])与jQuery.data(element,[key],[value])两个根本就不一样了对吧？它们之间到底有没有关系呢。怎么data([key],[value])会覆盖前面key相同的值呢？
而jQuery.data(element,[key],[value])只要是绑定到不同的对象上都不会造成覆盖。是这样吗？那来研究下它们的源代码吧。
先看jQuery.data(element,[key],[value])源代码。
Js代码：

jQuery.extend({
cache: {},
// Please use with caution
uuid: 0,
// Unique for each copy of jQuery on the page
// Non-digits removed to match rinlinejQuery
expando: “jQuery” + ( jQuery.fn.jquery + Math.random() ).replace( /D/g, “” ),
….
data: function( elem, name, data, pvt /* Internal Use Only */ ) {
// 是否可以附加数据，不可以则直接返回
if ( !jQuery.acceptData( elem ) ) {