当自定义数据属性为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 new关键字的玄机 以及其它
Aug 25 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
react项目从新建到部署的实现示例
Feb 19 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 array_unique之后json_encode需要注意
2011/01/02 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
Python中类型检查的详细介绍
2017/02/13 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
构建高效课堂实施方案
2014/03/13 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
初中生活随笔
2015/08/15 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
MySQL添加索引特点及优化问题
2022/07/23 MySQL