我正在制作一个由javascript提供一些交互的页面.仅作为示例:发送AJAX请求以获取文章内容然后在div中显示该数据的链接.显然在这个例子中,我需要每个链接来存储额外的信息:文章的ID.我一直在处理它的方式是将这些信息放在href链接中:
<a class="article" href="#5">
然后我使用jQuery来查找a.article元素并附加相应的事件处理程序.(不要太在意这里的可用性或语义,这只是一个例子)
无论如何,这种方法有效,但它有点味道,根本不可扩展(如果click函数有多个参数会发生什么？如果其中一些参数是可选的,会怎样？)
显而易见的答案是在元素上使用属性.我的意思是,这就是他们的目的,对吗？(的种类).
<a articleid="5" href="link/for/non-js-users.html">
在我最近的一个问题中,我问这个方法是否有效,结果是没有定义我自己的DTD(我没有),那么不,它是无效的或可靠的.一个常见的反应是将数据放入class属性中(虽然这可能是因为我选择不当的例子),但对我而言,这更令人闻趣.是的,它在技术上是有效的,但它不是一个很好的解决方案.
我过去使用的另一种方法是实际生成一些JS并将其插入到<script>标记的页面中,创建一个与该对象关联的结构.
var myData = {
link0 : {
articleId : 5,
target : '#showMessage'
// etc...
},
link1 : {
articleId : 13
}
};
<a href="..." id="link0">
但这可能是维持对接的真正痛苦,而且通常只是非常混乱.
那么,为了解决这个问题,你如何为HTML标签存储任意信息？
HTML(或者只是XHTML？)在标签上的非标准属性方面相对严格.如果它们不是规范的一部分,那么您的代码将被视为不符合规范.
然而,非标准属性对于将元数据传递给Javascript非常有用.例如,如果假设链接显示弹出窗口,则可以在属性中设置弹出窗口的名称:
<a href="#null" class="popup" title="See the Popup!"
popup_title="Title for My Popup">click me</a>
或者,您可以将弹出窗口的标题存储在隐藏元素中,例如span:
<style>
.popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
click me
<span class="title">Title for My Popup</span>
</a>
然而,我应该是一个优选的方法.第一种方法更简洁,我猜测,并没有像搜索引擎和屏幕阅读器一样多.相反,第二种选择使得存储大量数据更容易,因此更加通用.它也符合标准.
我很好奇这个社区的想法是什么.你怎么处理这样的情况？第一种方法的简单性是否超过潜在的缺点(如果有的话)？
这个话题在办公室变成了激烈的讨论,所以我很想知道你的想法.
我们正在开发一个仅针对某些特定浏览器的网络应用.这些浏览器目前包括不同风格的Opera 9和Mozilla 1.7.12.在未来,我们可能还需要支持Opera 10和不同版本的WebKit.但我们不太可能不得不处理任何版本的IE.
我们的网络应用程序在其doctype中声明HTML 4.0严格.
最近,我提出了在HTML中使用自定义属性作为特定问题的解决方案.我提出了一些看起来像这样的东西:
<span translationkey="someKey">...</span>
由于这不是有效的HTML 4,它与我们的HTML人员并没有很好地相关,我们陷入了争论.
我的问题是:如果有的话 - 使用自定义属性的风险是什么？我知道页面不会验证,但是并非所有浏览器都忽略了他们不知道的属性？或者可以想象一些浏览器会改为"quirks模式"并将页面呈现为严格的HTML 4.0之外的其他内容？
更新:
Hilited提出的实际问题.