当自定义数据属性为 json 格式字符串时 jQuery 的 data api 问题

jQuery 的 data API 实现方式 有缓存数据的效果

当 自定义数据属性是一个 json 格式字符串时，缓存的数据如果被修改， 则修改后的数据继续存在于缓存系统中， 如果不留意，这可能导致一些BUG,因为你可能没有注意到，这个数据被修改过了。

也就是， jquery 的 data 接口 不支持 js 数据对象 与 DOM 对象间的双向绑定。

 jQuery data 实现的源码可阅读此文【jQuery1.8.2源码解析之jQuery.data】：
http://www.cnblogs.com/lovesueee/archive/2012/10/24/2737839.html

复制代码
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
 <input type="hidden" value=""  data-json='{"a":123,"b":456}' id="tst" />
<script>
var node = $("#tst");
console.log(node.attr("data-json"));

var data = node.data("json");
console.log(data);
data.b = 'hello';

var data1 = JSON.parse(node.attr("data-json"));
console.log(data1);
console.log('data===data1',data===data1);

var data2 = node.data("json");
console.log(data2);
console.log('data===data2',data===data2);

var data3 = JSON.parse(node.attr("data-json"));//这样取值不受缓存影响
console.log(data3);


</script>
</body>
</html>
复制代码

运行结果

{"a":123,"b":456} 
Object {a: 123, b: 456} 
Object {a: 123, b: 456} 
data===data1 false 
Object {a: 123, b: "hello"} 
data===data2 true 
Object {a: 123, b: 456}

 

posted @   ecalf  阅读(2125)  评论(2)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手