Web开发技巧：使用自定义数据属性创建弹出窗口

a864244969

在开发web应用时，有时会用JavaScript获取文档之外的信息，某些情况下，我们需要用一些技巧来处理这些额外信息以保证Web应用能够正常运行。一般而言，技巧无外乎是将额外的信息塞入事件处理程序或滥用rel属性或class属性以方便注入行为。感谢HTML规范引入了自定义数据属性，让不堪回首的往日一去不返。

    所有的自定义数据属性都以data一前缀开头，HTML文档的验证器会在验证时忽略它。开发人员可以在任意元素中加入自定义数据属性，属性值可以是照片的元数据、经纬度坐标或者弹出窗口的尺寸。最棒的是，几乎在所有浏览器中，你都能够使用自定义数据属性，因为我们可以轻易地使用JavaScript来获取它们。

1、行为与内容的分离，或者说为什么设置onclick不好

    过去的数年里，弹出窗口的名声一直不好，而这通常是很自然的事情。弹出窗口常被用来向用户显示广告，或者伪装成不被怀疑的间谍软件或病毒，而最糟糕的是骗取个人信息并随后加以出售。因此，大多数浏览器都有阻止弹出窗口的插件也就不足为怪了。

    不过，弹出窗口并非总是不好。web应用的开发人员常常需要依赖于弹出窗口，以便向用户显示在线帮助信息、附加选项或者其他重要的用户界面功能。为了不让弹出窗口过于惹人厌烦，我们需要用一种不引人注目的方式来实现它。浏览AwesomeCo公司的人力资源页面时，你会看到几个链接，它们用于打开显示服务条款的弹出窗口，其代码实现大多如下:



    通过链接来触发弹出窗口的方式颇为常见。事实上，JavaScript菜鸟在初学如何实现弹出窗口时大都会采用这种方式。在进一步实现所需效果之前，我们要指出此种方式的两个问题。

2、提升可访问性

    链接的目标地址没有设置!如果JavaScript被禁用了，那么链接将无法引导用户进入相应页面。这是一个非常严重的问题，以至于我们需要立即解决。我建议开发人员永远不要省略href属性，任何情况下都不要为h ref属性赋“寿”及类似值。现在，我们将弹出窗口中显示的资源的地址赋值给h ref属性，代码如下:



    上面的代码中，我们通过JavaScript代码读取a元素的href属性值，进而得到资源的链接地址。构建可访问的页面，第一步是确保禁用JavaScript的情况下，所有功能仍能正常运转。

3、废弃onclick

    注意保持行为与内容分离，正如用链接样式表保持样式信息分离一样。开始的时候，使用onclick会带来便利，但是想象一下页面上有10个链接的情况，那时你会看到onclick方法

    失控的场面。你将只能一遍又一遍地编写重复的JavaScript代码。如果是通过服务器端代码来生成浏览器端代码，那么你就是在增加JavaScript事件，进而会导致大量不必要的HTML代码的出现。

替代方法是为每个链接分配可识别的CSS类名:

   
    上述代码中使用了jQuery的选择器来获取类名为popup的元素，随后，我们为其中每个元素的click事件分别添加一个监听器。当有人单击链接时，click方法中的代码会被执行。

    preventDefault方法用于阻止默认的单击事件行为。在示例中，它阻止了页面跳转。

    我们还忘了一件事—没有设置窗口的尺寸信息和位置信息，而在未优化的代码中，我们是设置了的。我们希望即使是不太熟悉JavaScript代码的页面设计者，也能基于每个链接设置窗口尺寸。

4、自定义数据属性来解围

    当创建应用了JavaScript的wer应用时，刚刚提到的情况i比较常见。如你所见，在代码中存储窗口的期望高度和宽度是可取的，但是onclick方法有诸多弊端。我们可以改换在元素上嵌入属性的方式加以实现。现在要做的是将链接改造成下面这种形式:

   
    离完成只有一步之遥，修改之前编写的click事件以抓取链接上设置的各项自定义数据属性，然后将其传入window.open方法。



收工!现在，单击链接后会打开一个新窗口。

5、回退

    只要浏览器支持.JavaScript，自定义数据属性就能正常工作。自定义数据属性不会使浏览器出错，同时，HTML文档类型声明可保证文档是有效的，因为以data一开头的属性都会被忽略。

6、未来展望

    一旦新标签和属性得到了广泛支持，我们就可以用它们来做一些有趣的事情。使用打印样式表，我们能够轻易地识别并隐藏导航和文章的尾部:

     

    借助于脚本语言，我们能够迅速识别网站内或页面中的所有文章。但最重要的是，我们用到的标签能够恰如其分地描述其所标记的内容，这样一来，我们就能够写出更好的样式表和更强大的JavaScript代码了。

    开发人员可以用自定义数据属性将各式各样的信息嵌入标记中。借助于自定义数据属性，使用JaveScript定位到所有data-remote=true的表单标签，就能得知哪些表单标签应使用匀ax进行提交，这种做法与Rubv on Rails框架中的做法是一致的。

    我们还可以使用自定义数据属性将日期和时间缓存在页面中，并以用户时区为基准来显示日期和时间。只需将时间以UTC的形式置于HTML页面中，在客户端将其转换成用户本地时间即可。自定义数据属性允许开发人员在页面中嵌入真实有用的数据，而越来越多的框架和库会利用它的优点。我确信，在日常工作中，你会发现它有很多用处。

至此，我们可以一劳永逸地根除滥用div的情况了。

本文来自 >> 尚学堂； 转载请注明：http://www.sxt.cn/u/13421/blog/9066