Membina komponen web interoperable yang berfungsi

Mereka yang telah menjadi pemaju web lebih daripada beberapa tahun mungkin telah menulis kod menggunakan lebih daripada satu kerangka JavaScript. Dengan semua pilihan di luar sana - bertindak balas, svelte, vue, sudut, pepejal - semuanya tidak dapat dielakkan. Salah satu perkara yang lebih mengecewakan yang perlu kita hadapi ketika bekerja merentasi kerangka adalah membuat semula semua komponen UI peringkat rendah: butang, tab, dropdowns, dan lain-lain. Atau vue. Atau pepejal. Dan sebagainya.

Bukankah lebih baik jika kita dapat menentukan komponen UI peringkat rendah ini sekali, dengan cara rangka kerja-agnostik, dan kemudian gunakannya antara kerangka? Sudah tentu ia akan! Dan kita boleh; Komponen web adalah cara. Catatan ini akan menunjukkan kepada anda bagaimana.

Setakat ini, cerita SSR untuk komponen web agak kurang. Declarative Shadow Dom (DSD) adalah bagaimana komponen web adalah pelayan yang diberikan, tetapi, seperti penulisan ini, ia tidak diintegrasikan dengan kerangka aplikasi kegemaran anda seperti Next, Remix atau Sveltekit. Jika itu keperluan untuk anda, pastikan anda menyemak status terkini DSD. Tetapi jika tidak, jika SSR bukan sesuatu yang anda gunakan, baca terus.

Pertama, beberapa konteks

Komponen web pada dasarnya adalah unsur-unsur HTML yang anda tentukan diri anda, seperti atau apa sahaja, dari bawah ke atas. Mereka dilindungi di sini di CSS-Tricks (termasuk siri yang luas oleh Caleb Williams dan satu oleh John Rhea) tetapi kami akan berjalan secara ringkas melalui proses itu. Pada asasnya, anda menentukan kelas JavaScript, mewarisi dari Htmlelement, dan kemudian menentukan apa -apa sifat, atribut dan gaya komponen web dan, tentu saja, markup ia akhirnya akan diberikan kepada pengguna anda.

Mampu menentukan unsur -unsur HTML tersuai yang tidak terikat kepada komponen tertentu adalah menarik. Tetapi kebebasan ini juga merupakan batasan. Sedang secara bebas dari mana -mana rangka kerja JavaScript bermakna anda tidak boleh berinteraksi dengan rangka kerja JavaScript. Fikirkan komponen React yang mengambil beberapa data dan kemudian membuat beberapa komponen React lain , melalui data. Ini tidak akan berfungsi sebagai komponen web, kerana komponen web tidak tahu bagaimana untuk memberikan komponen React.

Komponen web terutamanya cemerlang sebagai komponen daun . Komponen daun adalah perkara terakhir yang akan diberikan dalam pokok komponen. Ini adalah komponen yang menerima beberapa alat, dan menjadikan beberapa UI. Ini bukan komponen yang duduk di tengah -tengah pokok komponen anda, melewati data bersama, menetapkan konteks, dan lain -lain - hanya kepingan UI yang murni yang akan kelihatan sama, tidak kira kerangka JavaScript yang menguasai seluruh aplikasi.

Komponen web yang kami bina

Daripada membina sesuatu yang membosankan (dan biasa), seperti butang, mari kita bina sesuatu yang sedikit berbeza. Dalam jawatan terakhir saya, kami melihat menggunakan pratonton imej kabur untuk mengelakkan kandungan reflow, dan memberikan UI yang baik untuk pengguna semasa imej kami memuatkan. Kami melihat Base64 mengodkan versi kabur, terdegradasi imej kami, dan menunjukkan bahawa dalam UI kami sementara imej sebenar dimuatkan. Kami juga melihat menghasilkan pratonton yang sangat padat, kabur menggunakan alat yang dipanggil Blurhash.

Jawatan itu menunjukkan kepada anda bagaimana untuk menjana pratonton tersebut dan menggunakannya dalam projek React. Siaran ini akan menunjukkan kepada anda cara menggunakan pratonton tersebut dari komponen web supaya mereka boleh digunakan oleh mana -mana rangka kerja JavaScript.

Tetapi kita perlu berjalan sebelum kita dapat berlari, jadi kita akan berjalan melalui sesuatu yang remeh dan bodoh terlebih dahulu untuk melihat dengan tepat bagaimana komponen web berfungsi.

