API Komponen Web Kalis Peluru

Komponen web/elemen tersuai menyediakan beberapa ciri hebat yang boleh menjadikan UX anda lebih cekap dan berskala, tetapi terdapat beberapa "gotcha" yang boleh menghalang pasukan daripada mendapat pengalaman yang baik dengan komponen anda.

Masalahnya

Salah satu perkara hebat tentang elemen tersuai/komponen web kadangkala boleh menjadi cabaran untuk mereka - ia boleh digunakan di mana-mana sahaja. Anda tidak pernah tahu sama ada ia digunakan dalam rangka kerja, dalam persekitaran selamat jenis, dipaparkan pada pelayan dengan bahasa seperti PHP, dicipta secara pemrograman menggunakan fungsi creatElement JavaScript, atau bahkan dalam HTML biasa.

Cabarannya ialah tiada cara yang konsisten untuk memastikan API komponen web anda dilaksanakan dengan betul. Oleh sebab itu, salah satu item dalam senarai semak PR perpustakaan komponen kami ialah:

✅ Atribut dan sifat berfungsi apabila ditetapkan, dinyahtetapkan dan ditetapkan dengan buruk.

Sebagai contoh, dalam pustaka kami, kami mempunyai komponen "input" yang, seperti elemen, mempunyai atribut jenis dengan beberapa nilai tertentu. Ia tidak mempunyai semua pilihan yang sama kerana kami mempunyai komponen khusus untuk beberapa kawalan lain seperti radio dan kotak pilihan.

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

NOTA: Contoh kod menggunakan Lit, tetapi prinsip yang dibincangkan di sini boleh digunakan pada perpustakaan dan rangka kerja lain.

Apabila kami menguji menguji atribut ini, kami mendapat hasil yang tidak konsisten.

• Set
  • semuanya berfungsi seperti yang diharapkan.

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

• Nyahtetapkan
  • komponen berfungsi dengan baik apabila atribut tidak ditetapkan kerana nilai lalai
  • komponen dipaparkan dengan betul apabila sifat tidak ditentukan kerana elemen HTML dalaman adalah berdaya tahan, tetapi logik tersuai dan pengesahan dalam pecahan komponen

// When the attribute is not set
<my-input></my-input>

// When the property is `undefined` (example using JSX)
<my-input type={undefined}></my-input>

• Set yang buruk
  • menetapkan nilai atribut jenis kepada "sampah" menghasilkan input teks, tetapi juga memecahkan logik dan pengesahan tersuai kami.
  • menetapkannya kepada nilai yang merupakan jenis input HTML yang sah, tetapi bukan yang telah kami tetapkan untuk komponen, menjadikan kawalan yang tidak dimaksudkan untuk komponen kami yang bukan sahaja memecahkan logik dan pengesahan tersuai kami, tetapi juga gaya/reka bentuk kami .

<!-- not a real type -->
<my-input type="rubbish"></my-input>

<!-- we don't want users using this type -->
<my-input type="range"></my-input>

Anda boleh menguji contoh ini di sini:

Bagaimana kita membetulkannya?

Saya perasan bahawa elemen HTML asli nampaknya melepasi ujian "set, unset, and poorly set", jadi mari lihat sama ada kita boleh belajar daripadanya.

Apabila saya menetapkan atribut input asli dengan buruk dan log nilai sifat, saya dapat melihat sebab ia berfungsi.

<!-- set the value to a non-standard type -->
<input type="rubbish" />
<input>



<p>If an invalid value is assigned to the attribute or property, it falls back to a default value. We should be able to do the same and still maintain strong typing.</p>

<p>Let's start by creating a list of valid values and a type for our property.<br>
</p>

<pre class="brush:php;toolbar:false">const inputTypes = [
  'color',
  'date',
  'email',
  'number',
  'password',
  'search',
  'tel',
  'text',
] as const;

Kami boleh menggunakan tatasusunan untuk mencipta jenis kesatuan untuk pengesahan TypeScript.

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

Kini kami boleh mengemas kini sifat elemen tersuai kami dengan beberapa logik pengesahan. Kami boleh melakukan ini dengan menukar harta sedia ada kami kepada pengambil dan penetap kelas JavaScript standard.

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

Inilah hasil akhir kami:

Kesimpulan

Dengan adanya pengesahan baharu ini, komponen input kami jauh lebih berdaya tahan berbanding sebelum ini dan juga membolehkan pengesahan yang lebih kompleks jika perlu. Kaedah ini juga mungkin berlebihan untuk sesetengah atribut anda, terutamanya yang digunakan untuk penggayaan. Untuk senario tersebut, pastikan anda menyemak artikel ini.

Atas ialah kandungan terperinci API Komponen Web Kalis Peluru. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!