有声,国际完美世界下载,盗墓笔记

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

JQueryData方法的一個小特技

通常我們在用 JavaScript 操作 DOM 元素的時候會往 DOM 上臨時添加一些參數(shù)，用來記住一些狀態(tài)，或者從后端取參數(shù)值等。

創(chuàng)新互聯(lián)公司從2013年開始，先為汶上等服務(wù)建站，汶上等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為汶上企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

一般通過在 HTML 標簽上添加自定義屬性來實現(xiàn)，但是這樣會不可避免的訪問 DOM，性能上并不好。如果你使用 jQuery 的話建議使用 $el.data() 方法來取元素上 data-* 的值，比如：

這兩個方法的區(qū)別在于 attr 每次都會直接訪問 DOM 元素，而 data 方法會緩存***次的查找，后續(xù)調(diào)用不需要訪問 DOM。

很明顯建議使用后者，但是在低版本的 jQuery 中默認會對 data 方法取到的值進行粗暴的強制數(shù)據(jù)類型轉(zhuǎn)換「parseFloat」?？聪旅娲a：

數(shù)字

科學計數(shù)法

八進制數(shù)字

后面兩種顯然出錯了，就是因為 jQuery 對屬性值進行了強制 parseFloat 操作。這種轉(zhuǎn)換是方便了使用者，如果是數(shù)字的話我們?nèi)〉竭@個值進行計算什么的就不用再轉(zhuǎn)數(shù)據(jù)類型了，但是一不小心就會出 bug

發(fā)現(xiàn)這個 bug 的時候***感覺是 jQuery 不應(yīng)該沒考慮到這一點呀。后來果斷去查了下***版的 jQuery 源代碼，發(fā)現(xiàn)已經(jīng)修復了。核心代碼在 data.js 35 行，如下

 
 
 
  
  
  function getData( data ) {   
  
      if ( data === "true" ) {   
  
          return true;   
  
      }   
  
     
  
      if ( data === "false" ) {   
  
          return false;   
  
      }   
  
     
  
      if ( data === "null" ) {   
  
          return null;   
  
      }   
  
     
  
      // Only convert to a number if it doesn't change the string   
  
      // 重點就在這里 →_→   
  
      if ( data === +data + "" ) {   
  
          return +data;   
  
      }   
  
     
  
      if ( rbrace.test( data ) ) {   
  
          return JSON.parse( data );   
  
      }   
  
     
  
      return data;   
  
  }

getData 方法就返回了節(jié)點屬性的值，只不過加了一些特殊處理使得我們?nèi)〉搅藳]有 bug 的值，關(guān)鍵地方就在這里： data === +data + "" 。這行代碼做了些什么神奇的事情

將節(jié)點的屬性值強制轉(zhuǎn)換成數(shù)字「+data」后再轉(zhuǎn)成字符串「+ ““」，如果轉(zhuǎn)換后的值與原來相等就取轉(zhuǎn)換后的值

可以簡單的這么理解：jQuery 會嘗試轉(zhuǎn)換數(shù)據(jù)類型，如果轉(zhuǎn)換后和轉(zhuǎn)換前的長得一樣那么 jQuery 就認為它是需要被轉(zhuǎn)換成數(shù)字的。這樣就可以***規(guī)避上面例子中的兩種問題，我們來測試一下：

 
 
 
  
  
  var data = 'abc'   
  
  console.log(data === +data + "")        // false 不轉(zhuǎn)換，直接返回字符串原值   
  
     
  
  var data = '123'   
  
  console.log(data === +data + "")        // true 轉(zhuǎn)換，使用轉(zhuǎn)換后的數(shù)字類型值   
  
     
  
  var data = '123e456'   
  
  console.log(data === +data + "")        // false 不轉(zhuǎn)換，直接返回字符串原值   
  
     
  
  var data = '0000123'   
  
  console.log(data === +data + "")        // false 不轉(zhuǎn)換，直接返回字符串原值

【本文是專欄作者周琪力的原創(chuàng)稿件，轉(zhuǎn)載請注明出處】

本文名稱：JQueryData方法的一個小特技
網(wǎng)址分享：http://fisionsoft.com.cn/article/dppcjos.html

新聞中心

其他資訊