当自定义数据属性为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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php二维数组转成字符串示例
2014/02/17 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python数据结构之翻转链表
2017/02/25 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python虚拟环境完美部署教程
2019/08/06 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
试用期自我评价范文
2015/03/10 职场文书
离婚案件上诉状
2015/05/23 职场文书
Django实现聊天机器人
2021/05/31 Python