重构Javascript

Question

我在我的网站的管理区域有很多代码，也就是说，基本上只是使用AJAX发布的CRUD操作。

我想知道你是否有任何关于将这些类型的函数重构为泛型函数或类等的技巧。

下面是一些示例代码，其中许多代码在其他函数中重复使用，只是使用了不同的ajax参数：

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

次要nit:构造URL参数通常应该通过一个方法来完成，而不是使用连接，因为这样您就可以确保正确地对值进行URL转义。例如:如果'restaurantId‘包含一个与号(&)字符，那么您的data=变量将被损坏。因此，我建议将其重构为一个字典({restaurantId: restaurantId，...})或将其传递给一个方法(类似于: buildQueryArguments(name1，value1，name2，value2，...))。根据您的实现，该方法可以实现为直接从表单域中提取值。

但是，您最好的选择可能是使用像jQuery表单插件(http://jquery.malsup.com/form/)这样的插件，因为这将为用户提供更好的用户体验，以防他们没有完全的JS支持。

否则，您可以做一些廉价的重构(例如，使用填充sin默认参数的东西封装.ajax()调用)，但从长远来看，这不会对您有太大影响。

Answer 2

由于所有这些代码都涉及使用AJAX提交一组输入元素，因此可以尝试将它们放入表单元素中(如果还没有的话)，然后使用jQuery Form Plugin将它们升级到AJAX。如果由于某种原因禁用了Javascript，这也会为您提供后备行为。

Answer 3

您可以使用更高级别的jQuery.post( url, [data], [callback], [type] ).将.ajax回调分解为更小的函数