Article #3: HTML5 Custom Data Attributes (data-*)
*Reason: *首先說(shuō)明一下，自己對(duì)于文章的選取并沒(méi)有按照某些固定的標(biāo)準(zhǔn)順序，而是因?yàn)橹白约鹤?case 時(shí)遇到一些困惑的地方皿渗，而某篇文章正好激發(fā)起自己深入了解的興趣活鹰，所以才選擇細(xì)讀做筆記蛋济。
語(yǔ)法
屬性名稱(chēng)
屬性名必須以 'data-' 作為前綴绰精，且至少有一個(gè)字母，不可大寫(xiě)喳张。
屬性值
屬性值可以為任意的字符串。
為什么要用 data-* 屬性 美澳？
很久很久以前销部，在需要對(duì)每一個(gè)元素存儲(chǔ)數(shù)據(jù)時(shí)，大家習(xí)慣使用 class 或者 rel 制跟。自然舅桩，這么做確實(shí)可以獲得相應(yīng)數(shù)據(jù)，但是這樣造成了語(yǔ)義混亂雨膨。于是 data-* 出現(xiàn)了擂涛，我們可以用 JavaScript 使用這些數(shù)據(jù)去創(chuàng)造更豐富更吸引人的用戶(hù)體驗(yàn)，并且無(wú)需擔(dān)心與服務(wù)器端產(chǎn)生更多的 Ajax 交互聊记。
什么時(shí)候可以用自定義 data 屬性呢撒妈？
- 存儲(chǔ)元素的初始高度或者透明度，之后可以被用于計(jì)算 JavaScript 的動(dòng)畫(huà)效果排监。
- 存儲(chǔ)通過(guò) JavaScript 加載的 Flash 視頻參數(shù)踩身。 （不大能理解）
- To store custom web analytics tagging data. （翻譯無(wú)能，灰成缏叮灰常不能理解）
- 存儲(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助工具很可能獲取不到這些信息竟秫。另外娃惯，搜索引擎爬蟲(chóng)也無(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)有方法改一改请祖。
