Article #3: HTML5 Custom Data Attributes (data-*)
*Reason: *首先說(shuō)明一下，自己對(duì)于文章的選取并沒(méi)有按照某些固定的標(biāo)準(zhǔn)順序，而是因?yàn)橹白约鹤?case 時(shí)遇到一些困惑的地方，而某篇文章正好激發(fā)起自己深入了解的興趣，所以才選擇細(xì)讀做筆記。
語(yǔ)法
屬性名稱
屬性名必須以 'data-' 作為前綴，且至少有一個(gè)字母，不可大寫。
屬性值
屬性值可以為任意的字符串。
為什么要用 data-* 屬性 ？
很久很久以前，在需要對(duì)每一個(gè)元素存儲(chǔ)數(shù)據(jù)時(shí)，大家習(xí)慣使用 class 或者 rel 。自然，這么做確實(shí)可以獲得相應(yīng)數(shù)據(jù)，但是這樣造成了語(yǔ)義混亂。于是 data-* 出現(xiàn)了，我們可以用 JavaScript 使用這些數(shù)據(jù)去創(chuàng)造更豐富更吸引人的用戶體驗(yàn)，并且無(wú)需擔(dān)心與服務(wù)器端產(chǎn)生更多的 Ajax 交互。
什么時(shí)候可以用自定義 data 屬性呢？
- 存儲(chǔ)元素的初始高度或者透明度，之后可以被用于計(jì)算 JavaScript 的動(dòng)畫效果。
- 存儲(chǔ)通過(guò) JavaScript 加載的 Flash 視頻參數(shù)。 （不大能理解）
- To store custom web analytics tagging data. （翻譯無(wú)能，灰?；页２荒芾斫猓?/em>
- 存儲(chǔ) JavaScript 游戲中元素需要的生命值呀、剩余彈藥呀什么的。
- 增強(qiáng) JavaScript <video> 子標(biāo)題的可訪問(wèn)性。 （也不大能理解）
用原生 JavaScript 讀取 data-* 屬性
- 可以使用 getAttribute 和 setAttribute 當(dāng)做普通屬性訪問(wèn)，這個(gè)在任何瀏覽器中都能夠使用
- 使用新的 HTML5 JavaScript API - dataset property，需要支持 HTML5 的現(xiàn)代瀏覽器
Warning !
如果使用一些缺乏想象力的屬性名時(shí)，比如 data-height 這樣普通滴名字，就很有可能和其他的腳本文件或者引用的 library / plugin 產(chǎn)生沖突。所以建議在普通的名字前面加上關(guān)乎這個(gè)頁(yè)面的前綴，比如 data-html5doctor-height。
拓展
需要注意什么？
不要在 data 屬性中存儲(chǔ)應(yīng)該可見(jiàn)且可獲取的內(nèi)容，因?yàn)檩o助工具很可能獲取不到這些信息。另外，搜索引擎爬蟲也無(wú)法為這些 data 屬性值建立索引。（參見(jiàn) Using data-* attributes ）
如何用 jQuery 取值和賦值？
-
取值：
你可以傳統(tǒng)一點(diǎn)這么做
$(selector).attr("data-attribute-name")或者按照推薦標(biāo)準(zhǔn)這么做（ 如果 jQuery >= 1.4.3 的話）
$(selector).data("attribute-name") -
賦值
可以這么做
$(selector).attr("data-attribute-name", "attribute-value")或者這么做
$(selector).data("attribute-name", "attribute-value")
事實(shí)上，jQuery.data() 和 javascript 中的 .dataset 還是有些區(qū)別的。通過(guò) jQuery.data() 方法設(shè)置 data 屬性不會(huì)修改 DOM ；而通過(guò) dataset 方法則會(huì)同步修改 DOM。（參見(jiàn) [dataset vs jQuery.data()]((http://jsperf.com/dataset-vs-jquery-data) ）
問(wèn)題
比如在網(wǎng)頁(yè)版的 listing 中，現(xiàn)在對(duì)于每一條 AD 無(wú)論其是不是智能插播的 AD 都有一個(gè) data-cpm-sign 屬性在，只是智能插播的 AD 有屬性值，而普通的 AD 沒(méi)有屬性值而已，比如下面：
<li data-aid="304104949" data-cpm-sign="" class="media clearfix ">……</li>
我認(rèn)為比較輕巧的方法是只為智能插播的 AD 添加 data-cpm-sign 屬性，可是自己不夠熟悉 jade，而根據(jù)物理哥和三哥的說(shuō)法是現(xiàn)在還不能夠做到這樣。但是自己還是想試試有沒(méi)有方法改一改。
