[F-Lab 모각코 챌린지 - 67일차] - 모듈화

저번 디바운스와 스로틀링을 학습한 후 코드로 구현을 해보았습니다. 해당 코드가 한 파일에 모여있어 유지보수가 힘들고 알아보기가 힘든 관계로 모듈화를 진행해보았습니다.
코드를 보고 모듈화가 왜 필요한지 알게됩니다.

기존코드

let dClickCount = 0;
let dCallbackCount = 0;
let debounceTimer = null;

let tClickCount = 0;
let tCallbackCount = 0;
let throttleTimer = null;

const $dClickCount = document.querySelector('.debounce-box span:first-child');
const $dCallbackCount = document.querySelector('.debounce-box span:last-child');
const $tClickCount = document.querySelector('.throttle-box span:first-child');
const $tCallbackCount = document.querySelector('.throttle-box span:last-child');
const $searchBar = document.querySelector('.search-bar');

document.getElementById('debounce-add-button').addEventListener('click', function(){
  if(debounceTimer) clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    dCallbackCount++;
    $dCallbackCount.innerText = dCallbackCount;
  }, 500);

  dClickCount++;
  $dClickCount.innerText = dClickCount;
});

document.getElementById('throttle-add-button').addEventListener('click', function(){
  if(!throttleTimer){
    throttleTimer = setTimeout(() => {
      tCallbackCount++;
      $tCallbackCount.innerText = tCallbackCount;
      throttleTimer = null;
    }, 500);
  }

  tClickCount++;
  $tClickCount.innerText = tClickCount;
});


const dummyData = [
  {id: 1, content: '개발자'},
  {id: 2, content: '프론트엔드'},
  {id: 3, content: '백엔드'},
  {id: 4, content: '프론트1'},
  {id: 5, content: '프론트2'},
  {id: 6, content: '프론3'},
  {id: 7, content: '프4'},
  {id: 8, content: 'ㅍ'},
  {id: 9, content: '프린이'},
  {id: 10, content: '백린이'},
  {id: 11, content: '백엔드'},
  {id: 12, content: '백'},
  {id: 13, content: '다운타운'},
  {id: 14, content: '애플'},
  {id: 15, content: '심 - 디셈버'},
  {id: 16, content: '퀸카 - (여자)아이들'},
  {id: 17, content: '소녀시대'},
]
let searchTimer = null;

$searchBox = document.querySelector('.word-list');
const inputSearch = (e) => {
  if (searchTimer) clearTimeout(searchTimer);
  searchTimer = setTimeout(() => {
    const filterData = dummyData.filter((v, i) => {
      return v.content.match(e.target.value) ? v.content : null;
    });
    if(e.target.value.trim() === '') {
      $searchBox.innerHTML = "";
      return;
    }
    if ($searchBox.hasChildNodes()) $searchBox.innerHTML = "";
    filterData.forEach((v, i) => {
      let li = document.createElement("li");
      li.innerText = v.content;
      $searchBox.appendChild(li);
    });
    console.log(filterData);
  }, 500);

}
$searchBar.addEventListener('input', inputSearch);

$searchBox.addEventListener('mouseover', function (e) {
  e.target.style.color = "blue";
  // setTimeout(() => {
  //   e.target.style.color = "";
  // }, 500);
}, false);
$searchBox.addEventListener('mouseout', function (e) {
  e.target.style.color = "black";
  // setTimeout(() => {
  //   e.target.style.color = "";
  // }, 500);
}, false);

모듈화

Debounce

export default function Debounce() {
  let debounceCounter = 0;
  let buttonCounter = 0;

  let timer = null;

  const button = document.querySelector('.debounce-button');
  const pressedBtnCnt = document.querySelector('.debounce-box p :first-child');
  const occurDebounceCnt = document.querySelector('.debounce-box p :last-child');

  const debounce = () => {
    buttonCounter++;
    pressedBtnCnt.innerText = buttonCounter;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      debounceCounter++;
      occurDebounceCnt.innerText = debounceCounter;
    }, 300);
  }
  button.addEventListener('click', debounce);
}

Debounce();

Throttle

export default function Throttle () {
  let throttled = 0;
  let clicked = 0;

  let timer = null;

  const button = document.querySelector('.throttle-button');
  const clickLabel = document.querySelector('.throttle-box p :first-child');
  const throttledLabel = document.querySelector('.throttle-box p :last-child');

  const throttle = () => {
    clicked++;
    clickLabel.innerText = clicked;
    if (timer) return;
    timer = setTimeout(() => {
      throttled++;
      throttledLabel.innerText = throttled;
      timer = null;
    }, 500);
  }
  button.addEventListener('click', throttle);
}
Throttle();