HTML5中的 `data-*` 如何處理數據詳解

寫過HTML5頁面，或者作過H5開發的同窗或多或少都接觸過data-*這個自定義Attribute（對Attribute和property還分不太清的同窗，能夠看一看傻傻的分也分不清楚的property和attribute）這篇文章。

在作微信公衆號開發的時候你必定看到過下圖的狀況：

我以前作過一個微信圖文編輯器，用到過很多這樣的狀況。

在一些電商網站的源碼中也看到過以下圖的狀況：

在移動端的開發中，咱們常常會使用這種狀況，如媒體資源（圖片，視頻）的優化處理上

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

HTML5 data-* 由來

在HTML5出現以前咱們處理一些被引入的數據是經過用的 class Attribute 或者元素自帶的 attribute，或者開發人員自定義一些數據屬性。

這樣操做數據很不方便，如何在頁面內處理數據更方便，成了開發人員苦惱的問題，在HTML5出現後你就不用在擔憂了。

w3c data-attribute 規範

HTML5 data-* 如何工做

咱們能夠在一個列表項中存儲一個用戶的信息，以下：

<li data-id="111111" data-name="lvzhenbang" data-email="lvzhenbang@outlook.com" data-github="https://github.com/lvzhenbang">lvzhenbang</li>

這些數據對於頁面的訪問者來講用處不大，由於用戶看不到，可是它對於web應用的開發者頗有用。這時你能夠想象一下增長一個刪除按鈕，這個按鈕能夠刪除列表中的某個用戶，經過用戶的數據信息 data-id ，你不須要其餘的相關東西或者屬性，就能夠直接向後端發送請求刪除該用戶。

<button id="delete-btn" type="button" data-cmd="delete" data-id="111111">刪除</button>

這個簡單的使用場景就描述了 data-* 如何工做。

用 HTML5 data-* 能存儲些什麼

