Javascript/jQuery "Gotchas"

Question

¿Cuáles son algunos de los "errores" comunes de Javascript y/o jQuery que ha visto o ha pasado por alto?

A modo de ejemplo, se señaló a mí esta mañana que hay que tener cuidado con la raíz cuando se hace parseInt(), porque si su cadena comienza con un 0, la raíz será por defecto 8.

Answer 1

i se lo recomendaría a leer todo http://wtfjs.com/

Answer 2

Javascript

parseInt('0aaa') //still returns 0 
parseFloat('0.aaa') //still returns 0 

Este los más de un factor Uy. Cuando escribo una declaración de cambio, se me conoce que olvide poner un descanso en la declaración, lo que causa problemas.

var myvar = '1' 
switch (myvar) { 
    case '1': 
    alert(myvar); 
    case '2': 
    alert(myvar); 
    break; 
} 

porque se me olvidó la ruptura de la case '1' que recibirá la alerta dos veces.

Answer 3

Reemplazando .round()/.floor() o .ceil() con ~~ para recortar decimales es muy guapo.

En lugar de

Math.floor(Math.random() * 100); 

que hacen

~~(Math.random() * 100); 

Es sólo más corto y tiene un mejor rendimiento, incluso!

Answer 4

El libro de Douglas Crockford JavaScript: The Good Parts es una lectura excelente sobre el tema. Hay también las partes malas y terribles de Javascript en él :)

Answer 5

El alcance de 'esto'

Consideremos el siguiente ejemplo:

function myClass(message) { 
    this.message = message; 
    $('button').click(function(){ 
    this.onClick(); 
    });  
} 

myClass.prototype.onClick = function() { 
    alert(this.message); 
} 

Por supuesto, la línea 3 no funciona : this funciona por función, y la función definida en la línea 2 tendrá el botón seleccionado como this en lugar de la instancia de myClass. Hay una versión aún más disimulados:

function myClass(message) { 
    this.message = message; 
    $('button').click(this.onClick);  
} 

myClass.prototype.onClick = function() { 
    alert(this.message); 
} 

Este llama a la función correcta, pero this seguiría siendo el botón (porque this está determinado por la persona que llama, no por el hecho de que usted es un miembro de la función).La solución correcta es utilizar una variable intermedia, tal como self, para aplicar reglas de alcance sanos a this:

function myClass(message) { 
    this.message = message; 
    var self = this; 
    $('button').click(function() { self.onClick(); });  
} 

Tipo de colada

[] == ![] evalúa a verdadero por razones oscuras

Arrays y Propiedades

ElLa propiedad 10 solo funciona para las claves enteras en las matrices. Por ejemplo:

var a = [];  // a.length == 0 
a[0] = 'first'; // a.length == 1 
a['1'] = 'second'; // a.length == 2 
a['x'] = 'third'; // a.length == 2 <-- 'x' does not count 

Si bien sobre este tema, for(in) trabajos sobre matrices, pero atraviesa todos propiedades definidas en la matriz. Esto significa que su código JavaScript que usa for(in) para iterar a través de matrices dejará de funcionar repentinamente en ciertos navegadores cuando agregue ExtJS a su proyecto, porque ExtJS define Array.prototype.filter si no está presente (esto se conoce como parche de mono). Dado que ahora filter es una propiedad personalizada de cada objeto de matriz, todos sus bucles también se repiten a través de él. Auge.

La manera limpia de iterar a través de una matriz es usar la longitud y un incremento para el ciclo. O jQuery's $.each().

Answer 6

La mayor WTF que he encontrado en Javascript debe ser String.replace.

Tome este código, por ejemplo:

"An,example,of,a,comma,separated,sentence".replace(',', ' '); 

Esto produce una sentencia muy bien separados por espacios en lugar, ¿verdad?

Para mi gran sorpresa: no, no es así. Solo reemplaza la primera coma con un espacio, dejando el resto sin tocar. Si desea hacer una sustitución real, debe usar .replace(/,/g, ' ').

Por qué el método no se llama 'replaceFirst' es una incógnita.

Answer 7

Variable de alcance y variables de bucle es definitivamente un "gotcha". Esto ocurre muchas veces en la asignación de controladores de eventos en un bucle:

var lis= document.getElementsByTagName('li'), 
    imgs = document.getElementsByTagName('img'); 
for (i = 0; i < elements.length; i++) 
{ 
    elements[i].onclick = function() { 
     imgs[i].src = elements[i].innerHTML; 
    } 
} 

En el momento de la ejecución, imgs[i] estarán indefinidos, arrojando un error al intentar acceder a imgs[i].src. Lo mismo para elements[i] y su innerHTML.

Answer 8

globales implícitas son uno grande:

var x = 12, y = 14; 
function addOne(num) 
{ 
    x = num + 1; // since this is not declared with 'var', it is implied global 
    return x; 
} 

alert(addOne(y)); // alerts '15' 
alert(addOne(x));  // alerts '16' 

Es un ejemplo sencillo, y poco realista, pero demuestra el problema muy bien.

Answer 9

Un muy buen artículo fue recientemente por Elijah Manor en su blog, Enterprise jQuery. Está escrito en "errores" de Javascript para desarrolladores de C#. Es una serie parcial y hay una serie de buenos puntos que también "harán" que las personas se familiaricen con otros idiomas.

Échale un vistazo aquí: How Good C# Habits can Encourage Bad JavaScript Habits.

Answer 10

La declaración return debe tener un valor inmediatamente después de ella, o por lo menos a partir de la misma línea:

return 4; // returns 4 
return {}; // returns an empty object 
return { // returns an empty object 
};   
return  // returns undefined 
{ 
}; 

Answer 11

Ajax obtiene/mensajes a un URI estática pueden quedar almacenado en caché por el IE. Por lo tanto, debe agregar un parámetro cambiante, una forma rápida y fácil de agregar new Date().getTime()