HTML5自訂屬性對象Dataset簡介

標籤：des   style   blog   http   color   java   使用   os   

一、html5 自訂屬性介紹

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

測試

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

二、Dataset基礎

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

¥20.12

要想擷取某個屬性的值，可以像下面這樣使用dataset對象：

var expenseday2 = document.getElementById_x(‘day2-meal-expense‘);var typeOfDrink = expenseday2.dataset.drink;

關於這個基本使用，我做了個demo，您可以狠狠地點擊這裡：dataset基本使用執行個體demo

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

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

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

expenseday2.dataset.mealTime

data屬性基本上所有的瀏覽器都是支援的，但是dataset對象就屬於新貴，目前僅在Opera 11.1+， Chrome 9+下可以通過JavaScript，使用dataset訪問你自訂的data屬性。至於其他瀏覽器，FireFox 6+（未出）以及Safari 6+（未出）會支援dataset對象，至於IE瀏覽器，目前看來還是遙遙無期的趨勢。具體的些相容性資料，您可以點擊這裡訪問。

 三、我們為何需要dataset

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

var typeOfDrink = document.getElementById_x(‘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_x(‘day2-meal-expense‘).dataset;

dataset並不是典型意義上的JavaScript對象，而是個DOMStringMap對象，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代碼如下：

 

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文檔模式下的：

您可以狠狠地點擊這裡：HTML5自訂屬性與CSS3樣式demo

八、簡單的綜合執行個體

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

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

九、結語

使用dataset擷取元素的自訂屬性是個很不錯的方法，隨著以後越來越多的瀏覽器支援，例如FireFox瀏覽器，這個對象屬性在實際項目中正式使用是很有可能的。雖然說使用dataset不能提高代碼的效能，但是對於簡潔代碼，提高代碼的可讀性和可維護性是很有協助的。

如果您對dataset有興趣，做了些demo什麼的，可以去這裡Opera Github repository玩轉你的些小成果。

參考文章：An Introduction to Datasets
demo支援：Cost of Electricity €/kWh over the decade

轉自：http://www.zhangxinxu.com/wordpress/?p=1693