웹 구성 요소 구축!섹션 1: 표준

현재 구성 요소 기반 UI가 매우 유행하고 있습니다.사실상 사람들은 구식 jQuery 소부품을'jQuery 구성 요소'로 다시 정의하기 시작했다.)
"구성 요소"를 말할 때, 우리는 주로 독립적이고 다시 사용할 수 있는 UI를 가리키며, 작성이 완료되면, 우리는 그것을 우리가 원하는 모든 응용 프로그램에 삽입할 수 있다.화려한 상호작용 버튼, 특별한 디자인의 인용부호, 또는 오랫동안 가장 인기 있는 카드 소부품은 모두 구성 요소에 적합한 디자인 유형의 예이다.
웹에는 자신의 본체 구성 요소 모듈이 있는데, 어떤 라이브러리도 사용할 필요가 없다는 것을 아십니까?진실한 이야기!좋은 브라우저 * 와 in any framework 에서 일하는 단일 파일 구성 요소를 작성, 발표, 다시 사용할 수 있습니다.계속 읽어 봐, 어떻게 된 일인지!

개술

Web Components는 총괄적인 용어로 네 가지 브라우저 표준을 가리키며 웹의 본체 구성 요소 모델을 공동으로 구성한다.

<template> elements DOM 섹션을 빠르게 재사용할 수 있습니다.

Custom Elements JS 클래스를 사용자 정의 HTML 태그에 연결

Shadow DOM 페이지의 나머지 부분에 수치심을 숨기기

JavaScript Modules 패키지 및 발표 구성 요소

이 기준들 중 하나는 모두 어려운 문제를 제공했다.이 소개문에서 우리는 그것들을 간략하게 소개하고 실제 웹 개발을 어떻게 도와주는지 설명할 것이다.

<template> 요소

The fundamental idea of components is reusable UI. To create that, we need a way to define a template for our component. If you're familiar with React, then you've probably used JSX before. If you're more an Angular type, you've likely defined templates in JavaScript template literals.

The <template> element lets us define snippets of HTML which aren't added to the document until cloned by JavaScript. The browser only needs to parse that HTML once (e.g. when the document loads), and can then clone it cheaply whenever asked to.

Here's a (really contrived) example of the template element in action:

<template id="dialog-template">
  <dialog>
    <p></p>
    <button>⚓️ All Ashore!</button>
  </dialog>
</template>

<label>
  Type a <abbr title="message"> 💌</abbr>
  <input id="input"/>
</label>

<button id="clone-it"><abbr title="Go!">🦑 Ahoy!</abbr></button>

<script>
  document.getElementById('clone-it').onclick = () => superAlert(input.value);

  function superAlert(message) {
    // get a reference to the template
    const template = document.getElementById('dialog-template');
    // clone or "stamp" the template's contents
    const clone = template.content.cloneNode(true);

    // Make any changes to the stamped content
    const diag = clone.firstElementChild;

    // <dialog> element polyfill
    dialogPolyfill.registerDialog(diag);

    diag.firstElementChild.textContent = message;
    diag.lastElementChild.onclick = function closeModal() {
      diag.close();
      diag.remove();
    }
    document.body.appendChild(diag)
    diag.showModal();
  }
</script>

Reference

이 문제에 관하여(웹 구성 요소 구축!섹션 1: 표준), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

웹 구성 요소 구축!섹션 1: 표준

개술

<template> 요소

Reference

좋은 웹페이지 즐겨찾기