グローバルに宣言するのではなく、$（document）.readyの内部で変数をインスタンス化するのは悪い習慣ですか？

Question

私はコード内でグローバル変数の使用を避けようとしていますので、$(document).readyの中でそれらを宣言し、それらを$(document).readyの外の関数にパラメータとして渡し、それらを更新して戻ります$(document).readyの内部の変数を操作するそれらの関数から更新された値。

もう1つの方法は変数を格納するために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の内部の変数を操作します。

それは確かにちょっと変です。

$(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グローバル変数を持っていない追加のボーナスと -

これを改善するための最も簡単な方法は、同様にreadyハンドラ内で関数宣言を移動し、ちょうどそこに直接変数にアクセスすることですscanValidationを再利用できるようにしたいので、それ自身の配列で他の場所からも呼び出すことができるようにするには、バリデーターを作成するファクトリ関数を作成することをお勧めします。こうすることで、配列の属する場所が宣言され、関数のユーザーはそれらの状態を格納する必要がなくなります。