Pengenalan Komponen Web Tanpa Kerangka

Tutorial ini menerangkan cara menulis komponen web standard tanpa menggunakan rangka kerja JavaScript. Anda akan belajar apa yang mereka dan bagaimana untuk mengadopsi mereka dalam projek web anda sendiri. Pengetahuan asas HTML5, CSS dan JavaScript diperlukan.

mata utama

Komponen web membolehkan penciptaan elemen HTML tersuai dengan gaya enkapsulasi dan fungsi, mengurangkan konflik dan kebergantungan antara bahagian -bahagian projek yang berlainan.
Tidak seperti kerangka JavaScript, komponen web ringan, tidak memerlukan perpustakaan luaran, dan direka untuk menjadi bukti masa depan dan boleh berjalan dalam pelbagai kerangka dan pelayar.
Shadow Dom menyediakan gaya scoped dan pengasingan DOM untuk mengelakkan gaya dari bocor ke luar komponen dan untuk mengekalkan pemisahan yang jelas antara gaya dalaman dan global.
Komponen web boleh dipertingkatkan dengan templat dan slot HTML, memberikan fleksibiliti untuk unjuran kandungan dan kebolehgunaan semula tanpa mengubah kod JavaScript untuk contoh komponen yang berbeza.
Declarative Shadow Dom adalah ciri baru yang membolehkan Shadow Dom dibina dari templat sisi pelayan, meningkatkan prestasi dengan mengurangkan offset susun atur dan kelipan kandungan yang tidak terkawal.
Walaupun komponen web mempunyai banyak kelebihan, mereka juga mempunyai lengkung pembelajaran dan kekurangan beberapa ciri terbina dalam yang disediakan oleh rangka kerja komprehensif, seperti alat pengikatan data dan pengurusan negeri.

Apakah komponen web?

Sebaik -baiknya, projek pembangunan anda harus menggunakan modul yang mudah dan bebas. Setiap modul harus mempunyai tanggungjawab tunggal yang jelas. Kod ini dikemas: anda hanya perlu tahu apa yang akan dikeluarkan diberikan satu set parameter input. Pemaju lain tidak perlu menyemak pelaksanaan (kecuali ada kesilapan tentu saja).

Kebanyakan bahasa menggalakkan penggunaan modul dan kod yang boleh diguna semula, tetapi pembangunan penyemak imbas memerlukan campuran HTML, CSS, dan JavaScript untuk menjadikan kandungan, gaya, dan ciri. Kod yang berkaitan boleh dibahagikan kepada pelbagai fail dan mungkin bertentangan dengan cara yang tidak dijangka.

rangka kerja dan perpustakaan JavaScript seperti React, Vue, Svelte, dan Angular telah mengurangkan beberapa kesukaran dengan memperkenalkan kaedah komponenisasi mereka sendiri. HTML, CSS, dan JavaScript yang berkaitan boleh digabungkan ke dalam satu fail. Malangnya:

ini satu lagi perkara untuk belajar
kerangka akan terus berkembang, dan kemas kini sering akan membawa kepada refactoring kod atau bahkan menulis semula
komponen yang ditulis dalam satu kerangka biasanya tidak berfungsi dalam rangka kerja lain, dan
Rangka kerja boleh menjadi besar dan terhad oleh apa yang mungkin dalam JavaScript

Sepuluh tahun yang lalu, banyak konsep yang diperkenalkan oleh jQuery telah ditambah kepada penyemak imbas (mis. QuerySelector, terdekat, kelas, dll.). Hari ini, vendor melaksanakan komponen web yang berjalan secara asli dalam penyemak imbas tanpa kerangka.

Ini mengambil sedikit masa. Alex Russell membuat cadangan awalnya pada tahun 2011. Rangka kerja polimer Google (Polyfill) keluar pada tahun 2013, tetapi hanya mengambil masa tiga tahun untuk datang pelaksanaan asli di Chrome dan Safari. Selepas beberapa rundingan yang sukar, Firefox menambah sokongan pada tahun 2018, diikuti oleh Edge (versi Chromium) pada tahun 2020.

