[JS]Building a Slider Component, Lifecycle DOM events, defer and async

コースソース:完全JavaScript Course 2022 Jonas(Udemy)
Building a Slider Component
スライダアセンブリの一般的な論理
1.スライドを平行位置に移動します.indexとtransformを使います!
2.スライドの構造を左右のキーで移動します.(transform)
3.グローバル変数let curslide=0を設定し、現在のスライドを決定します.eventでcurselid++またはcurselid--を使用してcurselid値を変更します.この値は変換時にも使用できます.
ex) slides.forEach((s, i) => (s.style.transform = translateX(${100 * (i - slide)}%))
);
4.再使用したコードは必ず関数として再構築してください!
5.初期に直ちに実行する必要がある関数については、init関数を単独で作成し、一度に読み込みます!
++論理を記述するときは、各要素のインデックスとデータセットの番号を同じにして、それらをよりよく利用します.
ex)各スライドでアクティブにする必要があるボタンの各データセットのスライドを、実際のスライドのインデックス番号const btn 1=documentとする.querySelector(.btn[data-slide= '1')

// Slider
const slider = function () {
  const slides = document.querySelectorAll('.slide');
  const btnLeft = document.querySelector('.slider__btn--left');
  const btnRight = document.querySelector('.slider__btn--right');
  const dotContainer = document.querySelector('.dots');

  let curSlide = 0;
  const maxSlide = slides.length;

  // const slider = document.querySelector('.slider');
  // slider.style.transform = 'scale(0.2) translate(-800px)';
  // slider.style.overflow = 'visible';

  //0%, 100%, 200%, 300%

  //Functions
  // 각 slide마다 dot 만들기
  const createDots = function () {
    slides.forEach(function (_, i) {
      dotContainer.insertAdjacentHTML(
        'beforeend',
        `<button class="dots__dot" data-slide="${i}"></button>`
      );
    });
  };

  const activateDot = function (slide) {
    document
      .querySelectorAll('.dots__dot')
      .forEach(dot => dot.classList.remove('dots__dot--active'));
    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add('dots__dot--active');
  };

  const goToSlide = function (slide) {
    slides.forEach(
      (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
    );
  };

  // Next slide
  const nextSlide = function () {
    if (curSlide === maxSlide - 1) {
      curSlide = 0;
    } else {
      curSlide++;
    }
    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const prevSlide = function () {
    if (curSlide === 0) {
      curSlide = maxSlide - 1;
    } else {
      curSlide--;
    }
    goToSlide(curSlide);
    activateDot(curSlide);
  };
  const init = function () {
    createDots();
    activateDot(0);
    goToSlide(0);
  };
  init();
  //Event handlers
  btnRight.addEventListener('click', nextSlide);
  btnLeft.addEventListener('click', prevSlide);

  document.addEventListener('keydown', function (e) {
    e.key === 'ArrowLeft' && prevSlide();
    e.key === 'ArrowRight' && nextSlide();
  });

  dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset; // const slide = e.target.dataset.slide
      goToSlide(slide);
      activateDot(slide);
    }
  });
};
slider();

Lifecycle DOM Events
HTMLページでは、ライフサイクルに3つの重要なイベントがあります.
DOMContentLoaded, load, beforeunload/unload

document.addEventListener('DOMContentLoaded', function (e) {
   console.log('HTML parsed and DOM tree built!');
 });
 // script을 html 뒤에 적어두어서 html이 다 parse가 된 후에 js file을 읽기 때문에 이 event필요 없음.

window.addEventListener('load', function (e) {
   console.log('Page fully loaded', e);
 });

window.addEventListener('beforeunload', function (e) {
   e.preventDefault();
   console.log(e);
   //e.returnValue = ''; // 새로고침을 할 때 팝업이 뜬다.
 });

Efficient Script Loading : defer and async
Regular vs Async vs Defer
Regular in the end of body

<script src ="script.js">

Parsing HTML->Fetch Script->Execute(execute完了後にDOMContent Loadを実行)

Scripts are fetched and executed after the HTML is completely parsed.

Async in head

<script async src ="script.js">

Parsing HTMLとFetching Scriptが同時に表示されます.Fetchが終了したスクリプトはすぐに実行され、実行中にhtmlが待機し、再実行が終了した後もhtml解析を継続します.DOMContentLoadedを実行します.

Scripts are fetched asynchronously and executed immediately.

Usually the DOMContentLoaded event waites for all scripts to execute, except for async scripts so DOMContentLoaded does not wait for an async script.

Scripts not guaranteed to execute in order.

Use for 3rd-party scripts where order doesn't matter. ex) google Analytics)

Defer in head

<script defer src ="script.js">

Parsing HTMLとFetching Scriptが同時に表示されます.Parsingが終了するとスクリプトが実行され、DOMContentLoadedが表示されます

Scripts are fetched asychronously and executed after the HTML is completely parsed

DOMContentLoaded event after defer script is executed

Scripts are executed in order

This is overall the best solution! Use for your own scripts and when order matters.