HTML标记上的非标准属性.好事？坏事？你的意见？

HTML(或者只是XHTML？)在标签上的非标准属性方面相对严格.如果它们不是规范的一部分,那么您的代码将被视为不符合规范.

然而,非标准属性对于将元数据传递给Javascript非常有用.例如,如果假设链接显示弹出窗口,则可以在属性中设置弹出窗口的名称:

click me

或者,您可以将弹出窗口的标题存储在隐藏元素中,例如span:

    click me
    Title for My Popup

然而,我应该是一个优选的方法.第一种方法更简洁,我猜测,并没有像搜索引擎和屏幕阅读器一样多.相反,第二种选择使得存储大量数据更容易,因此更加通用.它也符合标准.

我很好奇这个社区的想法是什么.你怎么处理这样的情况？第一种方法的简单性是否超过潜在的缺点(如果有的话)？

我是提议的HTML 5解决方案(data-前缀属性)的忠实粉丝.编辑:我想补充一点,使用自定义属性可能有更好的例子.例如,自定义应用程序将使用的标准属性中没有模拟的数据(例如,基于不一定用className或id表示的事物的事件处理程序的自定义).

自定义属性提供了将额外数据传输到客户端的便捷方式.Dojo Toolkit定期执行此操作,并指出(Debunking Dojo Toolkit Myths):

自定义属性始终是有效的HTML,它们只是在针对DTD进行测试时不会进行验证.[...] HTML规范规定,用户代理中的HTML呈现引擎会忽略任何未识别的属性,Dojo可以选择利用此功能来提高开发的便利性.

另一个选择是在Javascript中定义这样的东西:

然后,您可以稍后在Javascript代码中使用它,假设您的链接具有与此哈希表中的ID对应的ID.

它没有其他两种方法的缺点:没有非标准属性,也没有丑陋的隐藏跨度.

缺点是对于像你的例子那样简单的事情可能有点过分.但对于更复杂的场景,您需要传递更多数据,这是一个不错的选择.特别是考虑到数据是作为JSON传递的,因此您可以轻松地传递复杂对象.

此外,您将数据与格式分开,这对可维护性是一件好事.

你甚至可以拥有这样的东西(你不能用其他方法真正做到):

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

Hatsune

而且由于您最有可能使用某种服务器端编程语言,因此这个哈希表应该是动态生成的(只需将其序列化为JSON并将其吐入页面的标题部分).