Refactoring Javascript

Question

J'ai beaucoup de code dans la zone d'admin de mon site qui est, fondamentalement juste des opérations de CRUD utilisant l'affichage d'AJAX.

Je me demandais si vous aviez des conseils sur refactorisation ces types de fonctions, soit dans des fonctions génériques ou des classes, etc.

Voici quelques exemples de code, bien que beaucoup de cela est reproduit dans d'autres fonctions avec juste différents ajax paramètres:

function BindAddMenuHeaderOption() { 
    $("#AddMenuHeaderOption").click(function (e) { 
     e.preventDefault(); 

     var headerOptionId = jQuery.trim($("#HeaderOptions").val()); 
     var menuHeaderId = jQuery.trim($("#MenuHeaderId").val()); 

     $.ajax(
     { 
      type: "POST", 
      url: "/Menu/AddMenuHeaderOption", 
      data: "menuHeaderId=" + menuHeaderId + "&headerOptionId=" + headerOptionId, 
      dataType: "html", 
      success: function (result) { 
       var domElement = $(result); 
       $("#ModalContent").empty(); 
       $("#ModalContent").append(domElement); 
       BindAllBehaviours(); 
      } 
     }); 
    }); 

} 

function BindAddMenuItem() { 
    $(".AddMenuItem").click(function (e) { 
     e.preventDefault(); 

     //get header id from link by removing addmenuitem from this.id 
     var currentId = $(this).attr("id").replace("AddMenuItem", ""); 

     //get itemnumber, itemname, itemdetails from textboxes with same header id 
     var restaurantId = jQuery.trim($("#RestaurantId").val()); 
     var itemNumber = jQuery.trim($("#ItemNumber" + currentId).val()); 
     var itemName = jQuery.trim($("#ItemName" + currentId).val()); 
     var itemDetails = jQuery.trim($("#ItemDetails" + currentId).val()); 

     $.ajax(
     { 
      type: "POST", 
      url: "/Menu/AddMenuItem", 
      data: "reastaurantId=" + restaurantId + "&menuHeaderId=" + currentId + "&itemNumber=" + itemNumber + "&itemName=" + itemName + "&itemDetails=" + itemDetails, 
      dataType: "html", 
      success: function (result) { 
       var domElement = $(result); 
       $("#MenuContainer").replaceWith(domElement); 
       var newNum = parseInt(itemNumber) + 1; 
       $("#ItemNumber" + currentId).val(newNum); 
       BindAllBehaviours(); 
      } 
     }); 
    }); 

} 

function BindUpdateMenuItem() { 
    $(".UpdateMenuItem").click(function (e) { 
     e.preventDefault(); 


     var restaurantId = jQuery.trim($("#RestaurantId").val()); 
     var itemNumber = jQuery.trim($("#UpdateItemNumber").val()); 
     var itemName = jQuery.trim($("#UpdateItemName").val()); 
     var itemDetails = jQuery.trim($("#UpdateItemDetails").val()); 

     var vars = GetHtmlParameters($(this)); 

     $.ajax(
     { 
      type: "POST", 
      url: "/Menu/UpdateMenuItem", 
      data: "reastaurantId=" + restaurantId + "&menuItemId=" + vars["menuItemId"] + "&itemNumber=" + itemNumber + "&itemName=" + itemName + "&itemDetails=" + itemDetails, 
      dataType: "html", 
      success: function (result) { 
       var domElement = $(result); 
       $("#MenuContainer").replaceWith(domElement); 
       BindAllBehaviours(); 
      } 
     }); 
    }); 

} 

Answer 1

Depuis tout ce code implique la soumission des groupes d'éléments INPUT en utilisant AJAX, vous pouvez essayer de les mettre dans des éléments de formulaire (si vous avez pas déjà) et en utilisant le jQuery Form Plugin pour les mettre à niveau vers AJAX. Cela vous donne également un comportement de repli si Javascript est désactivé pour une raison quelconque.

Answer 2

Vous pouvez briser les callbacks .ajax en petites fonctions en utilisant le niveau supérieur jQuery.post(url, [data], [callback], [type]).

Answer 3

nit mineure: Construire des arguments d'URL doivent généralement être fait par une méthode plutôt que par concaténation parce que vous pouvez vous assurer que vous êtes URL-échapper les valeurs correctement. Exemple: si 'restaurantId' contenait un caractère d'esperluette (&), alors votre variable data = serait corrompue. Donc, je suggère de le refactoriser en dict ({restaurantId: restaurantId, ...}) ou de le passer à une méthode (quelque chose comme: buildQueryArguments (nom1, valeur1, nom2, valeur2, ...)). Selon votre implémentation, cette méthode pourrait être implémentée pour extraire directement les valeurs des champs de formulaire. Cependant, votre meilleur pari est probablement d'utiliser quelque chose comme le Plugin Formulaire jQuery (http://jquery.malsup.com/form/) car cela donnera à vos utilisateurs une meilleure expérience utilisateur dans le cas où ils ne disposent pas d'un support JS complet. Sinon, il y a quelques refactorings bon marché que vous pouvez faire (encapsuler l'appel .ajax() avec quelque chose qui remplit les arguments par défaut, par exemple), mais ça ne fera pas beaucoup de différence pour vous dans le long terme.

Answer 4

Je ne vois pas de bonne façon de refactoriser cela. Vous pourrez peut-être sauvegarder quelques lignes de code en les regroupant en une seule fonction, mais cela deviendra moins facile à comprendre.

Rappelez-vous refactorisation est avant tout de réduire les lignes de code tant que le code est encore lisible et compréhensible.