当自定义数据属性为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打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
extjs form textfield的隐藏方法
Dec 29 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
javascript对象的相关操作小结
May 16 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python将文本转换成图片输出的方法
2015/04/28 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python Pillow图像处理方法汇总
2019/10/16 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
Python实现随机爬山算法
2021/01/29 Python
消防志愿者活动方案
2014/08/23 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
如何用python反转图片,视频
2021/04/24 Python
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