向 DOM Element 对象添加属性有什么问题? [英] What's wrong with adding properties to DOM Element objects?

问题描述

我一直在寻找一个直接的答案(我能想到很多可能性，但我想知道真正的原因):

I've been looking for a straight answer for this (I can think of lots of possiblities, but I'd like to know the true reason):

jQuery 提供了一个 .data() 方法来将数据与 DOM 元素对象相关联.是什么让这成为必要?将属性(或方法)直接添加到 DOM 元素对象是否有问题?它是什么?

jQuery provides a .data() method for associating data with DOM Element objects. What makes this necessary? Is there a problem adding properties (or methods) directly to DOM Element Objects? What is it?

推荐答案

直接向 DOM 元素对象添加属性(或方法)有问题吗?

Is there a problem adding properties (or methods) directly to DOM Element Objects?

可能.

没有网络标准规定您可以向 DOM 节点添加任意属性.它们是具有浏览器特定实现的主机对象"，而不是原生 JavaScript 对象"，根据 ECMA-262，您可以随心所欲.其他宿主对象将不允许您添加任意属性.

There is no web standard that says you can add arbitrary properties to DOM nodes. They are ‘host objects’ with browser-specific implementations, not ‘native JavaScript objects’ which according to ECMA-262 you can do what you like with. Other host objects will not allow you to add arbitrary properties.

实际上，由于最早的浏览器确实允许您这样做，因此它是事实上的标准，您无论如何都可以……除非您通过设置 document.expando= false.您自己可能不会这样做，但如果您正在编写要部署到其他地方的脚本，您可能会担心.

In reality since the earliest browsers did allow you to do it, it's a de facto standard that you can anyway... unless you deliberately tell IE to disallow it by setting document.expando= false. You probably wouldn't do that yourself, but if you're writing a script to be deployed elsewhere it might concern you.

任意属性存在一个实际问题，因为您真的不知道您选择的任意名称在您尚未测试的某些浏览器中没有存在的含义，或在尚不存在的浏览器或标准的未来版本中.添加一个属性 element.sausage= true，您不能确定任何时空中的浏览器都不会使用它作为信号来启用令人兴奋的 DOM Sausage Make The Browser Crash 功能.因此，如果您确实添加了任意属性，请确保为其指定一个不太可能的名称，例如 element._mylibraryname_sausage= true.这也有助于防止与可能添加任意属性的其他脚本组件发生命名空间冲突.

There is a practical problem with arbitrary-properties in that you don't really know that the arbitrary name you have chosen doesn't have an existing meaning in some browser you haven't tested yet, or in a future version of a browser or standard that doesn't exist yet. Add a property element.sausage= true, and you can't be sure that no browser anywhere in space and time will use that as a signal to engage the exciting DOM Sausage Make The Browser Crash feature. So if you do add an arbitrary property, make sure to give it an unlikely name, for example element._mylibraryname_sausage= true. This also helps prevent namespace conflicts with other script components that might add arbitrary properties.

IE 中还有一个问题，即您添加的属性被错误地视为属性.如果你用 innerHTML 序列化元素，你会在输出中得到一个意外的属性，例如.

.如果您随后将该 HTML 字符串分配给另一个元素，您将在新元素中获得一个属性，这可能会混淆您的脚本.

There is a further problem in IE in that properties you add are incorrectly treated as attributes. If you serialise the element with innerHTML you'll get an unexpected attribute in the output, eg. <p _mylibraryname_sausage="true">. Should you then assign that HTML string to another element, you'll get a property in the new element, potentially confusing your script.

(请注意，这只发生在值是简单类型的属性上；对象、数组和函数不会出现在序列化的 HTML 中.我希望 jQuery 知道这一点，因为它绕过它来实现 data 方法非常糟糕，会导致错误，并且会减慢许多简单的 DOM 操作.)

(Note this only happens for properties whose values are simple types; Objects, Arrays and Functions do not show up in serialised HTML. I wish jQuery knew about this, because the way it works around it to implement the data method is absolutely terrible, results in bugs, and slows down many simple DOM operations.)

这篇关于向 DOM Element 对象添加属性有什么问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！