当自定义数据属性为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中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
原生JS轮播图插件
Feb 09 Javascript
JS实现简单抖动效果
Jun 01 Javascript
详解Node.js读写中文内容文件操作
Oct 10 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
img的onload的另类用法
2008/01/10 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python中 Lambda表达式全面解析
2016/11/28 Python
python日志记录模块实例及改进
2017/02/12 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
物流创业计划书
2014/02/01 职场文书
银行员工考核评语
2014/12/31 职场文书