Refactoring Javascript

Question

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

Je me demandais si vous aviez des conseils pour remanier ce type de fonctions en fonctions génériques ou en classes, etc.

Voici un exemple de code, bien qu'une grande partie de celui-ci soit dupliquée dans d'autres fonctions avec simplement des paramètres ajax différents :

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

Petit bémol : la construction d'arguments URL devrait généralement être effectuée par une méthode plutôt que par concaténation, car cela permet de s'assurer que l'URL est correctement encodée. Exemple : si 'restaurantId' contenait un caractère esperluette (&), votre variable data= serait corrompue. Je suggère donc de refactoriser cette variable en un dict ({restaurantId : restaurantId, ...}) ou de la passer à une méthode (quelque chose comme : buildQueryArguments(name1, value1, name2, value2, ...)). En fonction de votre implémentation, cette méthode pourrait être mise en œuvre pour extraire directement les valeurs des champs du formulaire.

Cependant, votre meilleure option est probablement d'utiliser quelque chose comme le plugin jQuery Form (http://jquery.malsup.com/form/), car il offrira à vos utilisateurs une meilleure expérience au cas où ils ne disposeraient 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 args par défaut, par exemple), mais cela ne va pas faire une grande différence pour vous à long terme.

Answer 2

Étant donné que l'ensemble de ce code implique la soumission de groupes d'éléments INPUT à l'aide d'AJAX, vous pouvez essayer de les placer dans des éléments FORM (si ce n'est pas déjà fait) et d'utiliser la fonction Plugin jQuery Form pour les mettre à niveau vers AJAX. Cela vous donne également un comportement de repli si Javascript est désactivé pour une raison quelconque.

Answer 3

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

Answer 4

Je ne vois pas de bonne façon de remanier cela. Vous pouvez peut-être économiser quelques lignes de code en le regroupant en une seule fonction, mais il deviendrait moins facile à comprendre.

Rappelez-vous que le refactoring consiste à réduire le nombre de lignes de code. à condition que le code est toujours lisible et compréhensible.