jQuery Refactoring/Maintenance

Question

J'ai cherché un peu autour de SO et n'ai pas trouvé de questions/réponses qui m'aident. Le problème est que les appels de ma fonction jQuery deviennent beaucoup trop volumineux pour être maintenus. Je me demande si je devrais refactoriser beaucoup plus ou s'il y a une meilleure façon de faire tous ces appels. Vous verrez comme je fais un appel, les fonctions anonymes qui sont des arguments pour la fonction finissent par être très grandes et rendent la lisibilité du code terrible. En théorie, je pourrais les décomposer en leurs propres fonctions, mais je ne sais pas si c'est une bonne pratique ou non. Voici un exemple de certains des jQuery jusqu'à présent:

$('#dialog').html('A TON OF HTML TO BUILD A FORM').dialog('option', 'buttons', { 'Save': function(){$.post('/use/add/', $('#use_form').serialize(), function(data){ ......There were 4 more lines of this but I'm saving you so you don't rip your eyeballs out hopefully you get the idea.....dialog('option','title','New Use').dialog('open'); 

Comme vous pouvez le voir depuis tant des fonctions que j'appelle les fonctions de prendre comme arguments, quand je crée des fonctions anonymes, je finis avec un énorme gâchis (il y avait environ 3 autres déclarations de fonctions anonymes dans ce code)

Dois-je simplement faire un tas de fonctions et les appeler pour les rendre plus lisibles. La seule raison pour laquelle je serais contre c'est parce que j'ai un tas de fonctions déclarées qui ne sont utilisées qu'une seule fois.

Merci d'avance pour l'aide!

Answer 1

Définissez les fonctions dans la bonne portée et ce n'est pas une grosse affaire.

var generateHTML = function() { 
    ... 
}; 
var somethingElse = function() { 
    ... 
}; 

... some more ... 

$('#dialog').html(generateHTML())...etc 

Il n'y a pas beaucoup d'autres choses que vous pouvez faire, sauf réorganiser votre code en général (par exemple, using an object oriented style) pour encapsuler le code de sorte qu'il est pas si compliqué.

Answer 2

Formatage, formatage, formatage! Avec une utilisation correcte des espaces votre code CAN regarder lisible:

$('#dialog'). 
    html('A TON OF HTML TO BUILD A FORM'). 
    dialog('option', 
     'buttons', { 
      'Save': function(){ 
       var callback = function(data){ 
        // There were 4 more lines of this 
        // but I'm saving you so you don't 
        // rip your eyeballs out hopefully 
        // you get the idea 
       } 
       $.post(
        '/use/add/', 
        $('#use_form').serialize(), 
        callback 
       ) 
      } 
     }). 
    dialog('option', 
     'title', 
     'New Use'). 
    dialog('open'); 

Ceci est juste comment je forme personnellement. Il y a d'autres façons, mais je suggère fortement de laisser les accolades ouvrantes et les virgules/points/+ en fin de ligne car javascript a tendance à ajouter automatiquement un ';' à la fin d'une ligne si elle pense que la ligne est une déclaration complète bien formée.

L'important n'est pas la règle de formatage que vous adoptez. L'important est d'être cohérent à ce sujet. À certains égards, Python avait raison: il est parfois bon de forcer les gens à indenter leur code (mais je déteste être forcé par Python).

Answer 3

Une façon évidente de maintenir la maintenabilité consiste à utiliser une sorte de formatage. Je comprends votre aversion pour nommer les fonctions utilisées seules, mais il est facile de contenir les noms. Le langage javascript pour imiter un champ d'action est d'envelopper le code en question dans une fonction anonyme qui est appelée immédiatement:

(function() { 
    var f = function (x) ... 
    var g = function (y, z) ... 
    // operations involving f and g 
}()); // called immediately 

Je préfère une autre forme, ce qui rend le fait que le code est exécuté tout de suite plus visible:

new function() { // called immediately 
    var f = function (x) ... 
    var g = function (y, z) ... 
    // operations involving f and g 
}; 

il y a une autre façon de créer des noms avec ceci:

new function (i, j, k) { 
    // functions f and g 
    f(i, g(j, k)); 
}(3, 4, 5); 

Answer 4

La seule raison pour laquelle je serais contre cette est parce que j'aurais un tas de fonctions déclarées qui ne sont utilisées qu'une seule fois.

Utilisation des fonctions anonymes que vous faites actuellement est vraiment pas différent de déclarer correctement scope des fonctions nommées, sauf qu'ils sont en ligne et de le rendre un peu plus difficile à déboguer dans de nombreux débogueurs JavaScript comme nom de fonction n'est pas affiché.

S'il existe des modèles pour vos fonctions anonymes sur plusieurs pages, je tenterais de refactoriser des fonctions nommées qui fourniraient une base commune aux fonctionnalités requises. Je serais enclin à éviter d'avoir de grandes chaînes de caractères html dans les appels de méthode jQuery ou incorporés dans les balises JavaScript <script> et de les conserver dans un emplacement distinct qui peut être facilement interrogé pour récupérer le contenu pertinent - cela pourrait être des fichiers texte,

Answer 5

Je tenterais de décomposer le code en plugins autant que possible et en fait de concevoir le code autour de ce principe. Je ne sais pas à quel point cette idée correspond à vos besoins.

Answer 6

Il est facile d'entrer dans le problème de chaînage sans fin de jQuery. Le chaînage des fonctions est bon s'il est utilisé modérément, ou il faut une éternité pour lire et comprendre le code qui a été écrit il y a 5 minutes. En ce sens, le formatage de votre code comme slebetman suggéré serait utile. De plus, le fait de définir vos fonctions comme suggéré par quelqu'un ou thenduks sera également d'une grande aide.

Si vous deviez marcher un mile supplémentaire dans vos efforts de refactoring, je vous suggère de considérer une sorte de modèles architecturaux tels que MVC ou MVP pour organiser votre code. Un List Apart a une belle article sur l'implémentation de MVC avec Javascript. S'il y a une séparation entre la vue et les modèles, cela permet facilement d'utiliser des événements personnalisés et beaucoup d'autres ajouts qui sont facilement réutilisables. Elle oblige aussi à penser en termes du modèle de domaine plutôt que des objets DOM (tables, lignes, divs) ou d'événements (cliquez, KeyUp), etc. Penser en termes du modèle de domaine et les événements associés tels que onPostRollback, onPostCreate ou onCommentAdded qui pourraient être applicable sur SO par exemple. jQuery a récemment ajouté le support pour les événements personnalisés de liaison et ce sont quelques bons articles (first, second) expliquant comment tos.

En général, il est difficile de réutiliser des vues, mais les modèles changent très peu entre les projets et est un domaine où nous pouvons obtenir une réutilisation maximale.