在JavaScript / jQuery中將DOM元素設置為全局變量是一種不好的編程習慣嗎？

Question

例如，我有這個HTML ：

<script src="test.js"></script>
<script>
$(document).ready(function() {
    initFields();
});
</script>

<input id="input" type="text">

而我的JS ：

var $input;

function initFields() {
    $input = document.getElementById("input"); //or $('#input) in jQuery
}

這樣，我可以隨時訪問$input.value （例如，提交表單或清理字段等時），以便變量可以重用。 我的疑問是：將DOM元素設置為全局變量是否被視為錯誤的做法？

Answer 1

有時全局變量是不可避免的，但始終令人遺憾。 我建議創建一個全局對象，並用對您要引用的DOM元素的引用填充它。

例如，在全球范圍內：

var $elements = {
    $input  : $('#input'),
    $header : $('#header'),
    // etc, etc
};

請記住，所有全局變量都只是window對象的屬性。 在javascript中創建全局變量的更大問題之一是您可能會意外覆蓋window上的屬性，這可能會導致嚴重的后果，難以調試。 如果您僅定義一個全局變量（如本例中所示），則可能不會遇到麻煩，但是如果您為不同的DOM元素或其他內容定義了數十個變量，則程序可能會很快變得難以維護，而且很難調試。