Javascript 全局存储查询选择器是否总是一种糟糕的做法？

我读了很多关于全局变量的坏习惯，我理解其中的原因。然而，在某些情况下，这似乎要容易得多。这就是我的情况和问题

我有一些函数可以将一组元素动画化（实际上我使用Rico St.Cruz的query.transit插件），比如：

$element_1 = $("#element_1");
$element_2 = $("#element_2");
$element_3 = $("#element_3");
$element_4 = $("#element_4");

function animate_1()
{
    // do something with every element
    $element_1.transition( {…}, 100, 'easeOutSine' )
    $element_2.transition( {…}, 150, 'easeOutExpo' )
    $element_3.transition( {…}, 100, 'easeOutSine' )
    $element_4.transition( {…}, 200, 'easeOutBack' )
}

function animate_2()
{
    // do something with every element
    $element_1.transition( {…}, 100, 'easeOutSine' )
    $element_2.transition( {…}, 150, 'easeOutExpo' )
    $element_3.transition( {…}, 100, 'easeOutSine' )
    $element_4.transition( {…}, 200, 'easeOutBack' )
}

function animate_3()
{
    // do something with every element
    $element_1.transition( {…}, 100, 'easeOutSine' )
    $element_2.transition( {…}, 150, 'easeOutExpo' )
    $element_3.transition( {…}, 100, 'easeOutSine' )
    $element_4.transition( {…}, 200, 'easeOutBack' )
}

这是我目前的解决方案，它工作得很好，但是，它使用元素作为全局变量，我的.js文件在我的页面结束后嵌入。 如果全局变量是不好的做法，那么最好怎么做？我知道我可以在每个函数中定义选择器，从而重复相同的声明4次，这在我看来很愚蠢。我期待您对这个generell问题的反馈。

大多数情况下，您可以通过将代码包装在立即执行的函数表达式中来避免污染全局名称空间：

请注意，这些函数现在也是局部作用域，因此不能从内联事件处理程序引用它们。这是一件好事；-）

大多数情况下，通过将代码包装到立即执行的函数表达式中，可以避免污染全局名称空间：

请注意，这些函数现在也是局部作用域，因此不能从内联事件处理程序引用它们。这是一件好事；-）

大多数情况下，通过将代码包装到立即执行的函数表达式中，可以避免污染全局名称空间：

请注意，这些函数现在也是局部作用域，因此不能从内联事件处理程序引用它们。这是一件好事；-）

大多数情况下，通过将代码包装到立即执行的函数表达式中，可以避免污染全局名称空间：

---

---

请注意，这些函数现在也是局部作用域，因此不能从内联事件处理程序引用它们。这是一件好事；-）

我更关心的是使代码干涸，而不是全局变量；）你能解释得更清楚一点吗？@Garavani的复制问题不在于“全局变量”，而在于“复制和粘贴/复制”。（全局变量可能只是模块级变量，作为相关属性公开，代码中同样的问题也会存在。）@Rory你能给我举个例子，说明你是如何处理这段代码的吗？谢谢你的帮助！我更关心的是使代码干涸，而不是全局变量；）你能解释得更清楚一点吗？@Garavani的复制问题不在于“全局变量”，而在于“复制和粘贴/复制”。（全局变量可能只是模块级变量，作为相关属性公开，代码中同样的问题也会存在。）@Rory你能给我举个例子，说明你是如何处理这段代码的吗？谢谢你的帮助！我更关心的是使代码干涸，而不是全局变量；）你能解释得更清楚一点吗？@Garavani的复制问题不在于“全局变量”，而在于“复制和粘贴/复制”。（全局变量可能只是模块级变量，作为相关属性公开，代码中同样的问题也会存在。）@Rory你能给我举个例子，说明你是如何处理这段代码的吗？谢谢你的帮助！我更关心的是使代码干涸，而不是全局变量；）你能解释得更清楚一点吗？@Garavani的复制问题不在于“全局变量”，而在于“复制和粘贴/复制”。（全局变量可能只是模块级变量，作为相关属性公开，代码中同样的问题也会存在。）@Rory你能给我举个例子，说明你是如何处理这段代码的吗？谢谢你的帮助！对我来说，到目前为止还不起作用-（动画函数必须存储在一个外部脚本中，在这个脚本中，许多页面和ajax内容必须得到它们。现在我得到的错误类型是：can't get variable animate_3（）…我将尝试试用您的代码，稍后再回来。谢谢您！@Garavani是的，这与我在最后一行中描述的效果类似。如果您希望当前源模块可以访问函数，则它们必须是全局的，或者是模块和/或其自身为全局的类型的一部分。感谢Alnitak的回答和支持解释。虽然我担心不能这样做。所以我想我会把它们放在全局范围内。进一步说，所有的动画元素都是一样的，所以在我的情况下，它们会被覆盖是件好事。模块认为我会试着去理解和阅读……对我来说，它目前还不起作用-（动画函数必须存储在一个外部脚本中，在这个脚本中，许多页面和ajax内容必须得到它们。现在我得到的错误类型是：can't get variable animate_3（）…我将尝试试用您的代码，稍后再回来。谢谢您！@Garavani是的，这与我在最后一行中描述的效果类似。如果您希望当前源模块可以访问函数，则它们必须是全局的，或者是模块和/或其自身为全局的类型的一部分。感谢Alnitak的回答和支持解释。虽然我担心不能这样做。所以我想我会把它们放在全局范围内。进一步说，所有的动画元素都是一样的，所以在我的情况下，它们会被覆盖是件好事。模块认为我会试着去理解和阅读……对我来说，它目前还不起作用-（动画函数必须存储在一个外部脚本中，在这个脚本中，许多页面和ajax内容必须得到它们。现在我得到的错误类型是：can't get variable animate_3（）…我将尝试试用您的代码，稍后再回来。谢谢您！@Garavani是的，这与我在最后一行中描述的效果类似。如果您希望当前源模块可以访问函数，则它们必须是全局的，或者是模块和/或其自身为全局的类型的一部分。谢谢

(function() {

     // declare variables here
     var $_element_1 = ...;

     // use them here
     function animate_1() {
         ...
     }

     // register event handlers
     ...
 })();  // invoke the function