JQueryData方法的一个小特技

通常我们在用 JavaScript 操作 DOM 元素的时候会往 DOM 上临时添加一些参数，用来记住一些状态，或者从后端取参数值等。

创新互联公司从2013年开始，先为汶上等服务建站，汶上等地企业，进行企业商务咨询服务。为汶上企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一般通过在 HTML 标签上添加自定义属性来实现，但是这样会不可避免的访问 DOM，性能上并不好。如果你使用 jQuery 的话建议使用 $el.data() 方法来取元素上 data-* 的值，比如：
 
  •  

    • 这两个方法的区别在于 attr 每次都会直接访问 DOM 元素，而 data 方法会缓存***次的查找，后续调用不需要访问 DOM。

    很明显建议使用后者，但是在 低版本的 jQuery 中默认会对 data 方法取到的值进行粗暴的强制数据类型转换「parseFloat」。看下面代码：

     
 
 
      
  
  
  
    1. 字符串
     
  • 数字
    •  
  • 科学计数法 
  • 八进制数字 
  •  
  •  

    • 后面两种显然出错了，就是因为 jQuery 对属性值进行了强制 parseFloat 操作。这种转换是方便了使用者，如果是数字的话我们取到这个值进行计算什么的就不用再转数据类型了，但是一不小心就会出 bug

    发现这个 bug 的时候***感觉是 jQuery 不应该没考虑到这一点呀。后来果断去查了下***版的 jQuery 源代码，发现已经修复了。核心代码在 data.js 35 行，如下

     
 
 
      
  
  
  
    1. function getData( data ) { 
      2.   
  
  
    2.     if ( data === "true" ) { 
      3.   
  
  
    3.         return true; 
      4.   
  
  
    4.     } 
      5.   
  
  
    5.  
      6.   
  
  
    6.     if ( data === "false" ) { 
      7.   
  
  
    7.         return false; 
      8.   
  
  
    8.     } 
      9.   
  
  
    9.  
      10.   
  
  
    10.     if ( data === "null" ) { 
      11.   
  
  
    11.         return null; 
      12.   
  
  
    12.     } 
      13.   
  
  
    13.  
      14.   
  
  
    14.     // Only convert to a number if it doesn't change the string 
      15.   
  
  
    15.     // 重点就在这里 →_→ 
      16.   
  
  
    16.     if ( data === +data + "" ) { 
      17.   
  
  
    17.         return +data; 
      18.   
  
  
    18.     } 
      19.   
  
  
    19.  
      20.   
  
  
    20.     if ( rbrace.test( data ) ) { 
      21.   
  
  
    21.         return JSON.parse( data ); 
      22.   
  
  
    22.     } 
      23.   
  
  
    23.  
      24.   
  
  
    24.     return data; 
      25.   
  
  
    25. } 
      26.

    getData 方法就返回了节点属性的值，只不过加了一些特殊处理使得我们取到了没有 bug 的值，关键地方就在这里： data === +data + "" 。这行代码做了些什么神奇的事情

    将节点的属性值强制转换成数字「+data」后再转成字符串「+ ““」，如果转换后的值与原来相等就取转换后的值

    可以简单的这么理解：jQuery 会尝试转换数据类型，如果转换后和转换前的 长得一样 那么 jQuery 就认为它是需要被转换成数字的。这样就可以***规避上面例子中的两种问题，我们来测试一下：

     
 
 
      
  
  
  
    1. var data = 'abc' 
      2.   
  
  
    2. console.log(data === +data + "")        // false 不转换，直接返回字符串原值 
      3.   
  
  
    3.  
      4.   
  
  
    4. var data = '123' 
      5.   
  
  
    5. console.log(data === +data + "")        // true 转换，使用转换后的数字类型值 
      6.   
  
  
    6.  
      7.   
  
  
    7. var data = '123e456' 
      8.   
  
  
    8. console.log(data === +data + "")        // false 不转换，直接返回字符串原值 
      9.   
  
  
    9.  
      10.   
  
  
    10. var data = '0000123' 
      11.   
  
  
    11. console.log(data === +data + "")        // false 不转换，直接返回字符串原值 
      12.

    【本文是专栏作者周琪力的原创稿件，转载请注明出处】

    当前题目：JQueryData方法的一个小特技
    文章路径：http://www.shufengxianlan.com/qtweb/news34/241834.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    App设计知识

    分类信息网站

    成都商城app开发　　 　乐至网站建设　　 　成都响应式网站建设公司　　 　网络推广外包　　 　成都SEO优化　　 　成都网页设计　　 　app开发公司　　 　微信小程序开发　　 　成都微信公众号开发　　 　云主机　　 　企业画册设计制作　　 　手机网站建设　　 　成都手机网站开发　　 　联通服务器托管　　 　成都纯水机　　 　成都网站推广　　 　微官网开发　　 　成都小程序开发公司　　 　UI设计　　 　ssl证书申请