Jquery在使用dataset過程中的緩存問題

jQuery確實相比於js而言，確實精煉了許多，操作元素更加方便，在一定程度上提高了頁面的運行效率，但是效率的提高，必然會牽扯出一些問題，今天就用頁面元素中的dataset來舉例：

比如現在頁面中有一個元素：<button id='mybutton' dataset-name='add' dataset-displayname='添加'>添加元素</button>

現在我們通過jquery爲當前元素綁定點擊事件：

//綁定事件
$("#mybutton").click(function(){

ModifyDisplayName();

//輸出當前元素的緩存值：displayname
console.log($(this).data('displayname'));//結果：添加

}) 

//修改元素緩存值displayname
function ModifyDisplayName(){
document.getElementById("mybutton").dataset.displayname='添加111';
}

//此時我們點擊button按鈕，通過查看輸出，可以看到輸出內容仍爲：添加
//.............
//。。。。。。懷疑電腦，懷疑編譯器中...........
//我們還是用js來獲取當前元素的緩存值：displayname吧

//重寫綁定事件，注意 function裏面多個一個參數e哦
$("#mybutton").click(function(e){

ModifyDisplayName();

//輸出當前元素的緩存值：displayname
console.log(e.target.dataset.displayname);//結果：添加111

}) 

//What F?用了js就可以：e.target方法是js的方法
//解釋原因：jquery使用dataset時，會將第一次的值緩存起來，以後每次都從緩存中取值，js則每次重新取值，問題找到了，記住這個坑

 jquery縱然有很多優勢，但是緩存問題沒有很好的解決，其實這是一個雙刃劍，提高效率的同時，失去了數據的及時性。

本文爲作者隨心記錄，如果不能爲您解決問題，請另尋貴資！