Segala -galanya dalam jawatan ini akan membina komponen web vanila tanpa sebarang perkakas. Ini bermakna kod itu akan mempunyai sedikit boilerplate, tetapi harus mudah diikuti. Alat seperti Lit atau Stensil direka untuk membina komponen web dan boleh digunakan untuk mengeluarkan banyak boilerplate ini. Saya menggesa anda untuk menyemaknya! Tetapi untuk jawatan ini, saya lebih suka sedikit lebih banyak boilerplate sebagai pertukaran kerana tidak perlu memperkenalkan dan mengajar kebergantungan yang lain.

Komponen kaunter yang mudah

Mari kita bina klasik "Hello World" komponen JavaScript: Kaunter. Kami akan memberikan nilai, dan butang yang meningkatkan nilai itu. Mudah dan membosankan, tetapi ia akan membolehkan kita melihat komponen web yang paling mudah.

Untuk membina komponen web, langkah pertama adalah membuat kelas JavaScript, yang mewarisi dari Htmlelement:

 Kaunter kelas memanjangkan htmlelement {}

Langkah terakhir ialah mendaftarkan komponen web, tetapi hanya jika kita belum mendaftarkannya:

 jika (! customElements.get ("counter-wc")) {
  customElements.define ("counter-wc", counter);
}

Dan, tentu saja, menjadikannya:

 <counter-wc> </counter-wc>

Dan segala -galanya di antara kita membuat komponen web melakukan apa sahaja yang kita mahu. Satu kaedah kitaran hayat biasa adalah ConnectedCallback, yang kebakaran apabila komponen web kami ditambahkan ke DOM. Kami boleh menggunakan kaedah itu untuk menjadikan apa sahaja kandungan yang kami mahukan. Ingat, ini adalah kelas JS yang mewarisi dari HTMLElement, yang bermaksud nilai ini adalah elemen komponen web itu sendiri, dengan semua kaedah manipulasi DOM biasa yang anda sudah tahu dan suka.

Pada yang paling mudah, kita boleh melakukan ini:

 Kaunter kelas memanjangkan htmlelement {
  connectedCallback () {
    this.innerHtml = "<div style="'color:" green> hey </div>";
  }
}

jika (! customElements.get ("counter-wc")) {
  customElements.define ("counter-wc", counter);
}

... yang akan berfungsi dengan baik.

Menambah kandungan sebenar

Mari tambahkan beberapa kandungan yang berguna dan interaktif. Kami memerlukan untuk memegang nilai nombor semasa dan untuk meningkatkan kaunter. Buat masa ini, kami akan membuat kandungan ini dalam pembina kami dan menambahnya apabila komponen web sebenarnya berada di Dom:

 pembina () {
  super ();
  const container = document.createElement ('div');

  this.valspan = document.createElement ('span');

  const increment = document.createElement ('button');
  increment.Innertext = 'Increment';
  increment.addeventListener ('klik', () => {
    Ini.#nilai = ini.#CurrentValue 1;
  });

  container.AppendChild (this.valspan);
  container.AppendChild (Document.CreateeLement ('Br'));
  container.appendchild (kenaikan);

  this.container = container;
}

connectedCallback () {
  this.appendchild (this.container);
  this.update ();
}

Sekiranya anda benar -benar disebarkan oleh penciptaan DOM manual, ingatlah anda boleh menetapkan innerHTML, atau bahkan membuat elemen templat sekali sebagai harta statik kelas komponen web anda, klon itu, dan masukkan kandungan untuk contoh komponen web baru. Mungkin ada beberapa pilihan lain yang saya tidak fikirkan, atau anda sentiasa boleh menggunakan kerangka komponen web seperti menyala atau stensil. Tetapi untuk jawatan ini, kami akan terus mengekalkannya.

Bergerak, kami memerlukan harta kelas JavaScript yang diselesaikan Nama Nilai

 #CurrentValue = 0;

Tetapkan #Value (val) {
  Ini.#currentValue = val;
  this.update ();
}

Ia hanya harta kelas standard dengan setter, bersama dengan harta kedua untuk memegang nilai. Satu twist yang menyeronokkan ialah saya menggunakan sintaks harta kelas JavaScript swasta untuk nilai -nilai ini. Ini bermakna tiada siapa di luar komponen web kami yang boleh menyentuh nilai -nilai ini. Ini adalah JavaScript standard yang disokong dalam semua pelayar moden, jadi jangan takut menggunakannya.

