[jQuery] best practice - event handling, ajax

이 글은 아래 사이트를 토대로 작성되었습니다.

jQuery Best Practices

이벤트 핸들링

i). 일반적인 경우

$("#longlist li").on("mouseenter", function() {

  $(this).text("Click me!");

});

$("#longlist li").on("click", function() {

  $(this).text("Why did you click me?!");

});

• 필요한 요소마다 이벤트를 추가한다.
• 이벤트 핸들러를 위해 많은 메모리를 사용하는 방식이다.

 

ii). better practice

var listItems = $("#longlist li");
listItems.on({

  "mouseenter": function() {

    $(this).text("Click me!");

  },

  "click": function() {

    $(this).text("Why did you click me?!");

  }

});

• 불필요한 코드의 반복을 지양한다.

 

iii). best practice

var list = $("#longlist");

list.on("mouseenter", "li", function(){

  $(this).text("Click me!");

});

list.on("click", "li", function() {

  $(this).text("Why did you click me?!");

});

• 이벤트 위임을 이용하는 방법이다.
• 부모 요소가 하위 요소의 이벤트를 감지한다. (이벤트 버블링)
• 각 엘리먼트에 이벤트 핸들러를 할당하지 않고 부모 요소에만 할당하므로 초기화가 쉽고 메모리가 절약된다.
• 요소를 추가할 때 하위 요소마다 이벤트를 추가하지 않고, 부모 요소의 이벤트만 제어하므로 코드가 짧아진다.

 

AJAX

i). 일반적인 경우

function getName(personid) {
  var dynamicData = {};
  dynamicData["id"] = personID;
  $.ajax({
    url: "getName.php",
    type: "get",
    data: dynamicData,
    success: function(data) {
      // ajax 결과에 따른 UI 변화
      $(".person-name").text(data.name);  
    }
  });
}

getName("2342342");

 

ii). best practice

function getName(personid) {
  var dynamicData = {};
  dynamicData["id"] = personID;
  return $.ajax({
    url: "getName.php",
    type: "get",
    data: dynamicData
  });
}

getName("2342342").done(function(data) {
  // ajax 결과에 따른 UI 변화
  $(".person-name").text(data.name);
});

• promise를 사용할 것