jQuery

jQuery

• Prefix jQuery object variables with a $.

• jQuery오브젝트의 변수는 선두에 $ 를 부여해 주십시오.

  // bad
  const sidebar = $('.sidebar');
  
  // good
  const $sidebar = $('.sidebar');
  
  // good
  const $sidebarBtn = $('.sidebar-btn');

• Cache jQuery lookups.

• jQuery의 검색결과를 캐시해 주십시오.

  // bad
  function setSidebar() {
    $('.sidebar').hide();
  
    // ...stuff...
  
    $('.sidebar').css({
      'background-color': 'pink'
    });
  }
  
  // good
  function setSidebar() {
    const $sidebar = $('.sidebar');
    $sidebar.hide();
  
    // ...stuff...
  
    $sidebar.css({
      'background-color': 'pink'
    });
  }

• For DOM queries use Cascading $('.sidebar ul') or parent > child $('.sidebar > ul'). jsPerf

• DOM 검색에는 $('.sidebar ul') 이나 $('.sidebar > ul') 와 같은 Cascading 을 사용해 주십시오. jsPerf

• Use find with scoped jQuery object queries.

• 한정된 jQuery 오브젝트 쿼리에는 find 를 사용해 주십시오.

  // bad
  $('ul', '.sidebar').hide();
  
  // bad
  $('.sidebar').find('ul').hide();
  
  // good
  $('.sidebar ul').hide();
  
  // good
  $('.sidebar > ul').hide();
  
  // good
  $sidebar.find('ul').hide();