Article #3: HTML5 Custom Data Attributes (data-*)
*Reason: *首先说明一下，自己对于文章的选取并没有按照某些固定的标准顺序，而是因为之前自己做 case 时遇到一些困惑的地方，而某篇文章正好激发起自己深入了解的兴趣，所以才选择细读做笔记。
语法
属性名称
属性名必须以 'data-' 作为前缀，且至少有一个字母，不可大写。
属性值
属性值可以为任意的字符串。
为什么要用 data-* 属性 ？
很久很久以前，在需要对每一个元素存储数据时，大家习惯使用 class 或者 rel 。自然，这么做确实可以获得相应数据，但是这样造成了语义混乱。于是 data-* 出现了，我们可以用 JavaScript 使用这些数据去创造更丰富更吸引人的用户体验，并且无需担心与服务器端产生更多的 Ajax 交互。
什么时候可以用自定义 data 属性呢？
- 存储元素的初始高度或者透明度，之后可以被用于计算 JavaScript 的动画效果。
- 存储通过 JavaScript 加载的 Flash 视频参数。 （不大能理解）
- To store custom web analytics tagging data. （翻译无能，灰常灰常不能理解）
- 存储 JavaScript 游戏中元素需要的生命值呀、剩余弹药呀什么的。
- 增强 JavaScript <video> 子标题的可访问性。 （也不大能理解）
用原生 JavaScript 读取 data-* 属性
- 可以使用 getAttribute 和 setAttribute 当做普通属性访问，这个在任何浏览器中都能够使用
- 使用新的 HTML5 JavaScript API - dataset property，需要支持 HTML5 的现代浏览器
Warning !
如果使用一些缺乏想象力的属性名时，比如 data-height 这样普通滴名字，就很有可能和其他的脚本文件或者引用的 library / plugin 产生冲突。所以建议在普通的名字前面加上关乎这个页面的前缀，比如 data-html5doctor-height。
拓展
需要注意什么？
不要在 data 属性中存储应该可见且可获取的内容，因为辅助工具很可能获取不到这些信息。另外，搜索引擎爬虫也无法为这些 data 属性值建立索引。（参见 Using data-* attributes ）
如何用 jQuery 取值和赋值？
-
取值：
你可以传统一点这么做
$(selector).attr("data-attribute-name")或者按照推荐标准这么做（ 如果 jQuery >= 1.4.3 的话）
$(selector).data("attribute-name") -
赋值
可以这么做
$(selector).attr("data-attribute-name", "attribute-value")或者这么做
$(selector).data("attribute-name", "attribute-value")
事实上，jQuery.data() 和 javascript 中的 .dataset 还是有些区别的。通过 jQuery.data() 方法设置 data 属性不会修改 DOM ；而通过 dataset 方法则会同步修改 DOM。（参见 [dataset vs jQuery.data()]((http://jsperf.com/dataset-vs-jquery-data) ）
问题
比如在网页版的 listing 中，现在对于每一条 AD 无论其是不是智能插播的 AD 都有一个 data-cpm-sign 属性在，只是智能插播的 AD 有属性值，而普通的 AD 没有属性值而已，比如下面：
<li data-aid="304104949" data-cpm-sign="" class="media clearfix ">……</li>
我认为比较轻巧的方法是只为智能插播的 AD 添加 data-cpm-sign 属性，可是自己不够熟悉 jade，而根据物理哥和三哥的说法是现在还不能够做到这样。但是自己还是想试试有没有方法改一改。
