jQuery_jquery를 사용하여 객체의 선택기를 캐시하는 간단한 방법

jQuery와 같은 라이브러리를 사용할 때 개발자는 선택기를 사용하여 DOM의 요소에 액세스하고 조작하는 경우가 많습니다. 페이지에서 선택 항목에 반복적으로 액세스하는 경우 성능 향상을 위해 해당 항목을 캐시하는 것이 좋습니다.

예제를 살펴보겠습니다.

jQuery(document).ready(function() {
  jQuery('#some-selector').on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
 
  jQuery('#another-element').on('hover', function() {
    jQuery(this).slideUp();
  });
 
  jQuery('#some-selector').on('click', function() {
    alert('You have clicked a featured element');
  });
 
  jQuery('#another-element').on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

아마도 위 스니펫에서 ID 'some-selector'와 'another-element'가 두 번 언급된 것을 눈치채셨을 것입니다. 이러한 선택기를 변수에 저장하면 재사용이 가능하고 반복적인 선택 작업을 피할 수 있습니다.

jQuery 코드에 다양한 선택기를 축적하기 시작하면 객체에 선택기를 키-값 쌍으로 캐시하는 것이 얼마나 좋은지 알 수 있습니다. 이를 통해 스크립트의 어느 곳에서나 해당 선택기에 쉽게 액세스할 수 있으며 이러한 선택기를 유지하는 것이 매우 쉽습니다.

선택기를 캐싱한 후 개선된 코드는 다음과 같습니다.

var someNamespace_Dom = {
  someSelector : 'jQuery("#some-selector")',
  anotherElement: 'jQuery("#another-element")',
};
 
jQuery(document).ready(function() {
  someNamespace_Dom.someSelector.on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
  someNamespace_Dom.anotherElement.on('hover', function() {
    jQuery(this).slideUp();
  });
  someNamespace_Dom.someSelector.on('click', function() {
    alert('You have clicked a featured element');
  });
  someNamespace_Dom.anotherElement.on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

선택기가 변수에 캐시되었으므로 작업할 요소를 찾기 위해 더 이상 DOM 트리를 반복적으로 탐색할 필요가 없습니다. 'someNamespace_Dom' 개체를 사용하면 더 많은 키-값 쌍을 추가할 수 있으므로 유지 관리가 쉬워집니다.