我該如何進行變量設置，以免在以后的功能中重復自己

Question

警告！！ 我是徹頭徹尾的新手

好的，所以我知道有關全局變量的問題很多，我想這就是我想要的，但不完全是。 最近，我需要多次調用相同的代碼行。 document.getElementById("example").style或類似的小東西，但我需要不斷重復。

我的問題是我該如何做，以便在函數之外創建一個變量，以節省編寫這些行的時間？

我所看到的是像這樣簡單地將其寫在外面var inferno = document.getElementById("inferno"); 但這遠沒有奏效。

這是我的代碼，很簡單，因為我只是將其用作測試，但是有人可以幫助我嗎？

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


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

Answer 1

你有正確的主意。 但是請注意，該變量不必是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>

該代碼創建一個匿名函數，然后立即調用它，在內部運行代碼。

現在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的”。

這些稱為閉包。 您可以在我的博客上閱讀有關它們的更多信息： 關閉並不復雜

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

TJ Crowder給出了關於范圍界定的漂亮答案； 補充說一下，您還可以使用立即調用的函數表達式來創建帶有UI元素的模塊，即

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

...

UI.inferno.style = ...;

我該如何進行變量設置，以免在以后的功能中重復自己

問題描述

4 個解決方案

解決方案1
3 2013-08-08 21:06:45

解決方案2
2 2013-08-08 21:04:41

解決方案3
1 2013-08-08 21:08:31

解決方案4
0 2013-08-08 21:20:28

我該如何進行變量設置，以免在以后的功能中重復自己

問題描述

4 個解決方案

解決方案1 3 2013-08-08 21:06:45

解決方案2 2 2013-08-08 21:04:41

解決方案3 1 2013-08-08 21:08:31

解決方案4 0 2013-08-08 21:20:28

解決方案1
3 2013-08-08 21:06:45

解決方案2
2 2013-08-08 21:04:41

解決方案3
1 2013-08-08 21:08:31

解決方案4
0 2013-08-08 21:20:28