Membina komponen web tersuai dengan X-Tag

3

Takeaways Key

X-Tag, perpustakaan JavaScript yang disokong oleh Microsoft, menyediakan antara muka yang kaya, yang kaya dengan ciri-ciri untuk pembangunan komponen web yang cepat, yang memberi tumpuan terutamanya kepada API Elemen Custom. X-Tag pada asalnya merupakan projek Mozilla, tetapi kini merupakan projek yang disokong oleh Microsoft, sama seperti bagaimana Google mengembalikan kerangka polimer.

Membuat elemen tersuai dengan X-Tag sepenuhnya didorong oleh JavaScript, menggunakan kaedah XTAG.Register (). Proses ini melibatkan mendefinisikan kitaran hayat, kaedah, dan peristiwa hidup elemen.

X-TAG menyediakan API yang lebih mudah untuk melaksanakan unsur-unsur tersuai berbanding dengan polimer, menjadikannya pilihan yang sesuai untuk pemaju yang bertujuan untuk mengekalkan cahaya dan fleksibel mereka. Walau bagaimanapun, ia tidak menawarkan ciri -ciri kompleks yang dilakukan oleh polimer.
• Selepas penyelesaian Google dan Mozilla untuk komponen web, kini giliran Microsoft untuk memasuki ruang ini dengan pelepasan awam perpustakaan X-Tag mereka. Laman web rasmi mentakrifkannya seperti berikut:
X-Tag adalah microsoft yang disokong, sumber terbuka, perpustakaan JavaScript yang membungkus keluarga komponen web standard W3C API untuk menyediakan antara muka yang kaya, yang kaya dengan ciri-ciri untuk pembangunan komponen pesat. Walaupun X-TAG menawarkan cangkuk ciri untuk semua API komponen web (elemen tersuai, shadow dom, templat, dan import HTML), ia hanya memerlukan sokongan elemen tersuai untuk beroperasi. Dalam ketiadaan sokongan elemen adat asli, X-TAG menggunakan satu set polyfills yang dikongsi dengan rangka polimer Google.

Dengan kata lain, X-Tag adalah untuk Microsoft apa polimer ke Google. Satu-satunya perkara yang biasa bagi kedua-dua mereka adalah polyfill yang mendasari yang membolehkan sokongan untuk komponen web dalam penyemak imbas yang tidak menyokong.

bagaimana x-tag berbeza daripada polimer?

Polimer menggabungkan semua empat teknologi komponen web, iaitu, import HTML, elemen tersuai, templat Shadow DOM dan HTML ke dalam satu pakej. Ia menyediakan pemaju dengan API yang mudah digunakan untuk membina komponen web tersuai. Sebaliknya, X-Tag hanya menyediakan API elemen tersuai untuk membina komponen web tersuai. Sudah tentu, anda juga boleh menggunakan API komponen web lain bersempena dengan perpustakaan X-Tag.

Bukankah X-Tag, Projek Mozilla?

Ya, tetapi sekarang tidak lagi. Selepas beberapa penggalian, saya berjaya mengetahui bahawa pemaju asal projek X-Tag, Daniel Buchner, pernah bekerja di Mozilla ketika dia membuat perpustakaan. Tetapi sejak itu, dia telah berpindah ke Microsoft dan meneruskan projek itu. Lebih-lebih lagi, beliau adalah penyumbang tunggal kepada perpustakaan dengan bantuan dari bekas mozillian. Oleh itu, kini merupakan projek yang disokong oleh Microsoft yang diasaskan oleh bekas mozillian.

Bermula dengan X-Tag

Dalam artikel ini, kami akan membina elemen tersuai menggunakan perpustakaan X-Tag untuk membenamkan pandangan Google Map Street menggunakan markup berikut:

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span>></span></span></span>

Unsur Custom akan mempunyai dua atribut, latitud dan longitud, untuk menentukan koordinat lokasi. Oleh kerana atribut ini adalah pilihan, kami juga akan memberikan nilai lalai bagi setiap satu daripada mereka sekiranya pemaju gagal menentukannya dalam markup.

mari kita mulakan dengan memasukkan perpustakaan X-Tag JavaScript di

dokumen kami.

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Adalah penting untuk memasukkan perpustakaan X-Tag di

dokumen. Ini supaya ia dimuat turun dan dihuraikan sepenuhnya sebelum enjin rendering menemui markup elemen tersuai yang akan kita gunakan di dalam .

Menentukan elemen tersuai

Tidak seperti polimer, proses membuat elemen tersuai dengan X-Tag sepenuhnya didorong oleh JavaScript. Perpustakaan X-Tag menyediakan sekumpulan kaedah, panggilan balik, dan sifat berguna untuk menentukan tingkah laku tersuai untuk elemen kami. Kerangka biasa untuk mencipta elemen tersuai dengan X-Tag kelihatan seperti berikut:

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

