重構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

次要要點：構造URL參數通常應通過一種方法而不是使用串聯來完成，因為這樣可以確保您正確地對URL進行了轉義。 示例：如果'restaurantId'包含一個＆字符，那么您的data =變量將被破壞。 因此，我建議將其重構為字典（{restaurantId：restaurantId，...}）或將其傳遞給方法（諸如：buildQueryArguments（name1，value1，name2，value2，...）。 根據您的實現，可以實現該方法以直接從表單字段中提取值。

但是，最好的選擇可能是使用jQuery Form Plugin（ http://jquery.malsup.com/form/ ）之類的東西，因為這將為您的用戶提供更好的用戶體驗，以防他們沒有完整的JS支持。

否則，您可以執行一些廉價的重構（例如，使用可填充默認args的東西封裝.ajax（）調用），但從長遠來看，這對您沒有多大影響。

Answer 2

由於所有這些代碼都涉及使用AJAX提交INPUT元素組，因此您可以嘗試將它們放入FORM元素（如果尚未使用），然后使用jQuery Form Plugin將其升級到AJAX。 如果出於任何原因禁用了Javascript，這也會給您帶來后備行為。

Answer 3

您可以通過使用高級jQuery.post（url，[data]，[callback]，[type]）將.ajax回調分解為較小的函數。

Answer 4

我看不到任何好的重構方法。 通過將其打包到一個函數中，您也許可以節省幾行代碼，但是它將變得不那么容易理解。

請記住，只要代碼仍然是可讀和可理解的，重構就是減少代碼行。