Vanilla JS에서 수준 높은 구성 요소 구현

성급 평가/평론 사용자 인터페이스는 인터넷상에서 서로 다른 사이트의 흔한 현상이다.
오늘은 Vanilla JS를 사용하여 간단한 별표 구성 요소를 구현합니다.
기본 모듈 API는 다음과 같이 디스플레이 모듈 모드를 사용합니다. -

const ratingModule = makeStarRating();

ratingModule는 getStarComponent와 getRating의 이름으로 두 가지 방법을 공개한다.
그러나 JS의 기술 본질을 깊이 연구하기 전에 HTML이 이를 어떻게 실현할 것인지를 상상해 보자. -

<ul class="stcomp">
    <li data-rating="1" class="star" ></li>
    <li data-rating="2" class="star" ></li>
    <li data-rating="3" class="star" ></li>
    <li data-rating="4" class="star" ></li>
    <li data-rating="5" class="star" ></li>
</ul>

우리는 실제로 HTML을 사용하지 않고 DOM API를 사용합니다.우리는 914를 통해 모든 사용자 정의 요소의 값을 454로 시각화할 것이다.CSS도 본문의 중점이 아니다.단, 이것은 최종 코드pen 구현에서 제공될 것입니다.
이제 JS로 기본 프레임을 만들어 봅시다. -

const makeStarRating = function (noOfStars = 5) {
  let rating = 0;
  let starComponent;

  function changeRating(newRating) {
    rating = newRating;
  }

  function getStarComponent() {
    if (!starComponent) {
     // create Star Component
    }
    return starComponent;
  }

  function renderChanges(rating) {
  // render UI changes as per rating passed
  }

  function getRating() {
    return rating;
  }

 function onMouseClick(){
  // click event handler
  }

function onMouseOver(){
// mouseover event handler
}

function onMouseLeave(){
// mouseleave event handler
}

  return { getRating, getStarComponent };
};

그건 해골이지!!!

위에서 보듯이 우리는 data-rating(기본값은 5)를 dataset.rating의 매개 변수로 제공했고 이따가 noOfStars에서 사용할 것이다.
따라서, 우리는 먼저 별 모양 구성 요소를 만들어야 한다. 만약 그것이 아직 나타나지 않았다면, 그것을 되돌려야 한다.구현makeStarRating을 통해 이 작업을 수행할 수 있는 방법은 다음과 같습니다. -

  function getStarComponent() {
    if (!starComponent) {
      starComponent = document.createElement("ul");
      starComponent.className = "stcomp";
      for (let i = 0; i < noOfStars; i++) {
        const li = document.createElement("li");
        li.setAttribute("data-rating", i + 1);
        li.className = "star";
        starComponent.append(li);
      }
      starComponent.addEventListener("mouseover", onMouseOver);
      starComponent.addEventListener("mouseleave", onMouseLeave);
      starComponent.addEventListener("click", onMouseClick);
    }
    return starComponent;
  }

여기서 우리는 기본적으로 renderChanges(rating) 요소를 만들고 이를 getStarComponent()회ul회 추가한다.그리고 각li 요소의 noOfStars 속성과 data-rating 속성을 설정합니다.마지막으로 이벤트 처리 프로그램을 등록하는 코드를 추가합니다.주의해야 할 중요한 것은 우리가 이벤트 의뢰를 사용하고 있기 때문에 부급className만 이벤트 처리 프로그램(각 관련 이벤트에 대해)이 있어 부급li 요소에서 거품이 생긴 사건을 처리할 수 있다는 것이다.이벤트 거품은 클릭과 마우스 정지 이벤트에만 유리합니다.mouseleave 이벤트에 대해 우리는 그것을 필요로 하지 않는다. 왜냐하면 우리는 ul 부모 용기 li 를 떠난 후에 반사되기를 원하기 때문이다.흥미로운 것은 rating 거품이 나지 않는다는 것이다!!

이제 ul의 모습을 봅시다. -

  function renderChanges(rating) {
    for (let index = 0; index < rating; index++) {
      starComponent.children[index].classList.add("star-filled");
    }
    for (let index = rating; index < noOfStars; index++) {
      starComponent.children[index].classList.remove("star-filled");
    }
  }

이상은 사실상 우리가 스타 사용자 인터페이스에 대한 변화를 반영했다.우리는 별을 돋보이게 하기 위해 mouseleave라는 수업이 있을 것이다.renderChanges(rating)호 이전에는 모든 별이 밝게 나타나고 이후에는 모든 별이 밝게 나타나지 않는다.

현재 우리의 이벤트 처리 프로그램이 화면에 들어왔는데 첫 번째는star-filled: -

function onMouseClick(e) {
    let star = e.target;
    let isStar = star.classList.contains("star");
    if (isStar) { 
      let { rating } = star.dataset;
      rating = rating === getRating() ? 0 : rating;
      changeRating(rating);
      renderChanges(rating);
    }
  }

위에서 우리는 먼저 클릭된 목표가 별인지 확인한다.만약 그렇다면, 우리는 rating 속성에서 onMouseClick을 얻습니다.현재 우리는 이를 기존rating(viadataset)와 비교하고, 만약 둘이 같다면rating을 0으로 리셋한다.그리고 저장getRating()하고 변경 사항을 보여 줍니다.
우리는 또한 우리의 조립품이 멈출 수 있는 별 밝기 기능을 가지고 싶다.우리는 rating와 rating의 조합을 통해 다음과 같이 이 점을 실현할 수 있다. -

  function onMouseOver(e) {
    let isStar = e.target.classList.contains("star");
    if (isStar) {
      const { rating } = e.target.dataset;
      renderChanges(rating);
    }
  }

  function onMouseLeave(e) {
    renderChanges(rating);
  }

mouseover 내부에서 우리는 mouseleave의 검사와 보존onMouseOver 위치를 건너뛰고 rating 내부에서 사용했다rating.이러한 변경 사항은 UI에만 반영하고 싶지만 클릭 작업을 수행하지 않으면 지속되지 않습니다.changeRating(rating)에서 현재 저장된 onMouseClick만 사용하면 변경 사항을 보일 수 있습니다(축복합니다!!!).
이것은 간단한 실현이다!!

우리는 매번 mouseleave를 사용하여 우리에게 새로운 모듈을 제공할 수 있다. 이 모듈들 중 하나는 그것들의 rating을 호출해서 다른 용기에 추가할 수 있는 부 모듈makeStarRating을 되돌려줄 수 있다.
다음은 키보드 포커스 기능과 같은 작업의 실현이다.나는 그것에 관여하지 않았다. 왜냐하면 간단한 실현에 있어서, 이것은 과도한 기교일 수도 있지만, 틀림없이 연구될 수 있기 때문이다.Roving tabindex는 제가 사용하는 기술입니다. 이 기술을 배울 수 있습니다here.
나는 당신이 작성하거나 실시하는 것에 대한 어떠한 피드백도 듣고 싶습니다.이것이 바로 내가 배우는 방식이다:)