JQueryData方法的一个小技巧

时间：2023-03-18 10:02:36 科技观察

通常我们在使用JavaScript操作DOM元素的时候，会临时给DOM添加一些参数来记住一些状态，或者从后端获取参数值等。一般是通过在HTML标签中添加自定义属性来实现，但是这样必然会访问DOM，性能不好。如果使用jQuery，推荐使用$el.data()方法获取元素上data-*的值，例如：

这两个方法的区别在于attr每次都会直接访问DOM元素，而data方法会缓存第一次查找，后续调用不需要访问DOM。显然推荐使用后者，但是在低版本的jQuery中，默认情况下，data方法获取的值会进行一次粗略的强制数据类型转换“parseFloat”。看下面的代码：string

number

科学计数法

八进制数script>$('#demo0').data('key')//"abc"$('#demo1').data('key')//123$('#demo2').data('key')//Infinity$('#demo3').data('key')//83后两者显然是错误的，因为jQuery强制对属性值进行了parseFloat操作。这种转换方便了用户。如果是数字，我们拿到这个值后就不需要再进行数据类型的转换来计算了，但是一不小心就会有bug。当我们发现这个bug的时候，感觉jQuery是不应该考虑这个的。后来果断查了一下最新版jQuery的源码，发现已经修复了。核心代码在data.js的第35行，如下functiongetData(data){if(data==="true"){returntrue;}if(data==="false"){returnfalse;}if(data==="null"){returnnull;}//只转换为数字ifitdoes'tchangethestring//重点在这里→_→if(data===+data+""){return+data;}if(rbrace.test(data)){返回JSON。parse(data);}returndata;}getData方法返回的是节点属性的值，但是添加了一些特殊的处理，让我们可以无bug的获取到该值。关键点在这里：data===+data+""。这行代码做了一件神奇的事情，将节点的属性值转换为数字“+data”，然后再转换为字符串“+””。如果转换后的值等于原值，取转换后的值。简单这样理解：jQuery会尝试转换数据类型，如果转换后看起来和转换前一样，那么jQuery认为需要转换成数字。这样就可以完全避免上面例子中的两个问题。我们来测试一下：vardata='abc'console.log(data===+data+"")//false不转换，直接返回字符串原值vardata='123'console.log(data===+data+"")//true转换，使用转换后的数字类型值vardata='123e456'console.log(data===+data+"")//false不转换，直接返回字符串原值vardata='0000123'console.log(data===+data+"")//false不转换，直接返回字符串原值【本文为专栏作者周启礼原创稿件，转载请注明出处转载时】点此阅读作者更多好文

上一篇：C#在PC端通过蓝牙向手机发送数据，你会吗？

下一篇：Linux内核继续构建WWAN子系统开发通用驱动，增强可扩展性

JQueryData方法的一个小技巧相关文章