Rumah >hujung hadapan web >tutorial js >Cara Membina Komponen Web Mudah daripada Gores

Cara Membina Komponen Web Mudah daripada Gores

Barbara Streisandasal: 2025-01-23 01:00:14855semak imbas

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>

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>

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>

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>

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!

JavaScript html Object define for using class Event JS dom this display

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Adakah nod-onvif perpustakaan masih boleh digunakan?Artikel seterusnya：Adakah nod-onvif perpustakaan masih boleh digunakan?

Artikel berkaitan

Lihat lagi