当自定义数据属性为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 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
实测jquery data()如何存值
Aug 18 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
小程序实现留言板
Nov 02 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
javascript实现计算器功能
Mar 30 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
PHP的FTP学习(一)
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
php curl的深入解析
2013/06/02 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
Python实现的选择排序算法示例
2017/11/29 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
python用户管理系统
2018/03/13 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python使用python-docx读写word文档
2019/08/26 Python
基于Python测试程序是否有错误
2020/05/16 Python
详解anaconda安装步骤
2020/11/23 Python
Spy++的使用方法及下载教程
2021/01/29 Python
百联网上商城:i百联
2017/01/28 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
工作人员思想汇报
2014/01/09 职场文书
什么是就业协议书
2014/04/17 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
负责培养人意见
2015/06/05 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS