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