¿Cuál es la razón detrás de JSLint diciendo que hay "demasiadas declaraciones var"

Question

JSLint (con la bandera OneVar encendido) está decayendo poco de código javascript que tengo con lo siguiente:

Problem at line 5 character 15: Too many var statements.

estoy feliz de corrija estos errores, pero me gustaría saber si lo estoy haciendo por rendimiento o porque es solo una mala práctica y tiene un gran potencial para introducir errores en mi código de JavaScript. ¿Cuál es la razón detrás de la bandera onevar?

Miré los documentos JSLint para el var keyword pero no habla específicamente sobre por qué varias instrucciones var en la misma función son malas.

Aquí hay un intento de ejemplo. Explicar cómo el código se beneficiará de tener sólo 1 comunicado 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 no tiene campo de bloqueo. En otros idiomas (como c), si declaras una variable en la declaración if, no puedes acceder a ella fuera de ella, pero en javascript puedes. El autor de JSLint cree que es una mala práctica, ya que usted (u otros lectores) pueden confundirse y pensar que ya no puede acceder a la variable, pero en realidad sí puede. Por lo tanto, debe declarar todas sus variables en la parte superior de la función.

Answer 2

Sólo una conjetura aquí, pero puede ser el momento para functional decomposition. Las funciones deben hacer una cosa y hacerlo bien.

Demasiados vars es sugestivo de una función que está tratando de hacer demasiado. O un caso donde deberías estar usando una matriz.

Answer 3

Si la opción "onevar" se establece en verdadero si solo se permite una sentencia var por función.

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

Answer 4

La idea es que debe usar un objeto en lugar de vars individuales. Entonces, ¿dónde tienes:

var x = arg + 1, 
    y = cache.GetItem('xyz'); 

Cambiar a:

var dimensions = {}; 
dimensions.x = arg + 1; 
dimensons.y = cache.GetItem('xyz'); 
dimensions.request = ... 

A continuación, puede acceder a estas variables a través del objeto, su más ordenado para tener un objeto por la función de contener que las variables funciones. Entonces no recibirás la advertencia.

Answer 5

Sólo declaran sus VARs en un lugar como este:

var request,x,y; 

Answer 6

La razón oficial is here, por Douglas Crockford.

Para citar:

En muchos idiomas, un bloque introduce un endoscopio. Las variables introducidas en un bloque no son visibles fuera del bloque.

En JavaScript, los bloques no introducen un alcance. Solo hay ámbito de funciones. Una variable introducida en cualquier lugar de una función es visible en todas partes de la función. Los bloques de JavaScript confunden a los programadores con experiencia y provocan errores porque la sintaxis familiar es una promesa falsa.

JSLint espera bloques con la función, if, switch, while, for, do, y try statements y en ninguna otra parte.

En los lenguajes con alcance de bloque, generalmente se recomienda que las variables se declaren en el sitio de primer uso. Pero como JavaScript no tiene ámbito de bloque, es más prudente declarar todas las variables de una función en la parte superior de la función. Se recomienda utilizar una única declaración var por función. Esto se puede rechazar con la opción vars .

Answer 7

El razonamiento ya está descrito.

recomendación es usar este formulario:

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

o esto:

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

Pero esto no se ve muy agradable, especialmente si desea documentar VARs.

lo que sólo puede desactivar esta advertencia temporarly:

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

Advertencia: asegúrese de que esto se hace en la parte superior de una función.

Creo que esto se hace porque jslint no pudo determinar de manera confiable si los vars se declararon en la parte superior de la función o no.