buenos consejos y trucos para "racionalizar" su Javascript y jQuery

Question

Es obvio que tienen las técnicas básicas Minify y Packer ...

pero me preguntaba si hay algún técnicas poco de Javascript de código más pequeño (como las declaraciones alternativa si con ? y : etc. en ellos).

Luego, una vez que tengo código aerodinámico agradable (...) Voy a minify/empacar

Answer 1

Una técnica muy buena para ayudar a minifiers, es para pasar variables en una función de auto invocación:

(function(window, document, $, undefined) { 
     // all of your application logic goes in here 
}(window, window.document, jQuery)); 

Un minificador creará accesos directos para los argumentos, como a, b, c, d.

(function(a, b, c, d) { 
}(window, window.document, jQuery)); 

Ahora, window, document y jQuery (si se usa) y el undefined value se accede a menudo normalmente. Esto ayudará a disminuir el tamaño del archivo aún más.

Algunos buenos atajos de JavaScript se describen en this article.

Por ejemplo, use ~~ en lugar de Math.floor().

var floored = Math.floor(55.2115); // = 55 

var floored = ~~(55.2115); // = 55 

---

Otra cosa muy interesante es, que casi todos los intérpretes de JavaScript convertir números para usted. Por ejemplo, queremos tener un setTimeout que se dispara después de 3 minutos. En lugar de hacerlo como

setTimeout(function() { 
}, 180000); 

o 60 * 3 * 1000, sólo podemos llamar:

setTimeout(function() { 
}, 18e4); 

Lo que probablemente tiene mucho más sentido, en números mucho más grandes, pero de todos modos :-)

Answer 2

Nada vale la pena la molestia - con minificación y gzip, guardando un personaje aquí y dos definitivamente hay una microoptimización innecesaria. Puede guardar algunos bytes, sí, tal vez incluso cien o dos, pero a expensas de su tiempo de desarrollo, cuando podría estar haciendo algo increíble.

Answer 3

Lo que me gusta es

for(var i = arr.length;i--;) 

no ahorra mucho código, pero tiene dos ventajas:

• acceso .length sola vez
• "más rápido" que una tradicional for bucle

Pero solo funciona si el procesamiento el orden de la matriz no importa.

---

Creo que lo que probablemente todo el mundo sabe es cómo establecer los valores por defecto, utilizando lógica OR:

function(must, option) { 
    option = option || "defaultValue"; 
} 

Si option no está establecido, es undefined que evalúa a false. JavaScript devuelve el valor de la variable que cumple la expresión (o el valor de la última si las expresiones no se cumplen, creo). Por supuesto, depende de qué valores puede tener option, es decir, esto no funcionaría si un posible valor es false.

---

Una manera rápida de convertir las cadenas de números para los números es anteponiendo +. No es necesario usar, p. parseInt:

var n = +"123"; 
// instead of `var n = parseInt("123", 10)` 

Answer 4

me acaba de escribir el código de un modo claro y entendible a continuación, utilizar el cierre de Google o similar a optimizar y comprimirlo.

http://code.google.com/closure/

Cita del sitio de Cierre:

El Closure Compiler compila en código JavaScript compacto y de alto rendimiento. El compilador elimina el código muerto y reescribe y minimiza lo que queda para que se descargue y se ejecuta rápidamente. También comprueba la sintaxis, las referencias de variables y los tipos, y advierte sobre errores comunes de JavaScript.

Answer 5

if (conditional && conditional) { 
    doSomething(); 
} 

puede convertirse en:

conditional && conditional && doSomething(); 

Answer 6

Esta es una idea admirable. Pero creo que es más importante que el código sea legible, comprensible y mantenible, que optimizado para el tamaño. La totalidad de la versión minimizada de jQuery 1.5 tiene solo un tamaño de 85 KB. Esto es más pequeño que muchas imágenes en muchos sitios web.

Mucha gente escribir código como:

$('a#click_me').bind('click', function(){ 
    $(this).children('img').hide(); 
    ... etc... 
    $(this).parent().addClass('xyz'); 
}); 
$('a#click_me').css('width', '10px'); 
$('a#click_me').css('height', '10px'); 

en lugar de:

$('a#clickme').css({width: '10px', height: '10px'}).click(function(){ 
    var $this = $(this), href=this.href; 
    $('img', this).hide(); 
    ... etc ... 
    $this.parent().addclass('xyz'); 
}); 

es decir, utilizar los mapas de ({a: b, c: d}) cuando sea posible (por ejemplo, en css() arriba).

Use el encadenamiento $(selector).method1().method2().

Usar p. Ej. $('img', this) en lugar de $this.children('img');

No utilice continuamente el mismo selector, almacene el resultado en una variable (por ejemplo, $this).

En su caso, utilice el elemento de JavaScript, en lugar de jQuery uno, p.

href = this.href; rather than href = $(this).attr('href');