Javascript 全局声明DOM元素变量的效率

我想知道全局声明变量与否的最佳实践是什么：如果我有一个

var foo=document.getElementById（'bar'）

和

foo

仅在一个被多次调用的函数中使用，那么

foo

最好在函数内部或外部声明（性能方面）

---

如果函数内部声明了

foo

，这是否意味着每次函数运行时程序都必须在DOM树中搜索该元素？如果是这样，为什么在函数外部声明

foo

不是更好呢？

如果在函数内部使用

foo

，最好在本地使用它。因为这样可以避免您和其他人的混淆。如果你在全局范围内声明它，那么变量总是有可能被误用

如果您在函数内部使用

foo

，最好在本地使用它。因为这样可以避免您和其他人的混淆。如果你在全局范围内声明它，那么变量总是有可能被误用

避免全局声明

作为开发人员，您的工作是尽可能限制全局范围内可用的变量数量。为什么？有几个理由，它们都是很好的理由

• 可读性和直观性

其他开发人员不必在全局范围内寻找他们需要的东西。典型的最佳实践是存储单个对象（单例）。这意味着在该对象中，属性和子对象应该被组织起来（很像文件系统），以便直观地确定某些函数和属性的位置

• 维修性

即使其他开发人员没有加入，您也需要在一定程度上维护该产品。如果是这样的话，那么在全球范围内分离您的逻辑将是很困难的，如果从现在起6个月后，您需要对某个部分进行一些更改，以便在其他地方有所突破

• 浏览器支持

不太可能，但同样重要的是，浏览器一直在添加功能，并且有多个规格设置用于许多功能，这些功能要么正在被提议、测试，要么计划实施。如果您的任何全局声明与它们冲突，那么在不得不更改代码之后，您将很难重新连接所有内容

那你该怎么办？

您应该在全局范围内创建一个单一对象，或者尽可能少的对象，然后通过扩展该单一对象来构建所需的功能和特性。这叫做范围界定，它是开发的一个非常重要的部分

例如，你给出的案例，而不是写作

var  foo = document.getElementById('bar');

function a() {
 // do Something with foo;
}

function b() {
  // do Something with foo;
}
a();
b();

你最好还是写信

let MyApp = {
a: function() {
  //do Something with this.foo;
},
b: function() {
  //do something with this.foo;
}
}
myApp.foo = document.getElementById('bar')
myApp.a();
myApp.b();

---

避免全局声明

作为开发人员，您的工作是尽可能限制全局范围内可用的变量数量。为什么？有几个理由，它们都是很好的理由

• 可读性和直观性

其他开发人员不必在全局范围内寻找他们需要的东西。典型的最佳实践是存储单个对象（单例）。这意味着在该对象中，属性和子对象应该被组织起来（很像文件系统），以便直观地确定某些函数和属性的位置

• 维修性

即使其他开发人员没有加入，您也需要在一定程度上维护该产品。如果是这样的话，那么在全球范围内分离您的逻辑将是很困难的，如果从现在起6个月后，您需要对某个部分进行一些更改，以便在其他地方有所突破

• 浏览器支持

不太可能，但同样重要的是，浏览器一直在添加功能，并且有多个规格设置用于许多功能，这些功能要么正在被提议、测试，要么计划实施。如果您的任何全局声明与它们冲突，那么在不得不更改代码之后，您将很难重新连接所有内容

那你该怎么办？

您应该在全局范围内创建一个单一对象，或者尽可能少的对象，然后通过扩展该单一对象来构建所需的功能和特性。这叫做范围界定，它是开发的一个非常重要的部分

例如，你给出的案例，而不是写作

var  foo = document.getElementById('bar');

function a() {
 // do Something with foo;
}

function b() {
  // do Something with foo;
}
a();
b();

你最好还是写信

let MyApp = {
a: function() {
  //do Something with this.foo;
},
b: function() {
  //do something with this.foo;
}
}
myApp.foo = document.getElementById('bar')
myApp.a();
myApp.b();

---

如果只在一个函数中使用

foo

var，则无需声明它，globalI将在函数中声明它。除非它是一个大的静态值列表，或者是不可变的，否则我不会尝试全局存储它，通常最好在可能的情况下限制范围。你能在这里发布你的简化代码吗？由于它依赖于系统，每次调用函数时都会搜索

foo

。请注意，如果动态更新DOM，则使用全局变量与函数局部变量的行为可能会有所不同。如果只在一个函数中使用

foo

变量，则无需在函数中声明它，globalI将在函数中声明它。除非它是一个大的静态值列表，或者是不可变的，否则我不会尝试全局存储它，通常最好在可能的情况下限制范围。你能在这里发布你的简化代码吗？由于依赖于系统，

foo

将在每次调用函数时进行搜索。请注意，如果动态更新DOM，则使用全局变量与函数局部变量的行为可能会有所不同。