當(dāng)自定義數(shù)據(jù)屬性為json格式字符串時jQuery的data api問題探討
更新時間：2013年02月18日 09:22:04 作者：
當(dāng)自定義數(shù)據(jù)屬性是一個 json 格式字符串時，緩存的數(shù)據(jù)如果被修改， 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中， 如果不留意，這可能導(dǎo)致一些BUG，接下來將對此問題詳細概述下
jQuery 的 data API 實現(xiàn)方式有緩存數(shù)據(jù)的效果
使用 IE 7 （IE8+ 在控制臺切換至IE7 模式），當(dāng)DOM 節(jié)點有自定義數(shù)據(jù)屬性時，檢查 DOM 節(jié)點即可看到 形如 jQuery18305664906559272507 的屬性，這便是 用于從數(shù)據(jù)存儲對象中獲取自定義數(shù)據(jù)的建。
當(dāng)自定義數(shù)據(jù)屬性是一個 json 格式字符串時，緩存的數(shù)據(jù)如果被修改， 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中， 如果不留意，這可能導(dǎo)致一些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>
運行結(jié)果
{"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}
使用 IE 7 （IE8+ 在控制臺切換至IE7 模式），當(dāng)DOM 節(jié)點有自定義數(shù)據(jù)屬性時，檢查 DOM 節(jié)點即可看到 形如 jQuery18305664906559272507 的屬性，這便是 用于從數(shù)據(jù)存儲對象中獲取自定義數(shù)據(jù)的建。
當(dāng)自定義數(shù)據(jù)屬性是一個 json 格式字符串時，緩存的數(shù)據(jù)如果被修改， 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中， 如果不留意，這可能導(dǎo)致一些BUG
復(fù)制代碼 代碼如下:
<!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>
運行結(jié)果
復(fù)制代碼 代碼如下:
{"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}
您可能感興趣的文章:
- Spring Data Jpa+SpringMVC+Jquery.pagination.js實現(xiàn)分頁示例
- jQuery.datatables.js插件用法及api實例詳解
- jQuery購物車插件jsorder用法(支持后臺處理程序直接轉(zhuǎn)換成DataTable處理)
- jQuery ajax dataType值為text json探索分享
- Python requests.post方法中data與json參數(shù)區(qū)別詳解
- JS中FormData類實現(xiàn)文件上傳
- thinkphp5 + ajax 使用formdata提交數(shù)據(jù)（包括文件上傳） 后臺返回json完整實例
- JS JQuery獲取data-*屬性值方法解析
相關(guān)文章
這篇文章主要介紹了微信小程序引入Vant組件庫過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
下面小編就為大家?guī)硪黄贘S對象創(chuàng)建常用方式及原理分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
在文本框中輸入完內(nèi)容后,經(jīng)常需要按回車,焦點跳到下個文本框,或者觸發(fā)按鈕事件2010-06-06
這篇文章主要為大家介紹了ajax請求前端跨域問題原因及解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-10-10
window.event兼容腳本 1.2.屏蔽Form提交事件 3.獲取事件源 4.添加事件兼容寫法 5.Firefox注冊innerText寫法 6.長度 7.父控件下的子控件 8.XmlHttp2008-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊文本框顯示日期選擇器特效，提高了工作效率，推薦給大家，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
JS+HTML實現(xiàn)的圓形可點擊區(qū)域示例【3種方法】
這篇文章主要介紹了JS+HTML實現(xiàn)的圓形可點擊區(qū)域,結(jié)合實例形式分析了javascript結(jié)合HTML元素屬性實現(xiàn)一個圓形的可點擊區(qū)域相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)團購或秒殺批量倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
下面小編就為大家?guī)硪黄獪\談js常用內(nèi)置方法和對象。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
檢查輸入的是否是數(shù)字使用keyCode配合onkeypress事件
檢查輸入的是否是數(shù)字在本文使用keyCode配合onkeypress事件來實現(xiàn)，具體示例如下2014-01-01