bbc interaction 공부 4

자바스크립트 코드 분석 2

1. 이벤트핸들러 함수에 구체적인 기능이 자세하게 기술되어있으면 별로 좋지 않다.
   이벤트핸들러는 조건 판별만 해주고 각각의 세세한 내용들은 각각 다른 함수들로 쪼개주는 것이 좋다.

   window.addEventListener('scroll', function (e) { 
       // 이벤트핸들러 함수..
   })
   

2. 그리고 반복문이 있으면 반복문을 최소한으로 돌게끔 코드를 작성하도록 한다.
   해당 인터렉션 페이지에선 text의 위치를 판별할 때 현재 보이는 text들의 위치만 판별하면 된다.
   전체 text들의 위치를 판별할 필요가 없다.

   이를 위해 intersectionObserver API를 사용했다.

   const io = new IntersectionObserver((entries, observer) => {
       console.log(entries);
   })
      
   for (let i=0; i<stepElem.length; i++) {
       io.observe(stepElem[i]);
   }
   

   위에서 생성된 객체는 ‘대상’을 관찰한다.
   화면에서 보이고 사라지고를 감지한다.

3. loop를 돌릴때 조건도 잘 생각하자.
   조건이 맞지않은건 코드실행을 건너뛰게 하고 싶을 땐 continue를 활용하자.

4. dataset을 잘 활용하자.
   data-action=”함수이름”을 통해 인터렉션을 제어했다.

5. false/true 적절 활용
   인터렉션이 발생하고나서 해당 섹션을 벗어났을 때 다시 인터렉션 초기화를 위해 사용하는 기법이다.

6. CSS will-change : opacity
   남용하지 말자. 오히려 부작용이 있을수도 있다.