在$（document）.ready內部實例化變量而不是全局聲明變量是不好的做法嗎？

Question

我試圖避免在我的代碼中使用全局變量，所以我試圖通過在$(document).ready中聲明它們並將它們作爲參數傳遞給$(document).ready之外的函數，更新它們，然後返回從這些函數更新的值來操作$(document).ready中的變量。

另一種解決方法是使用hidden輸入字段來存儲變量，但我也聽說這是不好的做法。

我想知道如果我應該只使用全局變量，按照我目前正在做的方式做，還是使用隱藏的輸入字段？

下面是我試圖完成的一個簡單例子。變量驗證是我希望能夠使用和更新的變量。

$(document).ready(function(){ 
    var validations = []; 
    $('#inp').keypress(function(e){ 
     if(e.which == 13){ 
      e.preventDefault(); 
      scanValidation(validations, function(valid){ 
       validations = valid; 
      }); 
     } 
    }); 
}): 

function scanValidation(valid, cb){ 
    var scanval = $('#inp').val(); 
    if(valid.includes(scanval)){ 
     //display error 
    } 
    else{ 
     var validarr = valid.slice(); 
     validarr.push(scanval); 
     var myData=JSON.stringify({ "name":"user1", "validations":validarr}); 
     //Makes an ajax call to see if the sent array validarr is a valid request 
     apiCall(myData,'scanValidation',function(decoded) { 
      if (decoded.Status!="ERROR") { 
       valid = validarr; 
      } 
      else { 
       //display error 
      } 
      return(cb(valid)); 

     }); 
    } 

} 

Answer 1

在下面立即執行的函數中聲明的任何變量都不在全局範圍內。

(function() { 

    var someVar = 'someValue'; 

    $(document).ready(function() { 

    }); 

})(); 

Answer 2

它是不好的做法，以實例的$(document).ready內部變量，而不是全局聲明它們？

不，一點都沒有！變量應該始終在需要的範圍內聲明，在其他地方無需聲明。

另一種方法是使用隱藏的輸入字段來存儲變量，但我也聽說這是不好的做法。

我從來沒有聽說過，但是這聽起來確實很糟糕。這與全局變量相同，但是出於某種奇怪的原因存儲在DOM中的全局變量。

我試圖避免在我的代碼中使用全局變量，所以我試圖通過宣佈他們的$(document).ready內，將它們作爲函數的參數的$(document).ready外，更新他們周圍使用工作，然後從這些函數中返回更新後的值來操作$(document).ready中的變量。

這的確，有點奇怪。

改善最簡單的方法是將函數聲明中ready處理程序中爲好，而直接訪問變量有 - 有沒有一個scanValidation全局變量的額外獎金：

$(document).ready(function() { 
    var validations = []; 
    function scanValidation() { 
     var scanval = $('#inp').val(); 
     if (validations.includes(scanval)) { 
      //display error 
     } else { 
      var validarr = validations.slice(); 
      validarr.push(scanval); 
      var myData = JSON.stringify({"name": "user1", "validations": validarr}); 
      // Makes an ajax call to see if the sent array validarr is a valid request 
      apiCall(myData, 'scanValidation', function(decoded) { 
       if (decoded.Status!="ERROR") { 
        validations = validarr; 
       } else { 
        //display error 
       } 
      }); 
     } 
    } 

    $('#inp').keypress(function(e){ 
     if(e.which == 13){ 
      e.preventDefault(); 
      scanValidation(); 
     } 
    }); 
}); 

如果你想使scanValidation可重用，以便它可以從其他地方以及它自己的數組中調用，我會建議創建一個工廠函數來創建驗證器，每個函數都是它自己的數組上的一個閉包。這樣，數組就被聲明在它所屬的位置，以便該函數的用戶不必爲其存儲狀態：

function makeScanValidator(display) { // any other configuration 
    var validations = []; 
    // returns closure 
    return function scanValidation(scanval) { // take it as an argument 
     if (validations.includes(scanval)) { 
      display(/* error */); 
     } else { 
      var validarr = validations.concat([scanval]); 
      var myData = JSON.stringify({"name": "user1", "validations": validarr}); 
      apiCall(myData, 'scanValidation', function(decoded) { 
       if (decoded.Status!="ERROR") { 
        validations = validarr; 
       } else { 
        display(/* error */); 
       } 
      }); 
     } 
    } 

$(document).ready(function() { 
    var validate = makeScanValidator(function display() { … }); 
    $('#inp').keypress(function(e){ 
     if(e.which == 13){ 
      e.preventDefault(); 
      validate(this.value); 
     } 
    }); 
});