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縱然有很多優勢，但是緩存問題沒有很好的解決，其實這是一個雙刃劍，提高效率的同時，失去了資料的及時性。

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