当自定义数据属性为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 相关文章推荐
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Vue声明式渲染详解
May 17 Javascript
javascript实现放大镜功能
Dec 09 Javascript
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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
音乐教育感言
2014/03/05 职场文书
美容院店长岗位职责
2014/04/08 职场文书
教师创先争优承诺书
2015/04/27 职场文书
让子弹飞观后感
2015/06/11 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
Nginx源码编译安装过程记录
2021/11/17 Servers