当自定义数据属性为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里访问SharePoint列表数据的实现方法
May 22 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
Javascript节点关系实例分析
May 15 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vue自定义filters过滤器
Apr 26 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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 新手入门教程
2009/08/03 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php获取系统变量方法小结
2015/05/29 PHP
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
计划生育证明格式范本
2014/09/12 职场文书
万能检讨书2000字
2014/10/17 职场文书
员工离职证明范本
2015/06/12 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Python经常使用的一些内置函数
2022/04/11 Python