1

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

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

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

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

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

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


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

4 回答 4

3

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

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

<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>

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

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

让我们再举一个例子：

<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。

这里真正酷的是，即使点击发生得更晚，在调用 has hookItUplong-since 返回之后，我们调用时创建的函数hookItUp仍然可以访问我们传递给它的参数——当我们点击时element1，我们得到“这个message is for element1”，当我们点击 时element2，我们得到“And this one is for element2”。

这些称为闭包。你可以在我的博客上阅读更多关于它们的信息：闭包并不复杂

于 2013-08-08T21:06:45.830 回答
2

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

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

于 2013-08-08T21:04:41.757 回答
1

例如

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

. .

于 2013-08-08T21:08:31.980 回答
0

TJ Crowder 给出了一个关于范围界定的漂亮答案；只是补充一点，您还可以使用立即调用的函数表达式来创建带有 UI 元素的模块，即

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

...

UI.inferno.style = ...;
于 2013-08-08T21:20:28.363 回答