passive 옵션 지원여부 체크하는 신박한 방법

vue 코드를 읽기 시작했는데 test-passive 이벤트를 윈도우에 등록하는 듣도 보도 못한 코드가 나와서 한참을 들여다 봤는데요. (바닥부터 다시 공부해야 할 것 같습니다.) 일단 passive옵션은 이벤트 핸들러 등록시 줄 수 있는 옵션 중 preventDefault()를 허용하지 않음으로 스크롤 동작시 성능을 개선하게 해주는 옵션입니다. (공유 받은 기사에서 본 것 같은 기억이 있기는 합니다. 자세한건 Improving scrolling performance~~ 글을 읽어보세요.)

여튼 vue에서 passive 옵션을 지원하는지 여부를 체크하여 지원여부에 따라 분기를 하게 되는데요. 지원여부를 체크하는 방법이 참 신박합니다.

export let supportsPassive = false
if (inBrowser) {
  try {
    const opts = {}
    Object.defineProperty(opts, 'passive', ({
      get () {
        supportsPassive = true
      }
    }: Object))
    window.addEventListener('test-passive', null, opts)
  } catch (e) {}
}

이벤트 핸들러 등록시 넣어주는 옵션 객체의 passive 속성에 getter를 지정해서 넘겨주는데요. 만약 passive 옵션을 지원한다면 해당 값을 읽을 것이고 이러한 기능 여부를 통하여 지원여부를 판단하게 되네요.

신박한 js의 세계네요.

태그: 지원여부 체크, javascript, passive