컨텍스트 인식 웹 구성 요소는 생각보다 쉽습니다

이 기사는 웹 구성 요소의 자주 볼 수있는 수명주기 콜백을 탐색하여 상황을 인식하는 요소를 어떻게 활성화하는지 보여줍니다. 우리는 이러한 기능의 힘을 보여주는 환경에 반응하는 웹 구성 요소를 구축 할 것입니다.

시리즈 개요

이 기사는 웹 구성 요소 개발 단순화에 관한 시리즈의 일부입니다.

• 웹 구성 요소 : 생각보다 쉽습니다
• 대화식 웹 구성 요소 : 생각보다 쉽습니다
• WordPress에서 웹 구성 요소 사용 : 생각보다 쉽습니다
• 웹 구성 요소로 내장 요소를 과급 : 생각보다 쉽습니다.
• 컨텍스트 인식 웹 구성 요소 : 생각보다 쉽습니다 ( 이 기사 )
• 웹 구성 요소 의사 클래스 및 의사 요소 : 생각보다 쉽습니다

웹 구성 요소 수명주기 콜백

4 개의 주요 콜백은 웹 구성 요소의 수명주기를 관리합니다.

• connectedCallback : 요소가 DOM에 추가되면 발사되었습니다.
• disconnectedCallback : 요소가 DOM에서 제거되면 발사되었습니다.
• adoptedCallback : 요소가 새 문서로 이동하면 해고되었습니다.
• attributeChangedCallback : 관찰 된 속성이 변경되면 발사되었습니다.

실용적인 예를 가지고 이것을 설명합시다.

묵시록 이후의 사람 구성 요소

우리는 a를 만들 것입니다<postapocalyptic-person></postapocalyptic-person> 요소. 각 사람은 인간 또는 좀비이며, 부모 요소의 .human 또는 .zombie 클래스에 의해 결정됩니다. 구성 요소는 Shadow Dom을 사용하여 적절한 이미지를 표시합니다.

 customElements.define (
  "포스트 apocalyptic-person",
  클래스는 htmlelement {{
    생성자 () {
      감독자();
      this.shadowroot = this.attachshadow ({모드 : "Open"});
    }
    // ... 라이프 사이클 콜백이 여기에 추가됩니다 ...
  }
);

초기 HTML :

<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

connectedCallback 사용

connectedCallback 이 호출됩니다<postapocalyptic-person></postapocalyptic-person> 페이지에 추가됩니다. 이미지를 추가하는 데 사용합니다.

 ConnectedCallback () {
  const image = document.createelement ( "IMG");
  if (this.parentNode.classList.Contains ( "Humans")) {
    image.src = "https://assets.codepen.io/1804713/lady.png";
  } else if (this.parentNode.classList.Contains ( "Zombies")) {
    image.src = "https://assets.codepen.io/1804713/ladyz.png";
  }
  this.shadowroot.appendChild (이미지);
}

이것은 부모의 클래스에 따라 올바른 이미지가 표시되도록합니다. 참고 : connectedCallback 여러 번 발사 할 수 있습니다. 연결 상태를 확인하려면 this.isConnected 사용하십시오.

connectedCallback 가진 사람들을 세는 것

사람을 추가/제거하여 카운트를 추적하기 위해 버튼을 추가합시다.

<div>
  <button id="addbtn">사람을 추가하십시오</button>
  <button id="rmvbtn">사람을 제거하십시오</button>
  <br>인간 : <span id="human-count">0</span>
  좀비 : <span id="zombie-count">0</span>
</div>

버튼 이벤트 리스너 :

 // ... (사람 논리 추가/제거) ...

업데이트 된 connectedCallback 업데이트 카운트 :

 ConnectedCallback () {
  // ... (이미지 로직) ...
  // 이미지 소스를 기반으로 업데이트 카운트
}

disconnectedCallback 으로 업데이트 카운트

disconnectedCallback 콜백은 사람을 제거 할 때 계산됩니다. 이미지 소스를 유형의 프록시로 사용하겠습니다.

 DistronnectedCallback () {
  const image = this.shadowroot.querySelector ( 'IMG');
  // 이미지 소스를 기반으로 감소 카운트
}

adoptedCallback 및 attributeChangedCallback 사용한 광란 탐지

우리는 숨겨진 광대의 가능성을 소개하여<iframe></iframe> adoptedCallback 사용하여 attributeChangedCallback 으로 공개합니다. 이 고급 예제의 세부 사항은 간결하게 생략되지만 핵심 개념은 adoptedCallback 사용하여 구성 요소가 새 문서로 이동하고 attributeChangedCallback 변경에 반응하여 이미지가 그에 따라 업데이트 될 때 감지하는 것입니다.

이것은 라이프 사이클 콜백이 어떻게 동적 및 컨텍스트 인식 웹 구성 요소를 생성하기위한 강력한 도구를 제공하여보다 다재다능하고 반응이 좋게 만드는 방법을 보여줍니다.

위 내용은 컨텍스트 인식 웹 구성 요소는 생각보다 쉽습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!