一、html5 自定義屬性介紹

我之前翻譯的“你必須知道的28個HTML5特徵、竅門和技術”一文中對於HTML5中自定義合法屬性data-已經做過些介紹，就是在HTML5中我們可以使用data-字首設定我們需要的自定義屬性，來進行一些資料的存放，例如我們要在一個文字按鈕上存放相對應的id：

<a href="javascript:" data-id="2312">測試</a>

這裡的data-字首就被稱為data屬性，其可以通過指令碼進行定義，也可以應用CSS屬性選擇器進行樣式設定。數量不受限制，在控制和渲染資料的時候提供了非常強大的控制。

二、Dataset基礎

下面是元素應用data屬性的一個例子：

<div id="day2-meal-expense" 
  data-drink="coffee" 
  data-food="sushi" 
  data-meal="lunch">¥20.12</div>

要想獲取某個屬性的值，可以像下面這樣使用dataset物件：

var expenseday2 = document.getElementById('day2-meal-expense');  
var typeOfDrink = expenseday2.dataset.drink;

關於這個基本使用，我做了個demo，您可以狠狠地點選這裡：

點選demo頁面的按鈕做測試，如果瀏覽器不支援dataset，例如FireFox 4，則彈出的結果就會類似下面：

如果支援，例如Chrome 11瀏覽器，則彈出的結果就是：

需要注意的是帶連字元連線的名稱在使用的時候需要命名駝峰化，即大小寫組合書寫，這與應用元素的style物件類似，dom.style.borderColor。例如，假設上面的例子中現在有如下data屬性，data-meal-time，則我們要獲取相應的值可以使用：

expenseday2.dataset.mealTime

data屬性基本上所有的瀏覽器都是支援的，但是dataset

三、我們為何需要dataset

如果使用傳統的方法獲取屬性值應該會類似下面：

var typeOfDrink = document.getElementById('day2-meal-expense').getAttribute('data-drink');

現在，假設我們要獲得多個自定義的屬性值，得，折騰的事情就來了，我們可能要採用類似下面的N行程式碼實現了：

var attrs = expenseday2.attributes,
expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

而使用dataset屬性，我們根本不需要任何迴圈去獲取你想要的那個值，直接秒殺：

expense = document.getElementById('day2-meal-expense').dataset;

dataset並不是典型意義上的JavaScript物件，而是個，DOMStringMap是HTML5一種新的含有多個名-值對的互動變數。

四、dataset的操作

您可以像下面這樣操作名-值對：

chartInput = [];
for (var item in expense) {
  chartInput.push(expense[item]);
}

上面這幾行程式碼作用是讓所有的自定義的屬性值塞到一個數組中。

如果你想刪掉一個data屬性，可以這麼做：

delete expenseday2.dataset.meal;

如果你想給元素新增一個屬性，可以這麼做：

expenseday2.dataset.dessert = 'icecream';

五、跟getAttribute相比的速度

使用dataset操作data 要比使用getAttribute稍微慢些，這裡有個頁面專門對這兩個方法速度做了測試，dataset vs attributes loop，請使用Chrome瀏覽器以及Opera 11.1+的瀏覽器，點選"run test"按鈕後，會得到一些資料，如下截圖：

但是，如果我們只是處理少量的data資料，這種速度上差異造成的影響是基本上沒有的。反而，我們應該看到，使用dataset操作自適應屬性要比其他類似getAttribute的形式要少很多讓人頭疼的麻煩，並且更具有可讀性。因此，權衡來看，操作自定義屬性，dataset操作是上選。

六、什麼地方使用dataset

每次你使用自定義data屬性的時候，使用dataset去獲取名-值對就是個不錯的選擇。考慮到現在很多瀏覽器還是把dataset當作不認識的外星生物看待，所以，在實際使用的時候，有必要進行下特徵檢測，看看是否支援dataset，類似下面的使用：

if(expenseday2.dataset) {
  expenseday2.dataset.dessert = 'icecream';
} else {
  expenseday2.setAttribute('data-dessert', 'icecream');
}

注意：如果你的應用程式會頻繁更新data屬性值的話，建議使用JavaScript物件進行資料管理，而不是每次都經由data屬性進行更新。

七、CSS中的data屬性

我們可以基於data屬性值對相應的元素設定CSS樣式，例如下面這個例子：

HTML程式碼如下：

<div class="mm" data-name="張含韻"></div>
<div class="mm" data-name="undefined"></div>

CSS程式碼如下：

.mm{width:256px; height:200px;}
.mm[data-name='張含韻']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;}
.mm[data-name='undefined']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg) no-repeat;}

結果就會出現一個小美女和一個大美女的圖片，例如下面在IE7文件模式下的截圖：

八、簡單的綜合例項

為了展示dataset的應用，這裡提供一個demo頁面，如果利用dataset製作資料圖效果，您可以狠狠地點選這裡：HTML5 dataset下的資料圖demo

滑動HTML5 range控制元件，可以看到下面的資料以及圖形大小跟著改變了，如下截圖（截自Opera 11.1）：

九、結語

使用dataset獲取元素的自定義屬性是個很不錯的方法，隨著以後越來越多的瀏覽器支援，例如FireFox瀏覽器，這個物件屬性在實際專案中正式使用是很有可能的。雖然說使用dataset不能提高程式碼的效能，但是對於簡潔程式碼，提高程式碼的可讀性和可維護性是很有幫助的。