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의 세계네요.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

w

%s에 연결하는 중