javascript - 哪个更好？为什么？

Question

让我们有以下 html:

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

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

1. var value = txt.value;

2. 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 元素注入(inject)全局范围(通过使 namespace 解析器同时扫描 window 和 document)的整个想法被认为是一个坏主意 - 一个快捷方式可以在您编写代码时为您节省几次击键，但当有人(或 6 个月后的您)调试代码时，它会起到很大的补偿作用。这就是为什么，我想，Gecko 引擎没有在标准模式下进行这样的注入(inject) - 只是在怪癖中。

尽管如此，这个想法还是在 HTML5 Standard 中取得了成功。 :

*Named objects [...] are those that are either:

• a, applet, area, embed, form, frameset, img, or object elements that have a name content attribute whose value is name, or
• HTML elements that have an id content attribute whose value is name.

有a lengthy discussion关于这种方法的正确性——最终导致该方法保持原样。 MS 代表给出了关键原因:

Our data suggests that making this quirks only would break a large number of web sites.

是的，经常使用的不良做法又一次取得了胜利，以至于它成为一种普遍做法。这就是 Firefox 14+ 也支持此“功能”的原因。尽管如此，仅仅支持它并不能说明它是正确的。