Atau jangan ragu untuk memanggilnya _value jika anda lebih suka. Dan, akhirnya, kaedah kemas kini kami:

 kemas kini () {
  this.valspan.innertext = this.#currentValue;
}

Ia berfungsi!

Jelas sekali ini bukan kod yang anda mahu mengekalkan skala. Berikut adalah contoh kerja penuh jika anda ingin melihat lebih dekat. Seperti yang saya katakan, alat seperti Lit dan Stensil direka untuk menjadikannya lebih mudah.

Menambah lebih banyak fungsi

Siaran ini bukan menyelam yang mendalam ke dalam komponen web. Kami tidak akan menutup semua API dan Lifecycles; Kami tidak akan menutup akar bayangan atau slot. Terdapat kandungan yang tidak berkesudahan pada topik tersebut. Matlamat saya di sini adalah untuk memberikan pengenalan yang cukup baik untuk mencetuskan minat, bersama -sama dengan beberapa panduan yang berguna untuk menggunakan komponen web dengan kerangka JavaScript yang popular yang anda sudah tahu dan suka.

Untuk itu, mari kita meningkatkan komponen web kaunter kita sedikit. Mari kita terima atribut warna, untuk mengawal warna nilai yang dipaparkan. Dan mari kita juga menerima harta kenaikan, jadi pengguna komponen web ini dapat meningkatkannya sebanyak 2, 3, 4 pada satu masa. Dan untuk memacu perubahan keadaan ini, mari kita gunakan kaunter baru kami di kotak pasir yang svelte - kita akan dapat bertindak balas sedikit.

Kami akan bermula dengan komponen web yang sama seperti sebelumnya dan menambah atribut warna. Untuk mengkonfigurasi komponen web kami untuk menerima dan memberi respons kepada atribut, kami menambah harta yang diperhatikan statik yang mengembalikan atribut yang didengarkan oleh komponen web kami.

 Static ObservedAttributes = ["Color"];

Dengan itu, kita boleh menambah kaedah kitaran hayat AttributeChangedCallback, yang akan dijalankan apabila mana -mana atribut yang disenaraikan dalam ObservedAttributes ditetapkan, atau dikemas kini.

 AttributeChangedCallback (nama, OldValue, NewValue) {
  jika (nama === "warna") {
    this.update ();
  }
}

Sekarang kami mengemas kini kaedah kemas kini kami untuk menggunakannya:

 kemas kini () {
  this.valspan.innertext = this._currentValue;
  this.valspan.style.color = this.getAttribute ("color") || "Hitam";
}

Akhir sekali, mari kita tambahkan harta kenaikan kami:

 kenaikan = 1;

Sederhana dan rendah hati.

Menggunakan komponen kaunter di Svelte

Mari kita gunakan apa yang baru saja kita buat. Kami akan masuk ke komponen aplikasi kami dan menambah sesuatu seperti ini:

 <script>
  biarkan warna = "merah";
</script>

<yaya>
  Utama {
    Teks-Align: Pusat;
  }


<tain>
  <pilih bind: value="{color}">
    <opsyen nilai="merah"> merah 
    <opsyen nilai="hijau"> hijau 
    <opsyen nilai="biru"> biru 
  </opsyen></opsyen></opsyen></pilih>

  <counter-wc color="{color}"> </counter-wc>
</tain></yaya>

Dan ia berfungsi! Kaunter kami membuat, kenaikan, dan dropdown mengemas kini warna. Seperti yang dapat anda lihat, kami menjadikan atribut warna dalam template svelte kami dan, apabila nilai berubah, Svelte mengendalikan kerja keras memanggil setAttribute pada contoh komponen web kami. Tidak ada yang istimewa di sini: Ini adalah perkara yang sama yang sudah dilakukan untuk sifat -sifat mana -mana elemen HTML.

Perkara mendapat sedikit menarik dengan kenaikan kenaikan. Ini bukan atribut di komponen web kami; Ia adalah alat yang lebih baik di kelas komponen web. Ini bermakna ia perlu ditetapkan pada contoh komponen web. Beruang dengan saya, kerana perkara -perkara akan lebih mudah sedikit.

Pertama, kami akan menambah beberapa pembolehubah kepada komponen Svelte kami:

 biarkan kenaikan = 1;
