jquery缓存

jQuery 的缓存机制

来看看 jQuery 中提高的数据缓存机制，有两个函数，分别是 jQuery.data()和 jQuery.fn.data()，可以看出来，一个是在 jQuery 对象上，一个是在 jQuery 生成的对象上。如果仔细阅读的话，你会发现 jQuery 中很多函数都有两个，原型上一个，jQuery 上一个。

jQuery.data() 有两种使用，一个用于绑定，一个用于查询：

1. jQuery.data( element, key, value )

2. jQuery.data( element, key )

上面的 element 参数表示 DOM 元素，比如一个例子如下：

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
jQuery.data(document.body, 'foo'); // 52
jQuery.data(document.body, 'bar'); // "test"

还有 .data() 方法，.data()，这个函数就直接在 jquery 对象上实行绑定 data：

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }复制代码

这边有一个小细节数据缓存接口：

var jq1 = $("body");
var jq2 = $("body");

jq1.data('a', 1);
jq2.data('a', 2);

jq1.data('a'); //2
jq2.data('a'); //2
// 数据被覆盖

$.data(jq1, 'b', 3);
$.data(jq2, 'b', 4);

$.data(jq1, 'b'); //3
$.data(jq2, 'b'); //4
// 不会被覆盖复制代码

可以看出来，通过这两种方法绑定的数据，其实是不一样的，前者会被覆盖，而后者不会，说明在 cache 中肯定有某种神秘的力量将他们区别开来。

作者：Archi16452
链接：https://juejin.cn/post/6844903464577990664
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。