Bagaimana komponen web berfungsi?

Pertimbangkan unsur-unsur HTML5 <video></video> dan <audio></audio> yang membolehkan pengguna bermain, berhenti sejenak, mundur, dan media cepat menggunakan satu siri butang dan kawalan dalaman. Secara lalai, penyemak imbas mengendalikan susun atur, gaya, dan fungsi.

Komponen web

membolehkan anda menambah elemen HTML tersuai anda sendiri -contohnya, tag <word-count></word-count> untuk mengira bilangan perkataan dalam halaman. Nama elemen mesti mengandungi tanda hubung (-) untuk memastikan ia tidak bertentangan dengan elemen HTML rasmi.

kemudian mendaftar kelas JavaScript ES2015 untuk elemen tersuai anda. Ia boleh melampirkan elemen dom seperti butang, tajuk, perenggan, dll. Untuk memastikan bahawa unsur -unsur ini tidak bertentangan dengan seluruh halaman, anda boleh melampirkannya ke dom bayangan dalaman dengan gaya skopnya sendiri. Anda boleh memikirkannya sebagai kecil <iframe></iframe>, walaupun sifat CSS seperti fon dan warna diwarisi melalui Cascade.

Akhirnya, anda boleh melampirkan kandungan ke Shadow DOM menggunakan templat HTML yang boleh diguna semula yang menyediakan beberapa konfigurasi melalui tag <slot></slot>.

Berbanding dengan rangka kerja, komponen web standard agak mudah. Mereka tidak memasukkan ciri -ciri seperti pengikatan data dan pengurusan negeri, tetapi komponen web mempunyai beberapa kelebihan yang menarik:

• mereka ringan dan cepat
• mereka boleh melaksanakan fungsi yang tidak dapat dicapai oleh JavaScript sendiri (seperti Shadow Dom)
• mereka boleh bekerja di mana -mana rangka kerja JavaScript
• mereka akan disokong pada tahun -tahun (jika tidak beberapa dekad) untuk datang

komponen web pertama anda

Untuk memulakan, tambahkan elemen <hello-world></hello-world> ke mana -mana laman web. (Tanda akhir adalah penting: anda tidak boleh menentukan tanda <hello-world></hello-world> tanda sendiri.)

Buat fail skrip yang dipanggil hello -world.js dan muatkannya dari halaman html yang sama (modul es secara automatik kelewatan supaya ia boleh diletakkan di mana -mana sahaja - tetapi lebih awal di halaman, lebih baik):

<code class="language-html">

<hello-world></hello-world></code>

Buat kelas Helloworld dalam fail skrip anda:

<code class="language-javascript">// <hello-world> Web Component
class HelloWorld extends HTMLElement {

  connectedCallback() {
    this.textContent = 'Hello, World!';
  }

}

// register <hello-world> with the HelloWorld class
customElements.define( 'hello-world', HelloWorld );</hello-world></hello-world></code>

Komponen web mesti melanjutkan antara muka HTMLElement, yang melaksanakan sifat lalai dan kaedah setiap elemen HTML.

NOTA: Firefox boleh memanjangkan unsur -unsur tertentu, seperti HTMLimageElement dan HTMLButtonElement. Walau bagaimanapun, unsur -unsur ini tidak menyokong Shadow Dom, dan amalan ini tidak disokong oleh pelayar lain.

Apabila elemen tersuai ditambah ke dokumen, penyemak imbas menjalankan kaedah ConnectedCallback (). Dalam kes ini, ia mengubah teks dalaman. (Tiada bayangan dom digunakan.)

Selebihnya bahagian adalah serupa dengan teks asal, kecuali bahasa dan ekspresi diselaraskan untuk mencapai tujuan pseudo-asal. Oleh kerana batasan ruang, saya tidak dapat menterjemahkan selebihnya sepenuhnya, tetapi anda boleh meneruskan dengan pseudo-asal dalam corak ini. Sila ambil perhatian bahawa format dan kedudukan imej tetap tidak berubah.

Atas ialah kandungan terperinci Pengenalan Komponen Web Tanpa Kerangka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!