Question

警告！我是一个通过和通过的新闻

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

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

我所看到的只是简单地将它写在外面var inferno = document.getElementById("inferno");，但这远远不能奏效。

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

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


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

Answer 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 {1}}。

这里非常酷的事情是，即使点击发生的时间很晚，在调用hookItUp之后很久才返回，我们调用hookItUp时创建的函数仍然可以访问参数我们传递给它 - 当我们点击element1时，我们会收到“此消息是针对element1的”，当我们点击element2时，我们会得到“而这个是针对element2的。”

这些被称为闭包。您可以在我的博客上详细了解它们： Closures are not complicated

Answer 2

这样做会有效，但前提是声明在之后出现在元素实际出现的DOM中。尝试将<script>移至<body>的最后。

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

Answer 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");
}

。

Answer 4

T.J。克劳德给出了关于范围界定的漂亮答案;只是为了补充一点，你也可以使用一个立即调用的函数表达式来创建一个包含UI元素的模块，即

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

...

UI.inferno.style = ...;

我怎样才能创建变量，这样我就不必在将来的函数中重复自己

4 个答案: