jQuery et "code organisé"

Question

J'ai eu du mal ces derniers temps avec la compréhension de la meilleure façon d'organiser, jQuery. J'ai demandé à une autre question plus tôt et je ne pense pas que j'ai été assez précis (trouvé dans cette question ici).

Mon problème est que le plus riche que vous faites une demande, plus vite votre côté client devient hors de contrôle. Considérer cette situation...

//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!!

Maintenant, cette situation n'est pas trop loin d'être impossible. Je ne dis pas que c'est la bonne façon de le faire, mais il n'est pas rare de se retrouver à plusieurs niveaux vers le bas dans un jQuery commande et commence à me demander comment beaucoup plus logique peut ajouter avant que l'écran commence à fondre.

Ma question est de savoir comment sont les gens à la gestion de ce ou de l'organisation afin de limiter la complexité de leur code?

J'ai énuméré comment je vais le faire dans mon autre post...

Answer 1

Je veux juste ajouter à ce qui a été mentionné précédemment que ceci:

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

peut être optimisé pour:

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

Tout est une question de chaînage, un excellent moyen de simplifier votre code.

Answer 2

Jusqu'ici, je le fais comme ça:

 // 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, les fonctions sont des objets de première classe et peuvent donc être utilisées comme variables.

Answer 3

Tout d’abord, avoir un bon IDE comprenant le javascript peut s’avérer très utile, même s’il suffit d’identifier les démarcations correspondantes (accolades, parenthèses, etc.).

Si votre code commence à devenir vraiment complexe, envisagez de créer votre propre objet statique pour organiser le désordre. Vous n'avez pas à travailler si dur pour que tout reste anonyme.

 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 4

À mon avis, la méthode décrite par BaileyP est la méthode que j'ai utilisée pour commencer, puis je résume normalement le tout en morceaux plus réutilisables, en particulier lorsque certaines fonctionnalités se développent au point où il est plus facile de les résumer en un plug-in que de les spécifier spécifiquement. un site.

Tant que vous conservez les gros blocs de code dans un fichier séparé et bien codé, vous pouvez vous retrouver avec une syntaxe très simple.

 // 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

Quelqu'un a écrit un post sur le même sujet.

jQuery Code Ne doit pas être Laid

Par exemple, l'auteur, Steve Wellens, suggère de ne pas utiliser les fonctions anonymes, car il rend le code plus difficile à lire. Au lieu de cela, poussez la fonction de référence dans les méthodes jQuery, comme suit:

$(document).ready(DocReady);

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

Un autre plat à emporter à partir de l'article consiste à attribuer à un objet jQuery pour un béton variable, ce qui rend le code plus propre, moins dépendante sur le réel de l'objet jQuery, et plus facile à dire qu'une certaine ligne de code est en train de faire:

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

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