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纵然有很多优势,但是缓存问题没有很好的解决,其实这是一个双刃剑,提高效率的同时,失去了数据的及时性。
本文为作者随心记录,如果不能为您解决问题,请另寻贵资!