• daftar () - Ini adalah kaedah yang paling penting di perpustakaan. Ia menerima nama elemen tersuai sebagai hujah pertama yang diikuti oleh definisi objek. Seperti namanya, ini bertanggungjawab untuk mendaftarkan elemen tersuai dalam dom.
• Kandungan - Sering kali, elemen tersuai mungkin memerlukan beberapa markup tambahan untuk struktur atau persembahan. Ini menerima rentetan HTML atau rentetan komen multiline untuk menyuntik markup ke dom.
• LifeCycle - Ini mengandungi kaedah panggil balik yang berguna, yang direka untuk mensasarkan peringkat yang berbeza dalam kitaran hayat elemen tersuai.
• Accessors - Ini menyediakan antara muka yang sama untuk mengakses atribut objek, setter, dan getters, dan menghubungkannya dengan atribut HTML yang sepadan. Apabila atribut dikaitkan dengan getter/setter, negeri -negeri mereka sentiasa disegerakkan.
• Kaedah - Elemen tersuai mungkin memerlukan beberapa kaedah unik mereka sendiri untuk menyediakan fungsi yang dikehendaki. Hanya tambahkan objek kaedah ke objek definisi XTAG.Register () peringkat atas dan sertakan semua kaedah yang ditentukan oleh pengguna di dalamnya.
• Acara - Ini bertanggungjawab untuk melampirkan peristiwa ke elemen tersuai. Kekunci objek ini adalah nama -nama peristiwa yang anda ingin lampirkan ke elemen tersuai seperti ketuk, fokus dan lain -lain

Idea asas adalah untuk membenamkan peta Google menggunakan iframe dan tentukan URL SRC dalam format berikut:

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><api_key>></api_key></span>&location=<span><span><latitude>></latitude></span>,<span><span><longitude>></longitude></span></span></span></span></span>

Untuk mendapatkan API_KEY, ikuti langkah -langkah yang diterangkan di sini. Sebaik sahaja anda mempunyai API_KEY, kami akan membuat iframe di dalam kaedah panggil balik yang dibuat objek kitaran hayat dan tentukan harta SRC dalam format di atas.

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span>></span></span></span>

Kod di atas berfungsi tetapi kita perlu menyingkirkan nilai koordinat berkod keras dalam iframe.src dan sebaliknya sumber nilai terus dari atribut elemen tersuai. Untuk melakukan ini, kami akan menggunakan objek Accessors, dengan nama atribut yang membentuk kunci. Kami menghubungkan mereka dengan atribut HTML dengan mengisytiharkan atribut: {}.

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

kita kemudian boleh menggunakan pembolehubah ini secara langsung sambil menentukan URL SRC:

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

Memohon sentuhan penamat

Styling Satu elemen tersuai adalah serupa dengan gaya tag HTML yang lain. Kelas, ID, dan pemilih atribut berfungsi seperti yang diharapkan dengan elemen tersuai. Sebagai contoh, kami akan menambah badai box-shadow dan sempadan sempadan ke elemen Custom yang baru dibuat.

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><api_key>></api_key></span>&location=<span><span><latitude>></latitude></span>,<span><span><longitude>></longitude></span></span></span></span></span>

menggunakan elemen tersuai kini semudah termasuk markup berikut dalam

:

<span>// Insert your API key here
</span><span>var API_KEY = <api_key>;
</api_key></span>
xtag<span>.register('google-map', {
</span>  <span>lifecycle: {
</span>    <span>created: function() { 
</span>      <span>var iframe = document.createElement('iframe');
</span>      iframe<span>.width = 600;
</span>      iframe<span>.height = 600;
</span>      iframe<span>.frameBorder = 0;
</span>      iframe<span>.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + 
</span>                    <span>API_KEY + '&location=40.7553231,35.3434';
</span>      <span>this.appendChild(iframe);
</span>    <span>}
</span>  <span>}
</span><span>});</span>

Hasil akhir dapat dilihat dalam codepen di bawah:

Lihat Pena X-Tag Elemen Custom oleh SitePoint (@SitePoint) pada Codepen.

Walaupun sokongan penyemak imbas untuk komponen web sedikit samar, demo kami menggunakan perpustakaan X-Tag dengan polyfill harus berfungsi pada semua pelayar moden termasuk IE9 dan ke atas.

Pemikiran Akhir

Berbanding dengan polimer, X-TAG menyediakan API yang lebih mudah untuk memahami dan melaksanakan unsur-unsur tersuai, kebanyakannya disebabkan oleh kekurangan ciri-ciri kompleks yang polimer. Jika anda berhasrat untuk memastikan persediaan anda cahaya dan fleksibel, dan anda tidak mempunyai kes penggunaan yang baik untuk API Komponen Web yang lain, maka X-Tag pasti kelihatan sebagai calon yang tepat untuk pekerjaan itu.

