在开发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一开头的属性都会被忽略。
| 
/1 
发表于 2016-4-14 12:27:54
收藏
转播
淘帖