我怎样才能制作变量，这样我就不必在以后的函数中重复自己答案

【问题标题】：How can I make variables so that I don't have to repeat myself in future functions我怎样才能制作变量，这样我就不必在以后的函数中重复自己
【发布时间】：2013-08-08 21:02:51
【问题描述】：

警告！！我是个彻头彻尾的新手

好的，所以我知道有很多关于全局变量的问题，我认为这就是我正在寻找的，但不完全是。最近我需要多次调用相同的代码行。 document.getElementById("example").style 或类似的小东西，但我需要不断重复。

我的问题是，如何在函数之外创建一个变量，以节省编写这些行的时间？

我所看到的只是像var inferno = document.getElementById("inferno"); 这样在外面写，但这远非工作。

这是我现在的代码，它很简单，因为我只是将它用作测试，但是任何人都可以帮助我吗？

var inferno = document.getElementById("inferno");


function infernoClick () {
    inferno.style.backgroundColor="red";
}

【问题讨论】：

您的代码没有问题。这是你需要做的。

标签： javascript variables

【解决方案1】：

你的想法是对的。但请注意，变量不必是全局。它必须是所有想要使用它的代码都可以使用它的地方。

例如，这会创建一个全局：

<script>
var inferno = document.getElementById("inferno");

function infernoClick () {
    inferno.style.backgroundColor="red";
}

function somethingElse () {
    inferno.style.color="green";
}
</script>

（请注意，这需要在创建inferno 元素的标记之后。）

全局变量的问题在于它们可能会相互冲突，事实上，全局“命名空间”已经非常非常拥挤了。

您可以通过将需要 inferno 的代码封装在 范围函数 中来避免这种情况，如下所示：

<script>
(function() {
    var inferno = document.getElementById("inferno");

    function infernoClick () {
        inferno.style.backgroundColor="red";
    }

    function somethingElse () {
        inferno.style.color="green";
    }
})();
</script>

该代码创建一个匿名函数，然后立即调用它，运行其中的代码。

现在inferno 对于需要它的函数来说是“全局的”，但不是实际上是全局的。

让我们再举一个例子：

<script>
(function() {
    var outer = 42;

    function doSomethingCool() {
        var inner = 67;

        document.getElementById("someElement").onclick = function() {
            alert("inner = " + inner + ", outer = " + outer);
        };
    }

    // Can't use `inner` here, but can use `outer`
    alert("outer = " + outer);

    doSomethingCool();
})();
</script>

该代码将所有内容包装在一个作用域函数中，并且outer 变量可以在该作用域函数内的任何位置访问。它还有一个函数doSomethingCool，它有一个名为inner 的变量。 inner 只能在 doSomethingCool 内访问。看看doSomethingCool 做了什么：当someElement 被点击时，它连接了一个事件处理程序。它不调用这个函数，它只是把它挂起来。

真正酷的是稍后，当有人点击元素时，该函数可以访问该inner 变量。

事实上，你传递给函数的参数也是如此。最后一个例子：

<input type="button" id="element1" value="One">
<input type="button" id="element2" value="Two">
<script>
(function() {
    function hookItUp(id, msg) {
        document.getElementById(id).onclick = function() {
            alert(msg);
        };
    }

    hookItUp("element1", "This message is for element1");
    hookItUp("element2", "And this one is for element2");

})();
</script>

在那里，我们有一个接受几个参数的函数，我们调用它两次：一次将click 连接到element1，然后再次连接click 到element2。

这里真正酷的是，即使点击发生的时间很晚，在对 hookItUp 的调用很久以来返回之后，当我们调用 hookItUp 时创建的函数仍然可以访问我们传递给它的参数——当我们点击element1时，我们得到“这条消息是给element1的”，当我们点击element2时，我们得到“这个消息是给element2的。”

这些称为闭包。你可以在我的博客上阅读更多关于它们的信息：Closures are not complicated

【讨论】：

很酷，但这感觉就像你从头开始重新创建 jQuery
@mplungjan：事件处理程序对于初学者来说几乎是最容易理解的异步回调，而且由于 OP 没有使用 jQuery，我不得不使用 DOM...

【解决方案2】：

这会起作用，但前提是声明出现在 DOM 中元素实际出现的点之后。尝试将您的<script> 移动到<body> 的最后。

您可以做的另一件事是使用窗口“加载”事件来确保在您的代码运行之前看到整个 DOM。

【讨论】：

好的，所以我把它放在它出现的点之后，但是你能告诉我为什么我们这样做吗？就像我认为所有脚本等都保留在或的开头？
@LoganCerson: 不，事实上，标准建议是将脚本放在body 的最end 处，就在结束</body> 标记之前，除非你有特定的需要将它们放在更高的位置。这样脚本不会使您的页面看起来加载得比它需要的慢，并且您的脚本可能需要使用的所有元素都将存在。更多：YUI Best Practices for Speeding Up your Website
非常感谢，这对您有很大帮助！

【解决方案3】：

例如

var myGlobalVars = {"inferno":null,"othervar":null}; // globals in their own scope

function clickMe(varName,color) { // generic function
    myGlobalVars[varName].style.backgroundColor=color;
}

window.onload=function() {
  // initialise after the objects are available
  for (var o in myGlobalVars) myGlobalVars[o]=document.getElementById(o);
  // execute
  clickMe("inferno","red");
}

。 .

【讨论】：

【解决方案4】：

T.J. Crowder 给出了一个关于范围界定的漂亮答案；除此之外，您还可以使用立即调用的函数表达式来使用您的 UI 元素创建模块，即

var UI = (function() {
  ...
  return {
    inferno: document.getElementById("inferno");
  };
})();

...

UI.inferno.style = ...;

【讨论】：