Biarkan Wcinstance;

Komponen kaunter kami akan membiarkan anda meningkat sebanyak 1, atau dengan 2:

 <butang on: klik="{()"> kenaikan = 1}> kenaikan 1 </butang>
<butang on: klik="{()"> kenaikan = 2}> kenaikan 2 </butang>

Tetapi, secara teori , kita perlu mendapatkan contoh sebenar komponen web kami. Ini adalah perkara yang sama yang selalu kita lakukan pada bila -bila masa kita menambah ref dengan React. Dengan Svelte, ia adalah ikatan yang mudah: Arahan ini:

 <counter-wc bind: this="{wcinstance}" color="{color}"> </counter-wc>

Sekarang, dalam template kami, kami mendengar perubahan kepada pembolehubah kenaikan komponen kami dan menetapkan harta komponen web yang mendasari.

 $: {
  jika (wcinstance) {
    wcinstance.increment = kenaikan;
  }
}

Anda boleh mengujinya di demo langsung ini.

Kami jelas tidak mahu melakukan ini untuk setiap komponen web atau prop kami perlu mengurus. Bukankah lebih baik jika kita hanya dapat menetapkan kenaikan tepat pada komponen web kita, dalam markup, seperti yang biasanya kita lakukan untuk alat komponen, dan memilikinya, anda tahu, hanya bekerja ? Dalam erti kata lain, ia akan menjadi baik jika kita dapat memadamkan semua penggunaan wcinstance dan menggunakan kod mudah ini sebaliknya:

 <counter-wc increment="{increment}" color="{color}"> </counter-wc>

Ternyata kita boleh. Kod ini berfungsi; Svelte mengendalikan semua kerja keras untuk kami. Semak dalam demo ini. Ini adalah tingkah laku standard untuk hampir semua kerangka JavaScript.

Jadi mengapa saya menunjukkan cara manual untuk menetapkan prop komponen web? Dua sebab: Ia berguna untuk memahami bagaimana perkara -perkara ini berfungsi dan, seketika yang lalu, saya berkata ini berfungsi untuk "hampir" semua kerangka JavaScript. Tetapi ada satu rangka kerja yang, dengan gila, tidak menyokong tetapan prop komponen web seperti yang kita lihat.

React adalah binatang yang berbeza

Bertindak balas. Rangka kerja JavaScript yang paling popular di planet ini tidak menyokong interop asas dengan komponen web. Ini adalah masalah yang terkenal yang unik untuk bertindak balas. Menariknya, ini sebenarnya ditetapkan dalam cawangan eksperimen React, tetapi atas sebab tertentu tidak digabungkan ke dalam versi 18. Yang mengatakan, kita masih dapat menjejaki kemajuannya. Dan anda boleh mencuba ini dengan demo secara langsung.

Penyelesaiannya, tentu saja, adalah menggunakan ref, ambil contoh komponen web, dan menetapkan kenaikan secara manual apabila nilai itu berubah. Nampaknya ini:

 import react, {usestate, useref, useeffect} dari 'react';
import './counter-wc';

Eksport App Fungsi Lalai () {
  const [kenaikan, setIncrement] = useState (1);
  const [warna, setColor] = useState ('merah');
  const wcref = useref (null);

  useeffect (() => {
    wcref.current.increment = kenaikan;
  }, [kenaikan]);

  kembali (
    <dana>
      <div classname="incon-container">
        <butang onclick="{()"> setIncrement (1)}> kenaikan dengan 1 </butang>
        <butang onclick="{()"> setIncrement (2)}> kenaikan dengan 2 </butang>
      </div>

      <pilih nilai="{color}" onchange="{(e)"> setColor (e.target.value)}>
        <opsyen nilai="merah"> merah 
        <opsyen nilai="hijau"> hijau 
        <opsyen nilai="biru"> biru 
      </opsyen></opsyen></opsyen></pilih>

      <counter-wc ref="{wcref}" increment="{increment}" color="{color}"> </counter-wc>
    
  );
}</dana>

Demo langsung

Seperti yang kita bincangkan, pengekodan ini secara manual untuk setiap harta komponen web hanya tidak berskala. Tetapi semuanya tidak hilang kerana kita mempunyai beberapa pilihan.

Pilihan 1: Gunakan atribut di mana sahaja

