当自定义数据属性为 json 格式字符串时 jQuery 的 data api 问题
jQuery 的 data API 实现方式 有缓存数据的效果
当 自定义数据属性是一个 json 格式字符串时，缓存的数据如果被修改， 则修改后的数据继续存在于缓存系统中， 如果不留意，这可能导致一些BUG,因为你可能没有注意到，这个数据被修改过了。
也就是， jquery 的 data 接口 不支持 js 数据对象 与 DOM 对象间的双向绑定。
jQuery data 实现的源码可阅读此文【jQuery1.8.2源码解析之jQuery.data】：
http://www.cnblogs.com/lovesueee/archive/2012/10/24/2737839.html
<!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}
