摘要：刪除這個(gè)簡單的使用場(chǎng)景就描述了如何工作。如果你將一個(gè)對(duì)象直接存儲(chǔ)在其中是不行的，但對(duì)對(duì)象進(jìn)行序列化處理后，還是可以的。

寫過HTML5頁面，或者做過H5開發(fā)的同學(xué)或多或少都接觸過data-*這個(gè)自定義Attribute（對(duì)Attribute和property還分不太清的同學(xué)，可以看一看傻傻的分也分不清楚的property和attribute）這篇文章。

在做微信公眾號(hào)開發(fā)的時(shí)候你一定看到過下圖的情況：

我之前做過一個(gè)微信圖文編輯器，用到過不少這樣的情況。

在一些電商網(wǎng)站的源碼中也看到過如下圖的情況：

在移動(dòng)端的開發(fā)中，我們經(jīng)常會(huì)使用這種情況，如媒體資源（圖片，視頻）的優(yōu)化處理上

還有就是我們前端開發(fā)都接觸過的bootstrap框架，在插件的引用上就是使用的 data-*，那么它的魅力何在呢？

在HTML5出現(xiàn)之前我們處理一些被引入的數(shù)據(jù)是通過用的 class Attribute 或者元素自帶的 attribute，或者開發(fā)人員自定義一些數(shù)據(jù)屬性。

這樣操作數(shù)據(jù)很不方便，如何在頁面內(nèi)處理數(shù)據(jù)更方便，成了開發(fā)人員苦惱的問題，在HTML5出現(xiàn)后你就不用在擔(dān)心了。

w3c data-attribute 規(guī)范

我們可以在一個(gè)列表項(xiàng)中存儲(chǔ)一個(gè)用戶的信息，如下：

lvzhenbang

這些數(shù)據(jù)對(duì)于頁面的訪問者來說用處不大，因?yàn)橛脩艨床坏?，但是它?duì)于web應(yīng)用的開發(fā)者很有用。這時(shí)你可以想象一下增加一個(gè)刪除按鈕，這個(gè)按鈕可以刪除列表中的某個(gè)用戶，通過用戶的數(shù)據(jù)信息 data-id ，你不需要其他的相關(guān)東西或者屬性，就可以直接向后端發(fā)送請(qǐng)求刪除該用戶。

刪除

這個(gè)簡單的使用場(chǎng)景就描述了 data-* 如何工作。

data-* 雖然是個(gè)好東西，但它不是萬能的，它本身還是 [Attribute](https://github.com/lvzhenbang/article/blob/master/js/porp-attr.md) ，而 Attribute 就是只能存儲(chǔ)字符串類型數(shù)據(jù)。如果你將一個(gè)對(duì)象直接存儲(chǔ)在其中是不行的，但對(duì)對(duì)象進(jìn)行序列化處理后，還是可以的。

// 用戶信息的操作按鈕
var oBtn = document.getElementById("opt-btn");
// 刪除按鈕
var delBtn = document.getElementById("delte-btn");
// 獲得信息
var id = oBtn.getAttribute("data-id");
// 改變數(shù)據(jù)信息
delBtn.setAttribute("data-id", id);

是不是很簡單，然后你就可以通過AJAX向后端請(qǐng)求，做你想要做的事情了。

在jQuery中有一個(gè) .attr() 方法就可以解決讀寫data數(shù)據(jù)的功能了。

// 獲得用戶信息的操作按鈕
var oBtn = $("#opt-btn");
// 獲得刪除按鈕
var delBtn = $("#delte-btn");
// 獲得操作的信息
var id = oBtn.attr("data-id");
// 改變刪除按鈕的數(shù)據(jù)信息
delBtn.attr("data-id", id);

熟悉jQuery的你可能會(huì)想到不是還有一個(gè) .data() 方法嗎? 雖然 .attr() 和 .data() 在操作 data-* 上有一些重疊，但他們完全是兩回事。沒有深入理解的同學(xué)，只需要知道 .attr() 就好了。

HTML5 就是開發(fā)就是這樣方便，但它存在一些兼容性問題，IE系列的瀏覽器不支持。但是時(shí)代在進(jìn)步，這些奇葩的瀏覽器最終會(huì)成為歷史，所以還是有必要說兩句。

// 獲得用戶信息的操作按鈕
var oBtn = document.getElementById("opt-btn");
// 獲得刪除按鈕
var delBtn = document.getElementById("delte-btn");
// 獲得操作的信息
var id = oBtn.dataset.id;
// 改變刪除按鈕的數(shù)據(jù)信息
delBtn.setAttribute.id = id;

值得注意的是這里沒有數(shù)據(jù)前綴和 -，類似于我們?cè)贘avaScript中操作css屬性的方式，我們?cè)谑褂胐ataset API時(shí)，你在HTML中用 data-some-attribute-name，但在JavaScript中你需要用 dataset.someAttributeName 這樣的駝峰形式。

