Question

我们有以下html：

<input id="txt" type="text" />

现在，在javascript中，我可以通过以下方法访问它的值。

var value = txt.value;
var value = document.getElementById('txt').value;

那么，它们之间有什么区别吗？

Answer 1

首先，考虑当有人看到这样编写的代码时会发生什么：

var value = txt.value;

这里有一个零提示，txt实际上是1）一个全局变量; 2）DOM元素。除非有人扫描函数的整个范围（这意味着函数本身，它定义的parent函数，它自己的父函数......直到最外层 - 全局范围）。这意味着要了解代码，必须检查其行踪。显然，这并不能使代码很好用。

为了说明这一点，请考虑这里发生的事情：

function someAsyncFunc() {
  var txt = 'someText';
  // some lines of code
  someAsyncAction(function() {
    var value = txt.value;   
  });  
}

这里我们有一个函数用作某些异步操作中的回调。从技术上讲，它没有txt作为此特定函数的局部变量 - 但是对全局变量的引用仍然被其父级中定义的txt所遮蔽。关键是，通过这种潜在的名称冲突，引入微妙但非常讨厌的错误太容易了。

这是理论和推理，现在是关于跨平台的实践。将DOM元素注入全局范围（通过使命名空间解析器扫描window和document）多年的整个想法被认为是一个坏主意 - 一个可以拯救你的捷径在编写代码时进行几次击键，但是当有人（或者你在6个月之后）调试代码时，将会有更多的击键。这就是为什么，我想，Gecko引擎没有在标准模式下进行这样的注入 - 只是在怪癖中。

尽管如此，这个想法仍然在HTML5 Standard：

* 命名对象[...]是：


a, applet, area, embed, form, frameset, img, or object elements具有name内容属性，其值为name或

HTML elements，其id内容属性的值为name。

关于这种方法的正确性有a lengthy discussion - 最终导致方法保持不变。 MS代表给出了关键原因：

我们的数据表明，制造这种怪癖只会造成很大的影响网站数量。

是的，这种不良做法的另一个胜利经常被使用，这已成为一种常见的做法。这就是为什么Firefox 14+也支持这个“功能”的原因。尽管如此，仅仅支持它并不是正确的。

哪个更好？为什么？

1 个答案: