HTML5 Note #4: HTML5 Custom Data Attributes (data-*) [cont'd]

Posted on April 5, 2014

什么时候可以用自定义 data 属性呢？

  • To store the initial height or opacity of an element which might be required in later JavaScript animation calculations 存储元素的初始高度或者透明度，之后可以被用于计算 JavaScript 的动画效果。
  • To store parameters for a Flash movie that’s loaded via JavaScript 存储通过 JavaScript 加载的 Flash 视频参数。
  • To store custom web analytics tagging data as demonstrated by Jason Karns 存储自定义的 web 分析数据。

在这个使用场景中遇到的高大上的 Google Analystics，google 一下其用途，大致理解为用于统计和分析网页的访问数据。 其中追踪网站搜索信息可启用 _trackPageview() 函数，其中的参数是 pageURL，但是作者认为将此信息放在 id / class / title 等等属性都是不合适的，因为其语义并非如此。于是他选择使用 data-* 存放这些数据，对需要追踪的元素加上 data-ga：

<body data-ga="/page_name">
<!--在 body 上的 data-ga 赋加网页名-->

又假设有一组 factor，就对它们如下赋值：

<ul class="factors">
	<li data-ga="/factor_1" />
	<li data-ga="/factor_2" />
	<li data-ga="/factor_3" />
</ul>

上一篇笔记写的确实不够认真，甚至连 <video> 的 subtitle 都没理解就按照字面乱翻译了（囧），在此灰常感谢魔法哥断然指出~

事实上，subtitles 是视频的字幕，按照我自己的理解重述一遍引用中外链文章作者的使用方法：

<span data-begin=1 data-end=6> Hi, my name's Dr Archimedes Einstein… </span>

其中，data-begin 与 data-end 表示的是相对与视频开始时间的偏移时间。所以在这个栗子中，这条字幕从第 1 秒到第 6 秒共展示了 5s。然后用一个 div 把以上多个包含字幕的 span 包裹起来，并设置 display: none 隐藏该元素，就可以用 JavaScript 获取这些字幕啦！

var nodes = document.querySelectorAll('#transcript span');

然后获取 video 的 currentTime 属性（设置或返回音频/视频播放的当前位置（以秒计））。

var v = document.querySelector('video');
var now = v.currentTime;

将变量 now 与 nodes 中所有元素中 data-begin 和 data-end 不断循环做比较，找到相应的时间区间，并提取其字幕。获取到字幕后，将字幕赋值给显示在视频上的字幕 div：

<div id="caption"></div>

而现在新出现了一个超赞的 HTML5 标签 —— <track>，可将字幕、解说、屏幕阅读器说明和章节添加到视频和音频中。自己又在 HTML5Rocks 上找到一篇有关的入门介绍 —— 跟踪元素使用入门，边读边 YY 现有浏览器都能完美支持 HTML5 标签的美景，想想内心还有点儿小激动~

拓展

在上一篇 Note 中，我写上了这么一段：

事实上，jQuery.data() 和 javascript 中的 .dataset 还是有些区别的。通过 jQuery.data() 方法设置 data 属性不会修改 DOM ；而通过 dataset 方法则会同步修改 DOM。（参见 [dataset vs jQuery.data()]((http://jsperf.com/dataset-vs-jquery-data) ）

然后，三哥问我，这是什么意思，为什么

通过 jQuery.data() 方法设置 data 属性不会修改 DOM ？

不得不说这是个好问题，因为问到自己哑口无言了。所以现在细细深入一下 jQuery.data() 和 javascript 中直接使用 .dataset 属性的区别。html 5 data-* (dataset) 属性和 jquery data方法比较，这篇文章中的栗子验证了通过 jQuery.data() 方法设置 data 属性不会修改 DOM。后来自己寻找原因，发现是 jQuery.data() 是只对被选中的元素附加数据，如果被选中的元素是一个 DOM 对象，那么会使用全局的 jQuery.cache 存放数据。具体来说，其代码中明确区分了 JS 对象和 DOM 对象的保存，这是为了解决部分浏览器的内存泄漏问题。

Over time, jQuery’s .data() API has taken on more responsibilities than it originally had when it was just a way to associate in-memory data with DOM elements and prevent IE leakage.

问题

  1. 继续延续拓展中的疑问，什么是内存泄露，为什么低版本的 IE 有可能会造成内存泄露问题？（今天时间不够，放在之后自己查一查）

  2. 对于这个使用场景

    • To store parameters for a Flash movie that’s loaded via JavaScript

    还是没有找到已有的栗子帮助自己直观理解，所以依旧不太能想象应该如何在这种场景下使用 data-*。