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

[[190918]]

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

<div id="demo" data-key="value"></div> 
<script> 
    $('#demo').attr('data-key') 
    $('#demo').data('key')  // ***次訪問 DOM，以后從緩存取 
</script> 

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

很明顯建議使用后者，但是在 低版本的 jQuery 中默認會對 data 方法取到的值進行粗暴的強制數據類型轉換「parseFloat」。看下面代碼：

<div id="demo0" data-key="abc">字符串</div> 
<div id="demo1" data-key="123">數字</div> 
<div id="demo2" data-key="123e456">科學計數法</div> 
<div id="demo3" data-key="0000123">八進制數字</div> 
<script src="jquery-1.6.4"></script> 
<script> 
    $('#demo0').data('key')  // "abc" 
    $('#demo1').data('key')  // 123 
    $('#demo2').data('key')  // Infinity 
    $('#demo3').data('key')  // 83 
</script> 

后面兩種顯然出錯了，就是因為 jQuery 對屬性值進行了強制 parseFloat 操作。這種轉換是方便了使用者，如果是數字的話我們取到這個值進行計算什么的就不用再轉數據類型了，但是一不小心就會出 bug

發現這個 bug 的時候***感覺是 jQuery 不應該沒考慮到這一點呀。后來果斷去查了下***版的 jQuery 源代碼，發現已經修復了。核心代碼在 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 方法就返回了節點屬性的值，只不過加了一些特殊處理使得我們取到了沒有 bug 的值，關鍵地方就在這里： data === +data + "" 。這行代碼做了些什么神奇的事情

將節點的屬性值強制轉換成數字「+data」后再轉成字符串「+ ““」，如果轉換后的值與原來相等就取轉換后的值

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

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

【本文是51CTO專欄作者周琪力的原創稿件，轉載請注明出處】

戳這里，看該作者更多好文