我可以使用ID作为变量名吗？

Question

我发现设置一个与元素id同名的变量很方便,例如:

randomDiv = document.getElementById("randomDiv");
  randomDiv.onclick = function(){ /* Whatever; */ }
  randomDiv.property = "value";

这适用于Chrome和Firefox,但不适用于IE8; 给出错误Object不支持此属性或方法.

创建一个名称与元素ID匹配错误(或不良做法)的变量,或者这是Internet Explorer的另一个实例吗？

Answer 1

自动生成全局变量被认为是不好的做法,因为它很难分辨,查看某些代码,是否有意或者您忘记在某处声明变量.像这样自动创建全局变量在ES5严格模式下不起作用,并且可以在ECMAScript的未来版本中逐步淘汰.

在浏览器中,JavaScript的全局范围实际上是window.当你提到document你的时候window.document.在浏览器中创建全局变量的最佳做法是将其添加到window(global在Node.js中).这是jQuery的一个例子:

window.jQuery = window.$ = jQuery;

某些属性window(因此某些全局变量)是只读的,您无法覆盖它们.window.document是一个(在Chrome中测试,这是所有浏览器特定的,可能会更改):

window.document; // ? Document
window.document = 'foo'; // ? "foo" // It worked!
window.document; // ? Document // Hmm, no it didn’t

事实证明,大多数浏览器window为文档中的每个id 创建属性(因此是全局变量).许多浏览器不会将它们设置为只读,您可以使用自己的浏览器覆盖它们,但Internet Explorer会这样做.

这是JavaScript中全局变量可能存在危险的另一个原因 - 您的一个ID可能与只读window属性(今天或未来的浏览器)相匹配.

在顶层(不在函数内),var声明全局变量.说明var document = 'foo'顶级不会引发错误,但document仍然是Document,但不是"foo".

除此之外:新的浏览器(支持ES5)允许您创建自己的只读全局变量Object.defineProperty:

Object.defineProperty(window, 'foo', { value: 'bar', writable: false });
foo = 'baz';
foo; // ? "bar"

我有三个选择.

1. 继续使用元素的全局变量,但如果它们已经存在则保持不变(window明确地创建它们以便代码在ES5中清晰明了):

   if ( ! window.randomDiv) {
       window.randomDiv = document.getElementById('randomDiv');
   }
   

2. 创建一个对象on window,用作应用程序自己的命名空间,不会干扰其他库或浏览器.这是常见的,被认为是非常好的做法,特别是如果需要跨JavaScript文件访问它:

   // Early in your code…
   window.Fantabulum = {};
   // Later on…
   Fantabulum.randomDiv = document.getElementById("randomDiv");
   

3. 避免制作全局变量.确保你的应用程序的代码在一个函数内(它应该已经是你的其他变量不是全局的,并且没有相同的限制!),并为你的元素声明变量:

   (function(){
       var randomDiv = document.getElementById("randomDiv");
   })();