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


Posted in Javascript onFebruary 18, 2013

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}
Javascript 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery筛选器children()案例详解(图文)
Feb 17 #Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 #Javascript
jQuery图片播放8款精美插件分享
Feb 17 #Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 #Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 #Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 #Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 #Javascript
You might like
php中执行系统命令的方法
2015/03/21 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python实现SOM算法
2018/02/23 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
制衣厂各岗位职责
2013/12/02 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
交通安全教育制度
2014/02/02 职场文书
迎新晚会主持词
2014/03/24 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
聘任书的格式及模板
2019/10/28 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