Kami mempunyai atribut. Jika anda mengklik demo React di atas, prop kenaikan tidak berfungsi, tetapi warna itu berubah dengan betul. Tidak bolehkah kita mengodkan semuanya dengan atribut? Malangnya, tidak. Nilai atribut hanya boleh menjadi rentetan. Itu cukup baik di sini, dan kami akan dapat jauh dengan pendekatan ini. Nombor seperti kenaikan boleh ditukar ke dan dari rentetan. Kami juga boleh JSON Stringify/Parse Objects. Tetapi akhirnya kita perlu lulus fungsi ke dalam komponen web, dan pada ketika itu kita akan keluar dari pilihan.

Pilihan 2: Balut

Ada pepatah lama bahawa anda dapat menyelesaikan masalah dalam sains komputer dengan menambahkan tahap ketidakpuasan (kecuali masalah terlalu banyak tahap indirection). Kod untuk menetapkan alat ini cukup diramalkan dan mudah. Bagaimana jika kita menyembunyikannya di perpustakaan? Orang pintar di belakang LIT mempunyai satu penyelesaian. Perpustakaan ini mewujudkan komponen React baru untuk anda selepas anda memberikan komponen web, dan menyenaraikan sifat yang diperlukan. Walaupun pandai, saya bukan peminat pendekatan ini.

Daripada mempunyai pemetaan satu-satu komponen web untuk komponen reaksi yang dibuat secara manual, apa yang saya lebih suka hanyalah satu komponen yang bertindak balas yang kami lulus nama tag komponen web kami ke (counter-wc dalam kes kami)-bersama-sama dengan semua atribut dan sifat-dan untuk komponen ini untuk menjadikan komponen web kami, tambah ref, kemudian memikirkan apa yang ada pada apa yang ada pada Itulah penyelesaian yang ideal pada pendapat saya. Saya tidak tahu perpustakaan yang melakukan ini, tetapi ia harus mudah untuk dicipta. Mari kita pukulan!

Ini adalah penggunaan yang kami cari:

 <wcwrapper wctag="counter-wc" increment="{increment}" color="{color}"></wcwrapper>

WCTAG adalah nama tag komponen web; Selebihnya adalah sifat dan sifat yang kita mahu lulus.

Inilah pelaksanaan saya seperti:

 Import React, {Createeelement, useref, Uselayouteffect, Memo} dari 'React';

const _wcWrapper = (props) => {
  const {wctag, kanak -kanak, ... restprops} = props;
  const wcref = useref (null);

  uselayouteffect (() => {
    const wc = wcref.current;

    untuk (const [kunci, nilai] object.entries (restprops)) {
      jika (kunci dalam wc) {
        jika (wc [kunci]! == nilai) {
          WC [KEY] = Nilai;
        }
      } else {
        jika (wc.getAttribute (kunci)! == nilai) {
          WC.SetAttribute (kunci, nilai);
        }
      }
    }
  });

  kembali createelement (wctag, {ref: wcref});
};

eksport const wcWrapper = memo (_wcWrapper);

Garis yang paling menarik adalah pada akhirnya:

 kembali createelement (wctag, {ref: wcref});

Inilah cara kita membuat elemen dalam React dengan nama dinamik. Malah, inilah yang bertindak balas biasanya mengalihkan jsx ke. Semua div kami ditukar kepada panggilan Createeelement ("Div"). Kami biasanya tidak perlu memanggil API ini secara langsung tetapi ada ketika kami memerlukannya.

Selain itu, kami mahu menjalankan kesan susun atur dan gelung melalui setiap prop yang telah kami lalui kepada komponen kami. Kami gelung melalui mereka semua dan periksa untuk melihat sama ada ia adalah harta dengan pemeriksaan yang memeriksa objek Instance Component Web serta rantaian prototaipnya, yang akan menangkap mana -mana getters/setters yang digerakkan pada prototaip kelas. Sekiranya tiada harta semacam itu, ia dianggap sebagai atribut. Dalam kedua -dua kes, kami hanya menetapkannya jika nilai sebenarnya telah berubah.

Jika anda tertanya -tanya mengapa kami menggunakan uselayouteffect dan bukannya usahan, ini kerana kami mahu segera menjalankan kemas kini ini sebelum kandungan kami diberikan. Juga, ambil perhatian bahawa kami tidak mempunyai pelbagai pergantungan kepada uselayouteffect kami; Ini bermakna kita mahu menjalankan kemas kini ini pada setiap render . Ini boleh berisiko kerana React cenderung untuk membuat semula banyak . Saya memperbaiki ini dengan membungkus segala -galanya dalam react.memo. Ini pada dasarnya adalah versi moden React.PureComponent, yang bermaksud komponen hanya akan membuat semula jika mana-mana alat peraga sebenar telah berubah-dan ia memeriksa sama ada itu berlaku melalui pemeriksaan kesamaan yang mudah.

