jQuery y "Código organizado"

Question

Últimamente he tenido problemas para comprender la mejor manera de organizar el código jQuery. Hice otra pregunta antes y no creo que fuera lo suficientemente específica (found in this question here).

Mi problema es que cuanto más rico que realice una solicitud, más rápido del lado del cliente se sale de control. Considere esta situación ...

//Let's start some jQuery 
$(function() {   
    var container = $("#inputContainer"); 

    //Okay let's list text fields that can be updated 
    for(var i=0; i < 5; i++) { 

     //okay let's add an event for when a field changes 
     $("<input/>").change(function() { 

      //okay something changed, let's update the server 
      $.ajax({ 
       success:function(data) { 

        //Okay - no problem from the server... let's update 
        //the bindings on our input fields 
        $.each(container.children(), function(j,w) { 

         //YIKES!! We're deep in here now!! 
         $(w).unbind().change(function() { 

          //Then insanity starts... 

         }); // end some function 

        }); //end some loop 

       } // what was this again? 

      }); //ending something... not sure anymore 

     }).appendTo(container); //input added to the page... logic WAY split apart 

    }; //the first loop - whew! almost out! 

}); //The start of the code!! 

Ahora esta situación no está demasiado lejos de ser imposible. No estoy diciendo que esta sea la manera correcta de hacerlo, pero no es raro encontrar varios niveles en un comando jQuery y comenzar a preguntar cuánto más lógica puede agregar antes de que la pantalla comience a derretirse.

Mi pregunta es ¿cómo se gestionan las personas o la organización de este para limitar la complejidad de su código?

I listed how I'm doing it in my other post ...

Answer 1

palillo de algunas de las funciones anon en funciones de ámbito global (o su propio objeto "nombre"), especialmente las funciones de re-utilizado, y comienza a parecerse menos a lo publicaste Algo así como a lo que te vinculaste.

Answer 2

Bueno, para empezar, tener un buen IDE que entienda javascript puede ser de gran ayuda, aunque solo sea para identificar demarcaciones coincidentes (llaves, parens, etc.).

Si el código empieza a ser realmente tan compleja, considere la posibilidad de hacer su propio objeto estático para organizar el desorden - usted no tiene que trabajar tan duro para mantener todo en el anonimato.

var aCustomObject = { 
    container: $("#inputContainer"), 
    initialize: function() 
    { 
     for(var i=0; i < 5; i++) 
     { 
      $("<input/>").changed(aCustomObject.changeHandler); 
     } 
    }, 
    changeHandler: function(event) 
    { 
     $.ajax({success: aCustomObject.ajaxSuccessHandler}); 
    }, 
    ajaxSuccessHandler: function(data) 
    { 
     $.each(aCustomObject.container.children(), aCustomObject.updateBindings) 
    }, 
    updateBindings: function(j, w) 
    { 
     $(w).unbind().changed(function(){}); 
    } 
} 
aCustomObject.initialize(); 

Answer 3

Hasta ahora, lo hago de esta manera:

// initial description of this code block 
$(function() {   
    var container = $("#inputContainer"); 

    for(var i=0; i < 5; i++) { 
     $("<input/>").changed(inputChanged).appendTo(container); 
    }; 

    function inputChanged() { 
     $.ajax({ 
      success: inputChanged_onSuccess 
     }); 
    } 

    function inputChanged_onSuccess(data) { 
     $.each(container.children(), function(j,w) { 
      $(w).unbind().changed(function() { 
      //replace the insanity with another refactored function 
      }); 
     }); 
     } 
}); 

En JavaScript, las funciones son objetos de primera clase y por lo tanto se pueden utilizar como variables.

Answer 4

En mi opinión, el método descrito por BaileyP es el que utilizo para comenzar, entonces normalmente abstraigo todo en trozos más reutilizables, especialmente cuando algunas funcionalidades se expanden hasta el punto en que es más fácil abstraerlas a un plugin. tenerlo específico para un sitio.

Como siempre y cuando mantenga los grandes bloques de código en un archivo separado y codificados muy bien a continuación, puede terminar con una sintaxis muy limpia.

// Page specific code 
jQuery(function() { 
    for(var i = 0; i < 5; i++) { 
     $("<input/>").bindWithServer("#inputContainer"); 
    } 
}); 

// Nicely abstracted code 
jQuery.fn.bindWithServer = function(container) { 
    this.change(function() { 
      jQuery.ajax({ 
       url: 'http://example.com/', 
       success: function() { jQuery(container).unbindChildren(); } 
      }); 
    }); 
} 
jQuery.fn.unbindChildren = function() { 
    this.children().each(function() { 
     jQuery(this).unbind().change(function() {}); 
    }); 
} 

Answer 5

Sólo quiero añadir a lo que se ha mencionado anteriormente que esto:

$.each(container.children(), function(j,w) { 
    $(w).unbind().change(function() { ... }); 
}); 

se pueden optimizar para:

container.children().unbind().change(function() { ... }); 

Se trata de encadenamiento, una gran manera de simplificar el código .

Answer 6

describí mi acercamiento in your other post.Breve formulario:

• no se mezclan Javascript y HTML
• clases de uso (básicamente empezar a ver a su aplicación como una colección de widgets)
• sólo tienen una sola ready $ (document) (...) bloquean
• enviar casos de jQuery en sus clases (en lugar de utilizar plugins)

Answer 7

Alguien ha escrito una entrada en el tema.

jQuery Code Does not have to be Ugly

Por ejemplo, el autor, Steve Wellens, sugiere no utilizar funciones anónimas, ya que hace que el código más difícil de leer. En su lugar, empuje la referencia de funciones en los métodos de jQuery, así:

$(document).ready(DocReady); 

function DocReady() 
{  
    AssignClickToToggleButtons(); 
    ColorCodeTextBoxes(); 
} 

Otra comida para llevar del artículo es asignar un objeto jQuery a una variable concreta, lo que hace que el código más limpio, menos dependiente del jQuery real objeto, y más fácil de decir lo que una cierta línea de código está haciendo:

function ColorCodeTextBoxes() 
{ 
    var TextBoxes = $(":text.DataEntry"); 

    TextBoxes.each(function() 
    { 
     if (this.value == "") 
      this.style.backgroundColor = "yellow"; 
     else 
      this.style.backgroundColor = "White"; 
    }); 
} 

Answer 8

uso http://coffeescript.com/;)

 
$ -> 
    container = $ '#inputContainer' 
    for i in [0...5] 
    $('<input/>').change -> 
     $.ajax success: (data) -> 
     for w in container.children() 
      $(w).unbind().change -> 
      alert 'duh'