jQuery $.data()方法使用注意細節

前段時間同事在群裡對jQuery裡的.data()方法大發牢騷：
XXX(NNNNNNN) 15:11:34
<a id="a" data-xxx="00123" />
alert($('#a').data('xxx'));//123
data方法不靠譜
XXX(NNNNNNN) 15:13:17
老老實實用attr('data-xxx')吧細研究了下jQuery文檔對.data()方法的描述：
複製代碼 代碼如下:
As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.
The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5
specification.

針對如下示便：
複製代碼 代碼如下:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

即當使用.data()擷取值時，jQuery會首先嘗試將擷取的字串值轉化成JS類型，包括布爾值，null，數字，對象，數組：
若值是”true|false”，則返回相應的布爾值；
若值是”null”，則返回null；
若值是純數字構成的字串（+data + ”” === data），則返回相應的數字（+data）；
若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$，比如”{key:value}“或[1,2,3]，則嘗試使用jQuery.parseJSON解析之；
否則返回字串值
當然文檔裡也特意說明了——如果就是想擷取字串值而不想獲得自動轉換的值，可以使用.attr(“data-”+key)來擷取相應的值：
複製代碼 代碼如下:
To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

如下為jQuery源碼
複製代碼 代碼如下:
function dataAttr( elem, key, data ) {
// If nothing was found internally, try to fetch any
// data from the HTML5 data-* attribute
if ( data === undefined && elem.nodeType === 1 ) {
// rmultiDash = /([A-Z])/g
var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
data = elem.getAttribute( name );
if ( typeof data === "string" ) {
try {
/*.data(key)方法嘗試將擷取的值轉化成JS類型，包括布爾值，null，數字，對象，數組*/
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
// Only convert to a number if it doesn't change the string
+data + "" === data ? +data :
/*rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,*/
rbrace.test( data ) ? jQuery.parseJSON( data ) :
data;
} catch( e ) {}
// Make sure we set the data so it isn't changed later
jQuery.data( elem, key, data );
} else {
data = undefined;
}
}
return data;
}