javascript - 将 DOM 节点链接到(浏览器内)域对象 : is direct reference OK? 的选项

Question

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

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

这安全、可重复吗？浏览器可以使用附加的 JavaScript 属性做神秘的事情吗？

谢谢。

Answer 1

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

在Common Infrastructure - Extensibility ，对作者(也就是你)的建议是仅使用 [data-*] 属性:

Authors can include data for inline client-side scripts or server-side site-wide scripts to process using the data-*="" attributes. These are guaranteed to never be touched by browsers, and allow scripts to include data on HTML elements that scripts can then look for and process.

有效用户代理的要求是在 DOM 中保留它无法识别的任何内容。

User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.

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

(我个人不使用它们，并且倾向于将对象和值添加到当时最方便的任何东西上。但是，我可能会对大约 15 年的黑客攻击和“功能检测”感到厌倦用户代理。即使是现在，我也不认为 IE 支持 data-* 标准 ... )