当自定义数据属性为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 相关文章推荐
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
jQuery操作之效果详解
May 19 jQuery
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 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
自己动手做一个SQL解释器
2006/10/09 PHP
php部分常见问题总结
2008/03/27 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python中kmeans聚类实现代码
2018/02/23 Python
python抓取文件夹的所有文件
2018/02/27 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python列表推导式入门学习解析
2019/12/02 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python搜索算法原理及实例讲解
2020/11/18 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
给老师的一封建议书
2014/03/13 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
廉政承诺书
2015/01/19 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python