這里有幾個(gè)簡單的例子，僅供參考學(xué)習(xí)。

這其實(shí)是一個(gè)簡化版的模糊查詢，我曾經(jīng)再一次面使用遇到過這樣的問題，就是讓回答如何做一個(gè)簡單的模糊查詢。

假如你有一個(gè)如下面所示的demo，你想要通過濾每個(gè)用戶的關(guān)鍵字來篩選用戶。只要你將它們的關(guān)鍵字放入 data attribute 中，然后編寫一個(gè)簡短的腳本循環(huán)并顯示/隱藏它們即可。

html

    
王明
    
張華
    
王麗
    
王大牛
    
王小二
    
張麗

js

$("#filter").on("keyup", function() {
    var keyword = $(this).val().toLowerCase();
    $(".person > li").each( function() {
        $(this).toggle( keyword.length < 1 || $(this).attr("data-models").indexOf(keyword) > -1 );
    });
});

demo演示

毫無疑問你可以使用 class 來定義樣式，但是你也可以用 data-* 來應(yīng)用樣式（不用管data數(shù)據(jù)的值）：

HTML

CSS

[data-warning] {
    background: red;
}

但是如果你想依據(jù)數(shù)據(jù)屬性的值呢？你可以這樣使用：

[data-warning*=error] {
    color: red;
}

[data-warning*=update] {
    color: green;
}

[data-warning*=modify] {
    color: blue;
}

上面的使用是不是很熟悉，相信研究過bootstrap的同學(xué)對(duì)此應(yīng)該不會(huì)陌生。

可參考bootstrap中將link轉(zhuǎn)化為按鈕

demo演示

在做響應(yīng)式開發(fā)的過程中我們不僅可以使用媒體查詢，我們還可以用 data-*

// html

    移動(dòng)端內(nèi)容

// css
div[data-role="mobile"] {  
  display:block;  
}

BootStrap用自定義數(shù)據(jù)屬性作為可選擇的配置項(xiàng)來配置插件。一個(gè) popover 例子如下:

點(diǎn)我彈出/隱藏彈出框

// html
數(shù)據(jù)屬性

// css
.tooltip {
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  color: white;
  background-color: green;
  border-radius: 2px;
  cursor: pointer;
}

.tooltip::after {
  position: absolute;
  top: 110%;
  left: 0;
  content: attr(data-tooltip);
  display: none;
  width: 200%;
  padding: 6px 12px;
  color: white;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 6px;
}

.tooltip:hover::after {
  display: inline-block;
}

demo演示:

1.js動(dòng)畫計(jì)算中可能需要的元素初始寬高，透明度等樣式

2.Flash加載Flash電影的的存儲(chǔ)參數(shù)，也包括(img/video/audio)

3.在游戲開發(fā)中存儲(chǔ)一些人物屬性的數(shù)據(jù)

4.web統(tǒng)計(jì)標(biāo)簽數(shù)據(jù)的證明(也就是我們常用的給元素取一個(gè)為一名字，方便統(tǒng)計(jì))

1.不要用它來替換一個(gè)現(xiàn)有的屬性或元素。如下：

8pm

我們應(yīng)該像下面這樣定義：

8pm

2.數(shù)據(jù)屬性不應(yīng)該用作meta data 和 micro format的替代品。

micro format 被設(shè)計(jì)給人類用的，是被引入給我們的標(biāo)記上下文的。例如：如果你有一張Vcard用來記錄個(gè)人或組織的聯(lián)系信息，那么你將會(huì)給這張Vcard一個(gè)類，讓機(jī)器理解這是一個(gè)聯(lián)系信息。代碼如下：

     Aaron Lumsden

而不是像下面的代碼：

     Aaron Lumsden

想要了解更多的micro format您可以訪問 microformats.org

3.他僅限于網(wǎng)站或app的內(nèi)部使用，而不能用在外部，外部的用一個(gè)XML/RSS

data-*在web上已經(jīng)被廣泛的應(yīng)用。令人興奮的是，他們?cè)谂f瀏覽器上依然運(yùn)行良好，并遵循web的標(biāo)準(zhǔn)，這意味著你不用擔(dān)心兼容性的問題。但是如果你試圖用 data-* 以便于樣式獲取data-*的值話，那么只有支持css3選擇器的瀏覽器支持這一功能。

想要了解更多你可以看看這些文章

Working with HTML5 data attributes

All You Need to Know About the HTML5 Data Attribute

HTML5 Custom Data Attributes data-*