将DOM节点链接到(浏览器内)域对象的选项:是直接引用

Options to link DOM node to (in-browser) domain object: is direct reference OK?

本文关键字：选项 对象 引用 链接 节点 DOM 浏览器      更新时间：2023-09-26

对于单页应用程序:我希望我的每个DOM节点都有一个对单个(浏览器内)域对象的引用。是否可以像这样存储一个直接引用:

var myDomainObject = ...;
var DOMNode = document.getElementById("myId");
DOMNode.domain_object = myDomainObject;

这是安全的，可重复的?浏览器可以用附加的JavaScript属性做一些神秘的事情吗?

谢谢。

从经验的角度来看:我将数据直接附加到节点上，没有任何问题，从来没有出现过问题。从规范的角度来看，我的解释是这样做不一定是推荐的，但是在自定义属性不与其他任何内容冲突的情况下是安全的。

在公共基础设施-可扩展性中，建议作者(也就是您)只使用[data-*]属性:

作者可以为内联客户端脚本或服务器端脚本包含数据使用data-*="属性进行处理的全站脚本。这些都是保证永远不会被浏览器访问，并允许脚本访问包括HTML元素上的数据，然后脚本可以查找和过程。

对于一个有效的用户代理的要求是在DOM中保留任何它不能识别的东西。

用户代理必须处理它们不处理的元素和属性理解为语义中立的;将它们留在DOM中(用于DOM)处理器)，并根据CSS样式化它们(对于CSS处理器)，但不能从中推断出任何意义。

因此，我的建议是，按照W3C避免冲突的目标，创建将引用到 DOM元素的对象。但是，如果您"必须"将奇怪的东西标记到DOM上，请放心，用户代理需要将其留在那里。但是，如果您确实必须这样做，那么使用这些data-*属性可能是明智的!

(我个人不使用它们，倾向于把对象和值放在当时最方便的地方。)但是，我可能已经厌倦了大约15年的黑客攻击和针对用户代理不合规的"特征检测"。即使是现在，我也不认为IE支持data-*标准…)

我以前做过存储自定义事件，它在我尝试过的每个浏览器中都能很好地工作，但是，我得说，只有在没有其他选择的情况下，你必须通过元素传递这个info

。

至少，理想情况下，创建自己的命名空间，以避免污染已经被污染的对象:

var myDomainObject = ...;
var DOMNode = document.getElementById("myId");
DOMNode.My = {};
DOMNode.My.domain_object = myDomainObject;

编辑:只是想看看有多少方法和属性一个常规的div可能有，它有136(在Chrome)。http://jsbin.com/abecaq/1/edit

虽然这不会在小网站上造成任何问题，但我还是会避免这样做，原因如下:

  1. 通过链接对许多不同JS对象的引用，你正在打开自己的内存泄漏
  2. 任何新的DOM节点都必须附加这个链接

我建议使用全局变量，或者最好是在最高必要范围内使用变量，以便在必要时可以引用。

相关文章：