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

2019-12-24,,,

jQuery 的 data API 实现方式有缓存数据的效果
使用 IE 7 (IE8+ 在控制台切换至IE7 模式),当DOM 节点有自定义数据属性时,检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性,这便是 用于从数据存储对象中获取自定义数据的建。

当自定义数据属性是一个 json 格式字符串时,缓存的数据如果被修改, 则修改后的数据继续存在于缓存系统中, 如果不留意,这可能导致一些BUG
复制代码 代码如下:
<!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}

您可能感兴趣的文章:

  • Json 自定义使用函数的简单实例
  • json定义及jquery操作json的方法
  • json定义及jquery操作json的方法
  • json的定义、标准格式及json字符串检验
  • js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
  • jQuery asp.net 用json格式返回自定义对象
  • json 定义
  • JS中的JSON对象的定义和取值实现代码

《当自定义数据属性为json格式字符串时jQuery的data api问题探讨.doc》

下载本文的Word格式文档,以方便收藏与打印。