Satu-satunya risiko di sini adalah bahawa jika anda melewati prop objek yang anda bermutasi secara langsung tanpa menugaskan semula, maka anda tidak akan melihat kemas kini. Tetapi ini sangat tidak digalakkan, terutamanya dalam komuniti React, jadi saya tidak akan bimbang mengenainya.

Sebelum bergerak, saya ingin memanggil satu perkara terakhir. Anda mungkin tidak berpuas hati dengan bagaimana penggunaannya kelihatan. Sekali lagi, komponen ini digunakan seperti ini:

 <wcwrapper wctag="counter-wc" increment="{increment}" color="{color}"></wcwrapper>

Khususnya, anda mungkin tidak suka lulus nama tag komponen web ke komponen dan lebih suka sebaliknya pakej @lit-labs/react di atas, yang mewujudkan komponen reaksi individu baru untuk setiap komponen web. Itu benar -benar adil dan saya akan menggalakkan anda menggunakan apa sahaja yang anda paling selesa. Tetapi bagi saya, satu kelebihan dengan pendekatan ini adalah mudah untuk memadam . Jika oleh beberapa keajaiban React menggabungkan pengendalian komponen web yang betul dari cawangan eksperimen mereka ke Main Esok, anda akan dapat mengubah kod di atas dari ini:

 <wcwrapper wctag="counter-wc" increment="{increment}" color="{color}"></wcwrapper>

... untuk ini:

 <counter-wc ref="{wcref}" kenaikan="{kenaikan}" color="{color}"></counter-wc>

Anda mungkin boleh menulis satu codemod tunggal untuk melakukannya di mana -mana, dan kemudian memadam sama sekali. Sebenarnya, gores itu: carian global dan gantikan dengan regex mungkin akan berfungsi.

Pelaksanaannya

Saya tahu, nampaknya ia mengambil perjalanan untuk sampai ke sini. Jika anda ingat, matlamat asal kami adalah untuk mengambil kod pratonton imej yang kami lihat dalam jawatan terakhir saya, dan gerakkannya ke komponen web supaya dapat digunakan dalam rangka kerja JavaScript. Kekurangan Interop yang betul menambah banyak terperinci kepada campuran. Tetapi sekarang kita mempunyai pemegang yang baik tentang cara membuat komponen web, dan menggunakannya, pelaksanaannya akan hampir menjadi anti-climactic.

Saya akan menjatuhkan keseluruhan komponen web di sini dan memanggil beberapa bit yang menarik. Jika anda ingin melihatnya dalam tindakan, inilah demo kerja. Ia akan beralih antara tiga buku kegemaran saya mengenai tiga bahasa pengaturcaraan kegemaran saya. URL untuk setiap buku akan menjadi unik setiap kali, jadi anda dapat melihat pratonton, walaupun anda mungkin ingin mendekati perkara dalam tab Rangkaian Devtools anda untuk benar -benar melihat perkara yang berlaku.

Lihat keseluruhan kod

 Bookcover kelas memanjangkan htmlelement {
  Static ObservedAttributes = ['url'];

  AttributeChangedCallback (nama, OldValue, NewValue) {
    jika (nama === 'url') {
      this.CreeateMainImage (newValue);
    }
  }

  Tetapkan pratonton (val) {
    this.previewel = this.createpreview (val);
    this.render ();
  }

  createPreview (val) {
    jika (typeof val === 'string') {
      kembali Base64Preview (Val);
    } else {
      kembali BlurHashPreview (Val);
    }
  }

  createMainimage (url) {
    this.loaded = false;
    const img = document.createeLement ('img');
    img.alt = 'penutup buku';
    img.addeventListener ('beban', () = & gt; {
      jika (img === this.imageel) {
        this.loaded = true;
        this.render ();
      }
    });
    img.src = url;
    this.imageel = img;
  }

  connectedCallback () {
    this.render ();
  }

  render () {
    const elementMaybe = this.loaded? this.imageel: this.previewel;
    SyncSingLechild (ini, ElementMaybe);
  }
}

