처음부터 간단한 웹 구성 요소를 구축하는 방법
- Barbara Streisand원래의
- 2025-01-23 01:00:14810검색
이 가이드에서는 재사용 가능한 웹 구성요소인 간단한 카운터를 구축하는 방법을 보여줍니다. 우리는 사용자 정의 요소, Shadow DOM 및 HTML 템플릿을 활용할 것입니다. 완료된 카운터에는 표시된 숫자 값을 늘리거나 줄이는 버튼이 있습니다.
이 코드의 실행 가능한 전체 버전은 여기에서 확인할 수 있습니다.
전제 조건:
기본적인 JavaScript에 대한 지식과 DOM(문서 개체 모델)에 대한 개념적 이해가 있으면 도움이 되지만 꼭 필요한 것은 아닙니다.
프로젝트 설정:
counter.html(페이지 구조 포함) 및 counter.js(맞춤 요소 정의 포함)이라는 두 개의 파일을 만듭니다.
counter.html(초기 구조):
<code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Counter Component</title> </head> <body> <script src="counter.js"></script> </body> </html></code>
템플릿 만들기(counter.html - 템플릿 추가):
HTML 템플릿을 사용하여 카운터의 시각적 구조를 정의합니다.
<code class="language-html"><template id="x-counter"> <button id="min-btn">-</button> <span id="counter-display">0</span> <button id="plus-btn">+</button> </template></code>
이 템플릿은 직접 렌더링되지 않습니다. 이는 맞춤 요소의 청사진 역할을 합니다.
맞춤 요소 정의(counter.js):
이 JavaScript 코드는 카운터의 기능을 정의합니다.
<code class="language-javascript">class XCounter extends HTMLElement {
constructor() {
super();
this.counter = 0;
this.elements = {};
}
connectedCallback() {
const template = document.getElementById("x-counter");
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.elements = {
plusBtn: this.shadowRoot.querySelector("#plus-btn"),
minBtn: this.shadowRoot.querySelector("#min-btn"),
counterDisplay: this.shadowRoot.querySelector("#counter-display")
};
this.displayCount();
this.elements.plusBtn.onclick = () => this.increment();
this.elements.minBtn.onclick = () => this.decrement();
}
increment() {
this.counter++;
this.displayCount();
}
decrement() {
this.counter--;
this.displayCount();
}
displayCount() {
this.elements.counterDisplay.textContent = this.counter;
}
}
customElements.define("x-counter", XCounter);</code>
이 수업은 HTMLElement 연장됩니다. connectedCallback는 페이지에 요소가 추가될 때 Shadow DOM 및 이벤트 리스너 연결을 포함하여 설정을 처리합니다. increment, decrement, displayCount은 카운터의 값과 표시를 관리합니다.
카운터 구성 요소 사용(counter.html - 맞춤 요소 추가):
카운터를 사용하려면 HTML에 <x-counter></x-counter>를 추가하세요.
구성요소 스타일 지정(counter.js - 스타일 추가):
adoptedStyleSheets:
<code class="language-javascript">connectedCallback() {
// ... (previous code) ...
const sheet = new CSSStyleSheet();
sheet.replaceSync(this.styles());
this.shadowRoot.adoptedStyleSheets = [sheet];
// ... (rest of connectedCallback) ...
}
styles() {
return `
:host {
display: block;
border: dotted 3px #333;
width: fit-content;
height: fit-content;
padding: 15px;
}
button {
border: solid 1px #333;
padding: 10px;
min-width: 35px;
background: #333;
color: #fff;
cursor: pointer;
}
button:hover {
background: #222;
}
span {
display: inline-block;
padding: 10px;
width: 50px;
text-align: center;
}
`;
}</code>
Shadow DOM 내에 포함된 기본 스타일을 추가합니다.
결론:
이 튜토리얼에서는 간단하고 재사용 가능한 웹 구성 요소를 만드는 방법을 보여줍니다. 템플릿, Shadow DOM 및 사용자 정의 요소를 사용하면 웹 개발의 모듈성과 유지 관리 가능성이 향상됩니다. [here](https://www.php.cn/link/2eac42424d12436bdd6a5b8a88480cc3)를 최종 코드에 대한 실제 링크로 바꾸는 것을 잊지 마세요.
위 내용은 처음부터 간단한 웹 구성 요소를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!