data-* 雖然是個好東西，但它不是萬能的，它自己仍是 [Attribute](https://github.com/lvzhenbang/article/blob/master/js/porp-attr.md) ，而 Attribute 就是隻能存儲字符串類型數據。若是你將一個對象直接存儲在其中是不行的，但對對象進行序列化處理後，仍是能夠的。

用JavaScript來reading/writing data-*

// 用戶信息的操做按鈕
var oBtn = document.getElementById('opt-btn');
// 刪除按鈕
var delBtn = document.getElementById('delte-btn');
// 得到信息
var id = oBtn.getAttribute('data-id');
// 改變數據信息
delBtn.setAttribute('data-id', id);

是否是很簡單，而後你就能夠經過AJAX向後端請求，作你想要作的事情了。

用jQuery來reading/writing data-*

在jQuery中有一個 .attr() 方法就能夠解決讀寫data數據的功能了。

// 得到用戶信息的操做按鈕
var oBtn = $('#opt-btn');
// 得到刪除按鈕
var delBtn = $('#delte-btn');
// 得到操做的信息
var id = oBtn.attr('data-id');
// 改變刪除按鈕的數據信息
delBtn.attr('data-id', id);

熟悉jQuery的你可能會想到不是還有一個 .data() 方法嗎? 雖然 .attr() 和 .data() 在操做 data-* 上有一些重疊，但他們徹底是兩回事。沒有深刻理解的同窗，只須要知道 .attr() 就行了。

HTML5 有原生的API dataset 來reading/writing data-*

HTML5 就是開發就是這樣方便，但它存在一些兼容性問題，IE系列的瀏覽器不支持。可是時代在進步，這些奇葩的瀏覽器最終會成爲歷史，因此仍是有必要說兩句。

// 得到用戶信息的操做按鈕
var oBtn = document.getElementById('opt-btn');
// 得到刪除按鈕
var delBtn = document.getElementById('delte-btn');
// 得到操做的信息
var id = oBtn.dataset.id;
// 改變刪除按鈕的數據信息
delBtn.setAttribute.id = id;

值得注意的是這裏沒有數據前綴和 -，相似於咱們在JavaScript中操做css屬性的方式，咱們在使用dataset API時，你在HTML中用 data-some-attribute-name，但在JavaScript中你須要用 dataset.someAttributeName 這樣的駝峯形式。

用 HTML5 data-* 能作些什麼事情呢

這裏有幾個簡單的例子，僅供參考學習。

過濾

這實際上是一個簡化版的模糊查詢，我曾經再一次面使用遇到過這樣的問題，就是讓回答如何作一個簡單的模糊查詢。

假如你有一個以下面所示的demo，你想要經過濾每一個用戶的關鍵字來篩選用戶。只要你將它們的關鍵字放入 data attribute 中，而後編寫一個簡短的腳本循環並顯示/隱藏它們便可。

html

<input type="text" id="filter">
<ul class="person">
    <li data-models="'王明', 25, '網絡工程', '籃球'">王明</li>
    <li data-models="'張華', 23, '軟件工程', '足球'">張華</li>
    <li data-models="'張華', 24, '計算機科學技術', '籃球'">王麗</li>
    <li data-models="'王大牛', 25, '網絡工程', '籃球'">王大牛</li>
    <li data-models="'王小二', 25, '機電自動化', '籃球'">王小二</li>
    <li data-models="'張麗', 24, '機電自動化', '籃球'">張麗</li>
</ul>

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演示

style 樣式

毫無疑問你可使用 class 來定義樣式，可是你也能夠用 data-* 來應用樣式（不用管data數據的值）：

HTML

<span class="label" data-warning>

CSS

[data-warning] {
    background: red;
}

可是若是你想依據數據屬性的值呢？你能夠這樣使用：

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

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

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

上面的使用是否是很熟悉，相信研究過bootstrap的同窗對此應該不會陌生。

可參考bootstrap中將link轉化爲按鈕

demo演示

響應式開發

在作響應式開發的過程當中咱們不只可使用媒體查詢，咱們還能夠用 data-*

// html
<div data-role="mobile">
    移動端內容
</div>
// css
div[data-role="mobile"] {  
  display:block;  
}

configure js插件的配置項

BootStrap用自定義數據屬性做爲可選擇的配置項來配置插件。一個 popover 例子以下:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">點我彈出/隱藏彈出框</button>

和僞元素的結合實現tool Tip

// html
<span class="tooltip" data-tooltip="我是一個數據屬性值">數據屬性</span>

// 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動畫計算中可能須要的元素初始寬高，透明度等樣式

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

3.在遊戲開發中存儲一些人物屬性的數據

4.web統計標籤數據的證實(也就是咱們經常使用的給元素取一個爲一名字，方便統計)

何時不該該用

1.不要用它來替換一個現有的屬性或元素。以下：

<span data-time="20:00">8pm<span>

咱們應該像下面這樣定義：

<time datetime="20:00">8pm</time>

2.數據屬性不該該用做meta data 和 micro format的替代品。

micro format 被設計給人類用的，是被引入給咱們的標記上下文的。例如：若是你有一張Vcard用來記錄我的或組織的聯繫信息，那麼你將會給這張Vcard一個類，讓機器理解這是一個聯繫信息。代碼以下：

<div class="vcard">
     <span class="fn" >Aaron Lumsden</span>
</div>

而不是像下面的代碼：

<div class="vcard">
     <span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>

想要了解更多的micro format您能夠訪問 microformats.org

3.他僅限於網站或app的內部使用，而不能用在外部，外部的用一個XML/RSS

結束語

data-*在web上已經被普遍的應用。使人興奮的是，他們在舊瀏覽器上依然運行良好，並遵循web的標準，這意味着你不用擔憂兼容性的問題。可是若是你試圖用 data-* 以便於樣式獲取data-*的值話，那麼只有支持css3選擇器的瀏覽器支持這一功能。

想要了解更多你能夠看看這些文章

Working with HTML5 data attributes

All You Need to Know About the HTML5 Data Attribute

HTML5 Custom Data Attributes data-*