4

背景

首先,我想提一下,用于找出差异的 SO-search

  • (宿主对象)DOM-Javascript 对象var domJSobj = document.createElement("div"))和
  • (原生对象)纯 Javascript 对象var pureJSobj = {}

已经完成,但我仍然不能声称我发现了很多(很棒的是,有这个问题答案:what-is-the-difference-between-native-objects-and-host-objects)。也许我在这里忽略了一些东西,然后非常感谢您的评论。

在问这里之前,我还阅读了 MDN Mozillas Docu on DOM and Javascript以获得一些想法。

问题

有点“无胶”,我开始在 Javascript 控制台中玩游戏,我遇到了一些第一个陷阱(源于我对(本机对象)行为的期望,而对于(主机对象)不正确)。要清楚许多事情 - 乍一看 - 似乎相似:

var nativeObject = {}; //创建新对象
nativeObject.someAttribute = "某事"; //设置一些属性
nativeObject.someMethod = function() { return this.someAttribute; } // 定义一些方法

console.log(nativeObject.someAttribute); // “某物”
console.log(nativeObject.someMethod()); // “某物”

var hostObject = document.createElement("div"); //创建一个“div”一种类型的宿主对象
hostObject.someAttribute = "某事"; //设置一些属性
hostObject.someMethod = function() { return this.someAttribute; } // 定义一些方法

console.log(hostObject.someAttribute); // “某物”
console.log(hostObject.someMethod()); // “某物”

对我来说,乍一看似乎(主机对象)与(本机对象)一样可用,并且已经具备更多功能:

console.log(nativeObject.tagName); // 不明确的
console.log(hostObject.tagName); // "DIV"

因为它已经拥有所有不错的 DOM 属性。

我的问题是关于如果我决定(错误)使用(主机对象)而不是简单的(本机对象)可能出现的陷阱(可能的麻烦)列表?

我已经意识到这一点:

  • 速度考虑(我假设原生对象创建得更快)
  • 内存使用注意事项(本机对象在这里也可能更好)

无论如何,我看不到太多麻烦(如果这些考虑在一个案例中不是很重要)呢?这就是问题的原因。

我认为这个问题的答案最好显示/说明一个潜在的陷阱,即在(本机对象)上使用(主机对象)是不好不可能的情况或情况。通过这种方式,这个问题应该符合 SO 质量要求,即根据真实事实传递,而不是仅仅引发基于意见的讨论。

4

1 回答 1

0

对我来说,使用基于 DOM 的对象的缺陷在于,从它创建的那一刻起,它就已经有几十个属性了。你的document.createElement("div")对象有一个id属性和一个title属性,还有一个style属性是它自己的对象,等等。如果你想使用基于 DOM 的对象来存储任意数据,你需要注意不要将你的属性命名为已经存在的东西或者你可能会得到意想不到的结果;例如,在我在 Chrome 中的测试中,代码hostObject.id = null实际上会导致hostObject.id""不是 true null;或者hostObject.id = false会导致它"false"(即字符串,不是 true false)用于hostObject您的代码中定义的变量。

尝试将此添加到您的代码中:

for (property in document.createElement("div"))
  console.log(property);

在 Chrome 中,我看到列出了 134 个属性。有很多地雷可以避免。除此之外,浏览器之间的属性也不同。Firefox 中的相同代码列出了 192 个属性。

如果您真的打算将它用作 DOM 对象,我只会创建一个 DOM 对象。那么这些属性就有了一些用途;否则它们只是您代码中的潜在错误。就像评论说的那样,KISS;我的意思是,当然,我可以决定将整数值 123456789 保存在 Date 对象中:

myInt = new Date(123456789);
myInt.getTime(); // returns 123456789

但那有什么意义呢?为什么不直接做myInt = 123456789?就像我不会使用 Date 对象来存储整数数据一样,不要使用 DOM 对象来存储任意数据。

于 2013-11-26T03:42:46.967 回答