JS(ES6+) 개발자가 알아야 할 50가지 이상의 힌트(10부)

JS힌트의 마지막 블로그인 이번 10화를 팔로우 해주신 모든 분들께 감사드립니다.
오늘 우리는 접근자, 이벤트 및 JQuery의 몇 가지 유용한 사례를 볼 것입니다.
1. 접근자

JavaScript getter/setter는 예상치 못한 부작용을 일으키고 테스트, 유지 관리 및 추론이 더 어렵기 때문에 사용하지 마십시오. 대신 접근자 함수를 만드는 경우 getVal() 및 setVal('hello')을 사용하세요.

// bad
class Dragon {
  get age() {
    // ...
  }

  set age(value) {
    // ...
  }
}

// good
class Dragon {
  getAge() {
    // ...
  }

  setAge(value) {
    // ...
  }
}

속성/메소드가 부울인 경우 isVal() 또는 hasVal()을 사용합니다.

// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}

get() 및 set() 함수를 만드는 것은 괜찮지만 일관성을 유지해야 합니다.

class Jedi {
  constructor(options = {}) {
    const lightsaber = options.lightsaber || 'blue';
    this.set('lightsaber', lightsaber);
  }

  set(key, val) {
    this[key] = val;
  }

  get(key) {
    return this[key];
  }
}

2. 이벤트
데이터 페이로드를 이벤트(DOM 이벤트 또는 Backbone 이벤트와 같은 더 독점적인 이벤트)에 첨부할 때 원시 값 대신 개체 리터럴("해시"라고도 함)을 전달합니다. 이를 통해 후속 기여자는 이벤트에 대한 모든 핸들러를 찾아 업데이트하지 않고도 이벤트 페이로드에 더 많은 데이터를 추가할 수 있습니다. 예를 들어 다음과 같이 합니다.

// bad
$(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {
  // do something with listingID
});

// good
$(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {
  // do something with data.listingID
});

3. jQuery

// bad
const sidebar = $('.sidebar');

// good
const $sidebar = $('.sidebar');

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

// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...

  $('.sidebar').css({
    'background-color': 'pink',
  });
}

// good
function setSidebar() {
  const $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...

  $sidebar.css({
    'background-color': 'pink',
  });
}

DOM 쿼리의 경우 Cascading $('.sidebar ul') 또는 부모 > 자식 $('.sidebar > ul')을 사용합니다. jsPerf

범위가 지정된 jQuery 개체 쿼리와 함께 찾기를 사용합니다.

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

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

// good
$('.sidebar ul').hide();

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

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

시간 내 줘서 고마워.
친애하는.