Cara Membina Komponen Web Mudah daripada Gores-tutorial js-php.cn

Cara Membina Komponen Web Mudah daripada Gores

Barbara Streisand

Lepaskan： 2025-01-23 01:00:14

asal

851 orang telah melayarinya

Panduan ini menunjukkan membina komponen web boleh guna semula: kaunter ringkas. Kami akan memanfaatkan Elemen Tersuai, Shadow DOM dan Templat HTML. Kaunter siap akan menampilkan butang untuk menambah dan mengurangkan nilai berangka yang dipaparkan.

How to Build a Simple Web Component from Scratch

Versi kod ini yang lengkap dan boleh dijalankan tersedia di sini.

Prasyarat:

Kebiasaan dengan JavaScript asas dan pemahaman konsep tentang DOM (Model Objek Dokumen) sangat membantu, walaupun tidak diperlukan sepenuhnya.

Persediaan Projek:

Buat dua fail: counter.html (mengandungi struktur halaman) dan counter.js (menempatkan definisi elemen tersuai).

counter.html (Struktur Awal):

<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>

Salin selepas log masuk

Membuat Templat (counter.html - Menambah Templat):

Kami akan mentakrifkan struktur visual kaunter menggunakan templat 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>

Salin selepas log masuk

Templat ini tidak akan dipaparkan secara langsung; ia berfungsi sebagai pelan tindakan untuk elemen tersuai kami.

Mentakrifkan Elemen Tersuai (counter.js):

Kod JavaScript ini mentakrifkan kefungsian kaunter:

<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>

Salin selepas log masuk

Kelas ini dilanjutkan HTMLElement. connectedCallback mengendalikan persediaan apabila elemen ditambahkan pada halaman, termasuk melampirkan DOM bayangan dan pendengar acara. increment, decrement dan displayCount mengurus nilai dan paparan kaunter.

Menggunakan Komponen Kaunter (counter.html - Menambah Elemen Tersuai):

Untuk menggunakan kaunter, cuma tambah <x-counter></x-counter> pada HTML anda.

Menggayakan Komponen (counter.js - Menambah Gaya):

Merangkum penggayaan dalam komponen menggunakan 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>

Salin selepas log masuk

Ini menambah gaya asas, terkandung dalam bayang DOM.

Kesimpulan:

Tutorial ini menunjukkan penciptaan komponen web yang mudah dan boleh digunakan semula. Penggunaan templat, shadow DOM dan elemen tersuai menggalakkan modulariti dan kebolehselenggaraan dalam pembangunan web. Ingat untuk menggantikan [here](https://www.php.cn/link/2eac42424d12436bdd6a5b8a88480cc3) dengan pautan sebenar kepada kod akhir anda.

Atas ialah kandungan terperinci Cara Membina Komponen Web Mudah daripada Gores. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!