Soalan Lazim (Soalan Lazim) Mengenai Membangun Komponen Web tersuai dengan X-Tag

Apakah X-Tag dan mengapa penting dalam pembangunan web? Ia adalah sebahagian daripada Komponen Web Suite of Technologies, yang juga termasuk Shadow Dom, Templat HTML, dan Elemen Kustom. X-TAG adalah penting dalam pembangunan web kerana ia membolehkan pemaju membuat unsur-unsur HTML mereka sendiri, merangkumi kod mereka, dan menyimpan asas mereka bersih dan dapat dipelihara. Ia juga menggalakkan penggunaan semula kod, yang dapat mempercepatkan proses pembangunan dengan ketara. gunakan. Tidak seperti perpustakaan lain, X-Tag tidak memerlukan langkah-langkah binaan atau transpilasi, dan ia mempunyai jejak yang sangat kecil. Ia juga mempunyai API yang mudah dan intuitif yang menjadikannya mudah untuk menentukan unsur -unsur tersuai dan tingkah laku mereka. Selain itu, X-Tag serasi dengan semua pelayar moden dan boleh digunakan bersama perpustakaan dan kerangka lain.

Bolehkah saya menggunakan X-Tag dengan perpustakaan atau kerangka JavaScript yang lain? Ia tidak mengenakan sebarang sekatan atau corak seni bina tertentu, jadi anda boleh mengintegrasikannya dengan mudah ke dalam projek anda yang sedia ada. Sama ada anda menggunakan jQuery, react, angular, atau vue.js, anda boleh menggunakan x-tag untuk membuat elemen tersuai yang boleh digunakan semula di seluruh aplikasi anda. Tag?

Menentukan elemen tersuai dengan X-Tag adalah mudah. Anda hanya memanggil fungsi XTAG.Register, lulus dalam nama elemen tersuai anda dan objek yang mentakrifkan tingkah lakunya. Objek ini boleh termasuk kaedah kitaran hayat, aksesor, dan pengendali acara. Berikut adalah contoh asas:

xtag.register ('my-element', {

LifeCycle: {

created: function () { this.textContent = 'hello, world!' ;

}
}
});
Kaedah kitaran hayat adalah kaedah khas yang dipanggil pada tahap yang berbeza dalam kehidupan elemen tersuai. X-TAG menyokong empat kaedah kitaran hayat: dicipta, dimasukkan, dikeluarkan, dan dikaitkan. Kaedah ini membolehkan anda melakukan tindakan tertentu apabila elemen dibuat, ditambah ke DOM, dikeluarkan dari DOM, atau apabila salah satu perubahan atributnya. > X-Tag menyediakan cara mudah untuk mengendalikan peristiwa pada elemen tersuai anda. Anda boleh menentukan pengendali acara dalam objek peristiwa semasa mendaftarkan elemen anda. Sebagai contoh, untuk mengendalikan acara klik, anda akan melakukan sesuatu seperti ini:

xtag.register ('my-element', {
events: { click: function (e) {
console.log ('Element Clicked!'); Ya, X-Tag menyokong penciptaan elemen bayang-bayang. Ini membolehkan anda merangkumi gaya dan markup elemen anda, menjadikannya terpisah dari seluruh dokumen anda. Untuk membuat akar bayangan, anda boleh menggunakan kaedah ini. Seperti mana -mana elemen HTML yang lain, menggunakan CSS. Jika elemen anda menggunakan Shadow Dom, anda boleh memasukkan tag di dalam akar bayangan anda untuk menentukan gaya yang hanya digunakan untuk elemen anda. Anda juga boleh menggunakan sifat tersuai CSS (pembolehubah) untuk menjadikan gaya anda lebih fleksibel dan boleh diguna semula. digunakan untuk membuat elemen bentuk tersuai. Walau bagaimanapun, perlu diingat bahawa elemen bentuk tersuai tidak mengambil bahagian dalam penyerahan borang atau pengesahan kekangan secara lalai. Anda perlu memberikan logik anda sendiri untuk ciri -ciri ini.

Adakah X-Tag masih dikekalkan dan disokong? Pelepasan terakhir adalah pada tahun 2017. Walau bagaimanapun, perpustakaan stabil dan masih boleh digunakan dalam projek. Sekiranya anda menghadapi sebarang masalah atau memerlukan ciri -ciri baru, anda mungkin perlu melaksanakannya sendiri atau mempertimbangkan menggunakan perpustakaan yang berbeza.

Atas ialah kandungan terperinci Membina komponen web tersuai dengan X-Tag. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!