사용자 정의 요소 해방: Dominando customElements.define() 및 .get() como um Jedi do Front-end!-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

사용자 정의 요소 해방: Dominando customElements.define() 및 .get() como um Jedi do Front-end!

DDD

Nov 01, 2024 am 08:59 AM

Custom Elements Unleashed: Dominando customElements.define() e .get() como um Jedi do Front-end!

안녕하세요, 개발자 여러분! 커스텀 요소 세계의 비밀을 풀 준비가 되셨나요? 오늘 우리는 모든 프런트엔드 Jedi가 마스터해야 하는 비밀 무기인 customElements.define() 및 customElements.get()의 기능에 대해 자세히 알아볼 것입니다!

?️ customElements.define(): 나만의 포켓몬 만들기... 내 말은, Element!

당신이 미친 프론트엔드 과학자이고 자신만의 HTML 창작물을 만들고 싶다고 상상해 보세요. 이것이 바로 customElements.define()이 들어오는 곳입니다. 저 Mewtwo 복제기와 비슷하지만 웹 요소용입니다!

class ElementoTopzera extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<p>Eu sou incrível e customizado!</p>`;
  }
}

customElements.define('elemento-topzera', ElementoTopzera);

로그인 후 복사

이제 요소를 마치 HTML에 있는 것처럼 사용할 수 있습니다.

<elemento-topzera></elemento-topzera>

로그인 후 복사

붐! ? 방금 DOM에 생명을 창조하셨습니다!

?‍♂️ 개발자 친구들에게 깊은 인상을 줄 수 있는 마법의 예

카운터 버튼 클릭 횟수를 세는 버튼을 상상해 보세요. 디버깅에 대한 인내심을 평가하는 점수표와 같습니다!

class BotaoContador extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.innerHTML = `
      <button>Cliques: <span>0</span></button>
    `;
    this.addEventListener('click', () => {
      this.count++;
      this.querySelector('span').textContent = this.count;
    });
  }
}

customElements.define('botao-contador', BotaoContador);

로그인 후 복사

프로필 카드 RPG 캐릭터보다 더 커스터마이징 가능한 프로필 카드!

class CardPerfil extends HTMLElement {
  constructor() {
    super();
    const nome = this.getAttribute('nome') || 'Dev Anônimo';
    const skill = this.getAttribute('skill') || 'Café++';

    this.innerHTML = `
      <div style="border: 2px solid #333; padding: 10px; margin: 10px;">
        <h2>${nome}</h2>
        <p>Skill Suprema: ${skill}</p>
      </div>
    `;
  }
}

customElements.define('card-perfil', CardPerfil);

로그인 후 복사

이렇게 사용하세요.

<card-perfil nome="ZézimDev" skill="Bug Hunter"></card-perfil>

로그인 후 복사

?️‍♂️ customElements.get(): 요소의 셜록 홈즈

이제 맞춤 요소가 이미 존재하는지 조사하고 싶다면 어떻게 해야 할까요? 이것이 바로 웹 구성요소 세계의 사립탐정인 customElements.get()이 등장하는 곳입니다!

const ElementoTopzera = customElements.get('elemento-topzera');

if (ElementoTopzera) {
  console.log('Elemento encontrado! Hora do show!');
  // Faz alguma mágica aqui
} else {
  console.log('404 Elemento Not Found');
}

로그인 후 복사

?️ 80년대 아케이드보다 멋진 사용 사례

구성요소 지연 로딩 필요할 때만 구성 요소를 로드하면 프로그래머가 세미콜론을 어디에 배치했는지 기억하려고 하는 것보다 더 많은 메모리를 절약할 수 있습니다.

function carregaComponenteSeNecessario(nomeElemento) {
  if (!customElements.get(nomeElemento)) {
    import(`./components/${nomeElemento}.js`)
      .then(() => console.log(`${nomeElemento} carregado e pronto pra ação!`))
      .catch(err => console.error(`Oops, deu ruim ao carregar ${nomeElemento}`, err));
  }
}

carregaComponenteSeNecessario('super-tabela');

로그인 후 복사

보안검사 일부 사악한 요소가 귀하를 사칭하려고 시도하고 있지 않은지 확인하십시오.

function elementoSeguro(nomeElemento) {
  const elemento = customElements.get(nomeElemento);
  if (elemento && elemento.prototype instanceof HTMLElement) {
    console.log('Elemento verificado e aprovado! ?');
    return true;
  }
  console.warn('Elemento suspeito detectado! ?');
  return false;
}

elementoSeguro('botao-contador'); // true, se definido anteriormente
elementoSeguro('virus-malicioso'); // false, espero eu! ?

로그인 후 복사

? 프론트엔드 제다이 마스터로부터의 교훈

고유한 이름: 소셜 네트워크 사용자 이름과 같은 요소 이름을 선택하세요. 중간에 대시가 있고 고유합니다!
미리 확인: DOM의 시공간을 방해하지 않도록 정의하기 전에 항상 customElements.get()을 사용하세요.
현명하게 확장하세요: 추가 초능력을 원하시나요? 기본 요소 확장:

   class SuperButton extends HTMLButtonElement {
     // Código supimpa aqui
   }
   customElements.define('super-button', SuperButton, { extends: 'button' });

로그인 후 복사