Pertama, kami mendaftarkan atribut yang kami minati dan bertindak balas apabila ia berubah:

 Static ObservedAttributes = ['url'];

AttributeChangedCallback (nama, OldValue, NewValue) {
  jika (nama === 'url') {
    this.CreeateMainImage (newValue);
  }
}

Ini menyebabkan komponen imej kita dibuat, yang akan ditunjukkan hanya apabila dimuatkan:

 createMainimage (url) {
  this.loaded = false;
  const img = document.createeLement ('img');
  img.alt = 'penutup buku';
  img.addeventListener ('beban', () => {
    jika (img === this.imageel) {
      this.loaded = true;
      this.render ();
    }
  });
  img.src = url;
  this.imageel = img;
}

Seterusnya kami mempunyai harta pratonton kami, yang boleh menjadi rentetan pratonton Base64 kami, atau paket blurhash kami:

 Tetapkan pratonton (val) {
  this.previewel = this.createpreview (val);
  this.render ();
}

createPreview (val) {
  jika (typeof val === 'string') {
    kembali Base64Preview (Val);
  } else {
    kembali BlurHashPreview (Val);
  }
}

Ini menangguhkan fungsi pembantu yang kita perlukan:

 fungsi base64preview (val) {
  const img = document.createeLement ('img');
  img.src = val;
  kembali img;
}

fungsi blurHashPreview (pratonton) {
  const canvasel = document.createElement ('canvas');
  const {w: lebar, h: ketinggian} = pratonton;

  canvasel.width = width;
  canvasel.height = ketinggian;

  const pixels = decode (preview.blurhash, lebar, ketinggian);
  const ctx = canvasel.getContext ('2d');
  const ImageData = ctx.createImagedata (lebar, ketinggian);
  ImageData.data.set (piksel);
  ctx.putimagedata (ImageData, 0, 0);

  kembali kanvas;
}

Dan, akhirnya, kaedah render kami:

 connectedCallback () {
  this.render ();
}

render () {
  const elementMaybe = this.loaded? this.imageel: this.previewel;
  SyncSingLechild (ini, ElementMaybe);
}

Dan beberapa kaedah pembantu untuk mengikat semuanya bersama -sama:

 Fungsi Eksport SyncsingLechild (bekas, kanak -kanak) {
  const currentChild = container.FirStElementChild;
  jika (currentChild! == anak) {
    ClearContainer (bekas);
    jika (anak) {
      container.appendchild (anak);
    }
  }
}

Fungsi Eksport ClearContainer (EL) {
  biarkan anak;

  sementara ((anak = el.firstelementchild)) {
    el.removechild (anak);
  }
}

Ia sedikit lebih banyak daripada yang kita perlukan jika kita membina ini dalam rangka kerja, tetapi terbalik adalah bahawa kita boleh menggunakan semula ini dalam rangka kerja yang kita suka-walaupun React akan memerlukan pembungkus buat masa ini, seperti yang kita dibincangkan.

Kemungkinan dan berakhir

Saya sudah menyebut pembalut reaksi Lit. Tetapi jika anda mendapati diri anda menggunakan stensil, ia sebenarnya menyokong saluran paip output yang berasingan hanya untuk React. Dan orang -orang yang baik di Microsoft juga telah mencipta sesuatu yang serupa dengan pembalut Lit, yang dilampirkan ke perpustakaan komponen Web yang cepat.

Seperti yang saya nyatakan, semua kerangka yang tidak dinamakan React akan mengendalikan penetapan sifat komponen web untuk anda. Hanya ambil perhatian bahawa ada yang mempunyai beberapa perisa khas sintaks. Sebagai contoh, dengan pepejal.js, selalu mengandaikan bahawa nilai adalah harta, yang anda boleh menimpa dengan awalan attr, seperti .

Membungkus

Komponen web adalah bahagian yang menarik, sering tidak digunakan dari landskap pembangunan web. Mereka boleh membantu mengurangkan pergantungan anda terhadap mana -mana rangka kerja JavaScript tunggal dengan menguruskan komponen UI, atau "daun" anda. Walaupun mencipta ini sebagai komponen web - berbanding dengan komponen Svelte atau React - tidak akan menjadi ergonomik, terbalik adalah bahawa mereka akan digunakan secara meluas.

Atas ialah kandungan terperinci Membina komponen web interoperable yang berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!