리팩토링 자바 스크립트

Question

내 사이트의 관리 영역에는 기본적으로 AJAX 게시를 사용하는 CRUD 작업이 많은 코드가 있습니다.

당신이 일반적인 함수 나 클래스 등이 여기에

에 하나의 기능이 유형을 리팩토링에 어떤 조언이 있다면이 많은 단지 다른 아약스와 다른 기능에 중복 불구하고 나는 몇 가지 예제 코드가 궁금

매개 변수 :이 코드의 모든 이후

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

는 AJAX를 사용하여 입력 요소의 그룹을 제출 포함, 당신은 (당신이 아직없는 경우) FORM 요소에 이르렀와 AJAX로 업그레이드 할 jQuery Form Plugin를 사용하여 시도 할 수 있습니다. 어떤 이유로 든 Javascript가 비활성화 된 경우 대체 동작을 제공합니다.

Answer 2

당신은 높은 수준을 사용하여 작은 기능에 아약스 콜백을 나눌 수 jQuery.post(url, [data], [callback], [type]).

Answer 3

마이너 니트 : 당신은 당신이 보장 할 수 있기 때문에 건설 URL 인수는 일반적으로 오히려 연결보다 방법에 의해 수행되어야한다 URL- 값을 정확하게 이스케이프 처리합니다. 예 : 'restaurantId'에 앰퍼샌드 (&) 문자가 포함 된 경우 데이터 = 변수가 손상됩니다. 그래서 이것을 dict ({restaurantId : restaurantId, ...})로 리팩터링하거나 메소드 (buildQueryArguments (name1, value1, name2, value2, ...)와 같은)에 전달하는 것이 좋습니다. 구현에 따라 해당 메서드를 구현하여 양식 필드에서 값을 직접 추출 할 수 있습니다.

그러나 jQuery Form Plugin (http://jquery.malsup.com/form/)과 같은 것을 사용하는 것이 가장 좋습니다. 전체 JS 지원이없는 경우 사용자에게 더 나은 사용자 환경을 제공하기 때문일 수 있습니다.

그렇지 않으면 싸구려 리팩터링 (예 : sin 기본 args를 채우는 것으로 .ajax() 호출을 캡슐화 할 수 있음)이 있지만, 장기적으로.

Answer 4

리팩토링에 대한 좋은 방법은 없습니다. 하나의 함수에 몇 줄의 코드를 저장하여 코드를 저장할 수는 있지만 이해하기가 어려울 수 있습니다.

는 리팩토링은 모든 코드는 여전히 읽고 이해할 수만큼 코드 의 라인을 감소에 관한 것입니다 기억하십시오.