Avisar de contenido inadecuado

Javascript y jQuery: Consejos y Buenas Practicas (Parte II)

{
}

Hace unas semanas iniciamos una serie de 2 posts para hablar de lo que consideramos que son unas buenas practicas para desarrollar codigo Javascript con la libreria jQuery.

http://stc.obolog.net/multimedia/fotos/309000/308801/308801-209198.jpg

Con este post cerramos la serie y profundizamos un poco más en el tema

En el primer post de esta serie comentamos algunas generalidades que nos pueden servir de base a la hora de desarrollar un código JS eficiente. En este segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros desarrollos.

Asi que, ahi vamos...

Practicas eficientes

  • Checkear la disponibilidad de un objeto antes de acceder a él. Muchos de los errores en Javascript se deben a que se intenta acceder a elementos o métodos que no existen en un determinado momento del periodo de ejecución. Para solucionar esto basta con realizar un pequeña comprobación antes de utilizar dicho elemento o método.

    Ejemplo:

    			

    if ( $('#signup').length ) {
    $('#signup input').change ( function () {
    alert ("Acabas de poner " + $(this).val() );
    });
    }

  • Evita el uso de variables globales. A fin de evitar el uso de variables globales, podemos utilizar data, un método de jQuery que nos permite mantener relaciones entre valores y elementos DOM.

    Por ejemplo podemos guardar un dato en el objeto document de esta forma

    			

    $(document).data('id_country',3) ,

    Y acceder al dato de esta leer el dato de esta otra

    			

    $(document).data('id_country')

    Aunque lo suyo realmente es aprovechar la terminologia de objetos y ubicar las variables en su contexto

    Ejemplo:

    			

    var mySite = {
    general_1 : 100 ,
    general_2 : 200,

    myObject1 : {

    local_1 : 500,
    funcionLocal : function() {
    var local_2 = 600;
    console.log ("estoy en funcionLocal");
    console.log ("local_1=" + mySite.myObject1.local_1);
    console.log ("local_2=" + local_2);
    }

    },

    init : function() {
    console.log ("estoy en init");
    this.funcionalidad1();
    this.myObject1.funcionLocal();
    },

    funcionalidad1 : function() {
    console.log ("estoy en funcionalidad1");
    console.log ("general_1=" + this.general_1);
    console.log ("general_2=" + this.general_2);
    }
    }

  • Definir siempre las variables con VAR , incluso dentro de los FOR, de esta forma nos aseguramos que la variable tendrá el ambito que le corresponda. Si no se pone var se toma la variable como global.

    Mala declaracion de variables para el FOR

    			

    var i=0; // Creates a global variable

    function test() {
    for (i=0; i<10; i++) {
    // do something
    }
    }

    test();

    alert(i); // The global variable i is now 10!

    Buenas declaraciones de variables para el FOR

    			

    var i=0; // Creates a global variable

    function test() {
    var i=0;
    for (i=0; i<10; i++) {
    // do something
    }
    }

    function test2() {
    for (var i=0; i<10; i++) {
    // do something else
    }
    }

    test();
    test2();

    alert(i); // The global variable i is still 0!

  • Usa FOR en vez de EACH. Por lo general las funciones nativas de Javascript son mas rapidas que las derivadas de librerias

    Ejemplos:

    			

    var array = new Array ();
    for (var i=0; i<10000; i++) {
    array[i] = 0;
    }

    // Mas lento
    $.each (array, function (i) {
    array[i] = i;
    });

    // Mas rapido
    var l = array.length;
    for (var i=0; i<l; i++) {
    array[i] = i;
    }

  • Para concatenaciones largas de cadenas, mejor JOIN() que CONCAT(). JOIN devuelve texto y CONCAT devuelve un array.

    Ejemplos:

    			

    var array = [];
    for (var i=0; i<=1000; i++) {
    array[i] = '<li>'+i+'</li>';
    }

    // JOIN devuelve texto
    $('#list').html ( array.join (''));

    // CONCAT devuelve array
    var array_concat = array.concat('');

  • Return FALSE Si no devuelves FALSE en la funcion la pagina salta al top, por eso a la hora de capturar eventos conviene devolver FALSE al final para que haga lo que nosotros definimos y nada mas

    En vez de esto:

    			

    $('#item').click (function () {
    // stuff here
    });

    Mejor esto:



    $('#item').click (function () {
    // stuff here
    return false;
    });

  • Usar correctamente el tag SCRIPT. El atributo LANGUAGE está deprecado en el tag <script>. La forma correcta de crear un bloque de código javascript es:


    <script type="text/javascript >
    // code JS here
    <script>

  • La selección mas rápida es por ID. Siempre el selector más rápido y que menos iteraciones produce es la búsqueda por un #id, ya que simplemente lanza un document.getElementById(), lo que al ser nativo nos asegura un tiempo de respuesta mínimo y un mínimo consumo de proceso.

    Por ejemplo, con este codigo:



    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" name="light" value="red" /> Red</li>
    <li><input type="radio" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" name="light" value="green" /> Green</li>
    </ul>
    <input id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    En vez de esto:

    			

    // Más lento
    var traffic_button = $('#content .button');

    Mejor esto:



    // Más rápido
    var traffic_button = $('#traffic_button');

    Para acceder a varios elementos, siempre que podamos debemos hacerlo partiendo de un #id, de esta forma nos aseguramos una iteración más ajustada.:



    var traffic_lights = $('#traffic_light input');

  • Usar tags delante de las clases. Al hacer selección de clases con jQuery, es recomendable indicar el tag del elemento solicitado ya que al hacer iternamente uso de document.getElementsByTagName() para localizarlos acotamos previamente los elementos en los que buscar las clases solicitadas.

    Por ejemplo, para el HTML del punto anterior, si queremos seleccionar el elemento radio con, la opción más rápida sería la siguiente:



    var active_light = $('#traffic_light input.on');

  • Usar la caché de objetos. Coger el hábito de guardar una variable con el valor de un objeto jQuery nos evita realizar una serie de comprobaciones innecesarias y que en scripts pesados pueden suponer un aumento de rendimiento importante.

    Seleccion poco eficiente de elementos:

    			

    $('#traffic_light input.on).bind('click', function(){...});
    $('#traffic_light input.on).css('border', '3px dashed yellow');
    $('#traffic_light input.on).css('background-color', 'orange');
    $('#traffic_light input.on).fadeIn('slow');

    Seleccion Eficiente de elementos:



    var $active_light = $('#traffic_light input.on');
    $active_light.bind('click', function(){...});
    $active_light.css('border', '3px dashed yellow');
    $active_light.css('background-color', 'orange');
    $active_light.fadeIn('slow');

  • Crear Objeto Global con resultados jQuery.. Si necesitamos utilizar una selección jQuery en diferentes funciones, se puede cachear en un objeto con ámbito global.

    Ejemplo:



    // Define an object in the global scope (i.e. the window object)

    window.$my = {

    // Initialize all the queries you want to use more than once
    head : $('head'),
    traffic_light : $('#traffic_light'),
    traffic_button : $('#traffic_button')
    };

    function do_something() {

    // Now you can reference the stored results and manipulate them
    var script = document.createElement('script');

    $my.head.append(script);
    // When working inside functions, continue to save jQuery results

    // to your global container.
    $my.cool_results = $('#some_ul li');
    $my.other_results = $('#some_table td');

    // Use the global functions as you would a normal jQuery result
    $my.other_results.css('border-color', 'red');
    $my.traffic_light.css('border-color', 'green');
    }

  • Aprovechar el encadenamiento. El encadenamiento pese a producir un amasijo de código que no contribuye a mejorar la lectura del código hace que nuestro Javascript sea más ligero y puede ayudar a mejorar el rendimiento de nuestros scripts.

    Ejemplo:



    var $active_light = $('#traffic_light input.on');

    $active_light.bind('click', function(){...})
    .css('border', '3px dashed yellow')
    .css('background-color', 'orange')
    .fadeIn('slow');

  • Usar subqueries siempre que se pueda. Si debemos realizar varias búsquedas sobre un elemento es altamente recomendable realizar un uso intensivo del método find() de jQuery para realizar las búsquedas. Mejoraremos el tiempo de respuesta al evitarnos búsquedas previas ya realizadas.

    Ejemplo:



    var $traffic_light = $('#traffic_light'),
    $active_light = traffic_light.find('input.on'),
    $inactive_lights = $traffic_light.find('input.off');

  • Limitar la manipulación directa del DOM. La idea general es crear exactamente lo que necesitas en memoria y luego actualizar el DOM

    Si necesitas crear una lista de elementos, en vez de :

    			

    var top_100_list = [...], // assume this has 100 unique strings
    $mylist = $('#mylist'); // jQuery selects our <ul> element

    for (var i=0, l=top_100_list.length; i<l; i++) {
    $mylist.append('<li>' + top_100_list[i] + '</li>');
    }

    Creamos la lista de elementos en un string antes de insertarlo en el DOM



    var top_100_list = [...], // assume this has 100 unique strings
    $mylist = $('#mylist'), // jQuery selects our <ul> element
    top_100_li = ""; // This will store our list items

    for (var i=0, l=top_100_list.length; i<l; i++) {
    top_100_li += '<li>' + top_100_list[i] + '</li>';
    }

    $mylist.html(top_100_li);

  • Usar JSON. Para guardar estructuras de datos o enviar/recibir estructuras de datos via AJAX mejor JSON que XML

Y hasta aqui la segunda parte y el final de la serie de consejos y buenas practicas para desarrollo con Javascript y jQuery.

¿Que te han parecido los puntos aqui comentados? ¿Algun punto que creas que falta en esta lista?.

Enlaces y más

{
}
{
}

Comentarios Javascript y jQuery: Consejos y Buenas Practicas (Parte II)

Buenos consejos, y creo que el mejor consejo sera darse tiempo de conocer tanto a JS como a JQuery, ya que he visto un efermiso uso de jQuery ya que como el uso de each y muchas otras funciones que tiene jQuery para facilitar o simplemente para lograr y seguier el encadenamiento se usa.. en algun blog un usuario decia que no podia modificar la clase CSS por javaScript por que el daba Element.class="miCSS" y no funcionaba, al final del post ofrese la alternativa $(Element).css();,  le comento pues solo es cuestion de poner Element.className="miCSS" explicandole que con .class no funciona ya que esta es una palabra recervada y ninguna propiedad se puede llamar asi, y en los 8 años que llevo conociendo JS nunca me ha fallado className en ningun explorador, y el chavo me contesta... amm pero mejor lo hago con $().css() no valla ser que en IE o FF no me funcione ¬¬.... es obio que esto llevara mas trabajo a nivel de proceso para hacer lo mismo, con pocas letras de diferencia.. obio className te funcionara en cualquier lado, pero al desconocer JS y sus diferencias entre exploradores se cree ciegamente que la oferta JQuery y es lo mejor y mas eficdiente de todo. siempre es dificil cuando uno aprede cuando ya uno esta en el ambito profesional pero no esta de mas tomarse un buen libro tanto de JS como jQuery para conocer las dos herramientas de verdad y no solo seguir una "tendencia"...
en cuanto a:
Usar JSON. Para guardar estructuras de datos o enviar/recibir estructuras de datos via AJAX mejor JSON que XML
depende mucho para que se usara y cuales seran nuestros alcances de nuestra aplicacion o servicio web, pieso que la mejor forma es codificar una libreria que solo con pasar parametros imprima ya sea un json o un xml con los datos que ser requiera si nos efocamos solo a JSON se esta oviando que nuestra aplicacion solo sera utilizada en un explorador que tal vez sea el caso, pero tal vez no tal ves sera consumida por otras tecnologias entoces alli el factor es XML ahora si que depende el proposito de servicio auque si estamos seguro que solo sera consumido en un explorador por JS la opcion mas viable y para mi eficiente es un JSON.... ha.. y al traer JSON del servidor no se le puede llamar AJAX.. ya que no usas XML... hay mil terminos pero creo que lo mas acertado es simplemente llamar peticiones XHR (XMLHttpRequest) asì ya el terminino de las tecnologias que recivamos no es afectada por nuestro termino.. AJAX Ajax, acrónimo de Asynchronous JavaScript And XML si no hay XML no hay AJAX.. a AJA y algo mas :P
pakos pakos 06/04/2010 a las 17:27
ups, perdon en el comentario de la manipulacion de clases CSS era $(Element).addClass();el que se comentaba, $(Element).css() es para manipular Element.sytle ¬¬U
pakos pakos 06/04/2010 a las 17:29
@Pakos, gracias por tus aportes y comentarios.
Totalmente de acuerdo en que hay que dedicarse a tiempo a conocer tanto Javascript nativo como jQuery. De esta forma podremos valorar mejor cual es la solución más eficiente en cada caso.
Tambien hay que tener en cuenta que jQuery nos facilita la creación de código y nos ayuda a que este sea mas compresible, asi que en algunos casos puede quedar justificada una solución menos eficiente con jQuery, en beneficio de un código más comprensible.
Respecto a lo que comentas de JSON y XML, siempre que podamos elegir, el formato JSON es más compacto y eficiente para enviar/recibir estructuras de datos via AJAX.
Por ultimo, comentar que aunque no sea del todo correcto hablar de peticiones AJAX cuando estamos hablando de JSON (ya que AJAX por definicion se refiere a transmision de XML), creo que está popularmente aceptado el termino AJAX para referirse a peticiones HTTP asincronas. Asi lo interpretan por ejemplo en jQuery al llamar ajax() el metodo que gestiona las peticiones asincronas. :-)
[...]h2 class="title">Javascript y jQuery: Consejos y Buenas Practicas http://www.pixelovers.com/javascript-jquery-consejos-buenas-practicas-parte-ii-521211 This entry was posted on febrero 18, 2011, 5:59 pm and is filed under Sin categoría. You can follow any responses to this entry through RSS 2.0. Puedes dejar una respuesta, o[...]
Excelente articulo, para tener en cuenta..
Gracias, Victor
Genial!! Gracias!
Diego Llinás Diego Llinás 17/09/2012 a las 16:56

Deja tu comentario Javascript y jQuery: Consejos y Buenas Practicas (Parte II)

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre