Quelle est la raison derrière JSLint en disant qu'il y a "trop d'instructions var"

Question

JSLint (avec le onevar drapeau activé) est de repérage un peu de code javascript que j'ai avec les éléments suivants:

Problème à la ligne 5 de caractère à 15: Trop de var consolidés.

Je suis heureux de corriger ces erreurs, mais je voudrais savoir, suis-je en train de faire pour la performance ou parce que c'est une mauvaise pratique et a un plus grand potentiel d'introduire des bugs dans mon code javascript. Quelle est la raison derrière la onevar drapeau?

J'ai regardé le JSLint docs pour le mot-clé var , mais il ne veut pas parler spécifiquement de pourquoi de multiples var déclarations dans la même fonction sont mauvais.

Ici, une tentative d'un exemple. Expliquer comment le code avantage de n'avoir que des 1 instruction var:

function Test(arg) {
   var x = arg + 1,
       y = cache.GetItem('xyz');
   if (y !== null) {
      // This is what would cause the warning in JSLint
      var request = ajaxPost(/* Parameters here */);

   }
}

Answer 1

Javascript n'a pas de portée de bloc. Dans d'autres langues avec (comme c), si vous déclarez une variable dans l'instruction if, vous ne pouvez pas y accéder en dehors de celle-ci, mais en javascript, vous le pouvez. L'auteur de JSLint estime que c'est une mauvaise pratique, car vous (ou d'autres lecteurs) pourriez vous embrouiller et pensez que vous ne pouvez plus accéder à la variable, mais que vous le pouvez réellement. Par conséquent, vous devez déclarer toutes vos variables en haut de la fonction.

Answer 2

La raison officielle est ici, par Douglas Crockford.

Pour citer:

Dans de nombreuses langues, un bloc présente un champ d'application. Les Variables introduites dans un bloc ne sont pas visibles à l'extérieur du bloc.

En JavaScript, les blocs de ne pas introduire une portée. Il y a seulement la fonction de la portée. Une variable introduite dans une fonction visible partout dans la fonction. JavaScript blocs de confondre les programmeurs expérimentés et conduire à des erreurs parce que la syntaxe familière fait une fausse promesse.

JSLint attend blocs avec la fonction, si, switch, while, for, do, et try et nulle part ailleurs.

Dans les langues avec le bloc de portée, il est généralement recommandé que les variables d'être déclaré sur le site de la première utilisation. Mais parce que le JavaScript n'a pas de bloc de portée, il est plus sage de déclarer toutes d'une fonction variables au sommet de la fonction. Il est recommandé qu'un seul instruction var être utilisé par la fonction. Ce peut être décliné avec les vars option.

Answer 3

Il suffit de déclarer vos vars à un endroit comme celui-ci:

 var request,x,y;
 

Answer 4

Si l'option "onevar" est définie sur true, une seule instruction var par fonction est autorisée.

 if (funct['(onevar)'] && option.onevar) {
    warning("Too many var statements.");
}
 

Answer 5

Le raisonnement est déjà décrit.

La recommandation est d'utiliser ce formulaire:

var myVar1 = document.getElementById("myDiv1"),
  myVar2 = document.getElementById("myDiv2");

ou ceci:

var myVar1, myVar2;
myVar1 = document.getElementById("myDiv1");
myVar2 = document.getElementById("myDiv2");

Mais ce n'est pas très agréable, surtout si vous souhaitez document de vars.

De sorte que vous pouvez désactiver cet avertissement temporairement:

  /*jslint vars: true*/
  /**
   * @returns {HTMLDivElement}
   */
  var myVar1 = document.getElementById("myDiv1");
  /**
   * @returns {HTMLDivElement}
   */
  var myVar2 = document.getElementById("myDiv2");
  /*jslint vars: false*/

Avertissement: assurez-vous que cela est fait dans le haut d'une fonction.

Je pense que c'est à cause jslint ne pouvais pas déterminer de manière fiable si vars ont été déclarés en haut de fonction ou pas.