Membuat komponen multiselect sebagai komponen web

Kemas kini 12.05.2016: Artikel sahabat, "Cara Membuat Komponen Web yang Boleh Diakses," menangani batasan artikel ini. Sila baca kedua -duanya untuk pemahaman yang lengkap. Artikel ini mendapat manfaat daripada Kajian Peer oleh Ryan Lewis. Terima kasih kepada pengulas rakan sebaya SitePoint!

Aplikasi web moden menuntut pengurusan komponen yang cekap. Mengendalikan sejumlah besar HTML, JavaScript, dan CSS memerlukan memecah aplikasi ke dalam komponen yang boleh diguna semula untuk mencegah konflik gaya dan gangguan skrip. Secara tradisinya, kod komponen tersebar di pelbagai fail. Tambahan pula, markup kompleks dengan banyak div dan merangkumi menghalang kebolehbacaan dan penyelenggaraan. Komponen web, standard W3C, menawarkan penyelesaian. Tutorial ini menerangkan komponen web dan menunjukkan membina widget multiselect.

Takeaways utama:

Komponen web menyelaraskan perkembangan dengan merangkumi markup, gaya, dan skrip, meningkatkan kebolehkerjaan dan mengurangkan konflik. <li> Tutorial ini membina widget multisel yang boleh diguna semula menggunakan elemen tersuai, bayangan dom, dan templat HTML. <li> Komponen ini disokong secara asli oleh pelayar moden, dengan polyfills memastikan keserasian yang lebih luas. <li> Ciri -ciri termasuk ruang letak yang disesuaikan, kemas kini dinamik, dan pengendalian acara tersuai. <li> Memperluaskan komponen web menggunakan rangka kerja seperti polimer dan X-tag juga dibincangkan. <li>

Memahami Komponen Web:

Komponen web menangani cabaran yang disebutkan di atas. Mereka membenarkan menghubungkan fail HTML tunggal yang mengandungi pelaksanaan komponen dan menggunakannya pada halaman melalui elemen HTML tersuai. Ini meningkatkan enkapsulasi dan meningkatkan ekspresi kod. Spesifikasi teras adalah:

<li> elemen tersuai: Tentukan elemen html tersuai untuk komponen. <li> templat html: Tentukan markup komponen. <li> Shadow Dom: merangkumi struktur dalaman komponen, mengasingkannya dari gaya dan skrip halaman. <li> import html: (sebahagian besarnya digantikan) difasilitasi termasuk komponen ke dalam halaman.

mari kita membina komponen multisel yang siap pengeluaran. Demo dan kod sumber boleh didapati di GitHub.

Membina komponen multisel yang siap pengeluaran:

widget multiselek kami akan mempunyai struktur markup berikut:

<x-multiselect placeholder="Select Item">
  <li value="1" selected>Item 1</li>
  <li value="2">Item 2</li>
  <li value="3" selected>Item 3</li>
</x-multiselect>

elemen <x-multiselect> menggunakan atribut placeholder. Senarai item () mempunyai atribut <li> dan value. Komponen ini mendedahkan kaedah selected yang mengembalikan pelbagai nilai yang dipilih (selectedItems() dalam contoh ini). Ia juga membakar acara [1, 3] pada perubahan pemilihan. Matlamatnya adalah keserasian penyemak imbas moden penuh. change

template (): multiselect.html

komponen HTML, CSS, dan JavaScript tinggal di

. Templat HTML mentakrifkan struktur komponen: multiselect.html

<template id="multiselectTemplate">
  <style>
    /* component styles */
  </style>
  <div class="multiselect">
    <div class="multiselect-field"></div>
    <div class="multiselect-popup">
      <ul class="multiselect-list">
        <content select="li"></content>
      </ul>
    </div>
  </div>
</template>

elemen

elemen <content select="li"> unsur dari elemen tuan rumah ke dalam bayangan dom. <li>

Penciptaan komponen:

JavaScript mendaftarkan elemen tersuai:

// 1. Find template
var ownerDocument = document.currentScript.ownerDocument;
var template = ownerDocument.querySelector('#multiselectTemplate');

// 2. Create component prototype
var multiselectPrototype = Object.create(HTMLElement.prototype);

// 3. Define createdCallback
multiselectPrototype.createdCallback = function() {
  var root = this.createShadowRoot();
  var content = document.importNode(template.content, true);
  root.appendChild(content);
};

// 4. Register custom element
document.registerElement('x-multiselect', { prototype: multiselectPrototype });

Ini melibatkan mencari templat, mewujudkan prototaip yang mewarisi dari

, menentukan HTMLElement.prototype untuk membuat bayangan dom, dan mendaftarkan elemen tersuai. createdCallback

(selebihnya pelaksanaan komponen, termasuk rendering, pengendalian acara, pengendalian atribut, dan gaya, akan diikuti di sini. Oleh kerana kekangan panjang, ia ditinggalkan tetapi boleh didapati di repositori github yang dikaitkan.)

sokongan penyemak imbas dan polyfills:

Komponen web mempunyai sokongan yang sangat baik dalam pelayar moden, tetapi polyfills seperti

memastikan keserasian di semua pelayar utama. Halaman Demo menunjukkan penggunaan dan menangani isu-isu berkaitan polyfill yang berpotensi (seperti pengendalian

variasi dan gaya dom shadow). webcomponentsjs document.currentScript

polimer dan x-tag:

kerangka seperti polimer dan x-tag memudahkan pembangunan komponen web, menawarkan ciri tambahan dan mengurangkan kod boilerplate.

Kesimpulan:

Komponen web secara signifikan memajukan pembangunan web. Tutorial ini mempamerkan membina komponen multisel berfungsi, menonjolkan kuasa dan faedah teknologi ini. Ingatlah untuk berunding dengan artikel "Cara Membuat Komponen Web yang boleh diakses" untuk amalan terbaik aksesibiliti.

Atas ialah kandungan terperinci Membuat komponen multiselect sebagai komponen web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!