M

MLOG

O'zbek

Veb komponentlar haqida toʻliq qoʻllanma, ularning afzalliklari, foydalanish, brauzer tomonidan qoʻllab-quvvatlash va zamonaviy veb-ishlab chiqishda qayta foydalanish mumkin boʻlgan UI elementlarini yaratish boʻyicha eng yaxshi amaliyotlar.

Veb komponentlar: Zamonaviy veb uchun qayta foydalanish mumkin boʻlgan elementlarni yaratish

Bugungi kunda tez rivojlanayotgan veb-ishlab chiqish sohasida modulli, qayta foydalanish mumkin boʻlgan va texnik xizmat koʻrsatish oson boʻlgan kodni yaratish juda muhimdir. Veb komponentlar aynan shunday narsani yaratish uchun kuchli yechimni taklif qiladi: turli veb-loyihalar va freymvorklarda ishlatilishi mumkin boʻlgan maxsus, inkapsulyatsiya qilingan va oʻzaro ishlaydigan UI elementlari. Ushbu toʻliq qoʻllanma veb komponentlarining asosiy tushunchalarini oʻrganadi, ularning afzalliklarini koʻrib chiqadi va sizga ishni boshlashga yordam beradigan amaliy misollarni taqdim etadi.

Veb komponentlar nima?

Veb komponentlar - bu inkapsulyatsiya qilingan uslub va xatti-harakatlar bilan qayta foydalanish mumkin boʻlgan maxsus HTML elementlarini yaratishga imkon beruvchi veb standartlar toʻplamidir. Ular asosan HTMLning oʻz imkoniyatlarini kengaytirishga imkon beradi va har qanday standart HTML elementi kabi ishlatilishi mumkin boʻlgan maxsus teglarni yaratadi.

Ularni veb uchun Lego gʻishtlari deb oʻylang. Har bir gʻisht (Veb komponenti) funksionallikning oʻziga xos qismini ifodalaydi va siz ushbu gʻishtlarni murakkab foydalanuvchi interfeyslarini yaratish uchun birlashtira olasiz. Veb komponentlarining goʻzalligi ularning qayta foydalanish imkoniyati va izolyatsiyasidir; ularni har qanday veb-loyihada, ishlatilayotgan freymvorkdan qatʼi nazar (yoki umuman freymvorksiz ham) ishlatish mumkin va ularning ichki uslubi va xatti-harakatlari ilovaning qolgan qismiga xalaqit bermaydi.

Veb komponentlarining asosiy texnologiyalari

Veb komponentlari toʻrtta asosiy texnologiyaga asoslangan:

Veb komponentlaridan foydalanishning afzalliklari

Ishlab chiqish jarayonida veb komponentlarini qabul qilish koʻplab afzalliklarni taqdim etadi:

Oddiy misol: Maxsus hisoblagich elementini yaratish

Keling, asosiy veb komponentini yaratishni tasvirlaymiz: maxsus hisoblagich elementi.

1. Maxsus elementlar sinfini aniqlang

Avvalo, biz `HTMLElement` sinfini kengaytiradigan JavaScript sinfini aniqlaymiz.

class MyCounter extends HTMLElement {
 constructor() {
 super();
 // Elementga Shadow DOMni ulang.
 this.attachShadow({ mode: 'open' });

 // Hisoblagich qiymatini ishga tushiring.
 this._count = 0;

 // Tugma elementini yarating.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 //Hisobni koʻrsatish uchun span elementini yarating.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Tugma bosish hodisasiga increment usulini bogʻlang.
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = `Count: ${this._count}`;
 }

 connectedCallback() {
 console.log('Custom element connected to the DOM.');
 }

 disconnectedCallback() {
 console.log('Custom element disconnected from the DOM.');
 }

 adoptedCallback() {
 console.log('Custom element moved to a new document.');
 }

 attributeChangedCallback(name, oldValue, newValue) {
 console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}.`);
 }

 static get observedAttributes() {
 return ['count'];
 }
}

2. Shadow DOMni aniqlang

`attachShadow({ mode: 'open' })` qatori elementga Shadow DOMni biriktiradi. `mode: 'open'` parametri tashqaridan JavaScriptga Shadow DOMga kirishga imkon beradi, `mode: 'closed'` esa tashqi kirishni oldini oladi.

3. Maxsus elementni roʻyxatdan oʻtkazing

Keyin, `customElements.define()` usuli yordamida maxsus elementni brauzerda roʻyxatdan oʻtkazamiz.

customElements.define('my-counter', MyCounter);

4. HTMLda maxsus elementdan foydalanish

Endi siz `` elementini HTMLda boshqa HTML elementlari kabi ishlatishingiz mumkin.

<my-counter></my-counter>

Ushbu kod "Increment" yorligʻi boʻlgan tugmani va joriy hisobni (0 dan boshlab) koʻrsatadigan span hosil qiladi. Tugmani bosish hisoblagichni oshiradi va displeyni yangilaydi.

Chuqurroq oʻrganish: Shadow DOM va inkapsulyatsiya

Shadow DOM veb komponentlarining muhim jihati hisoblanadi. U komponent uchun alohida DOM daraxtini yaratish orqali inkapsulyatsiyani taʼminlaydi, uning uslubi va xatti-harakatlarini sahifaning qolgan qismidan ajratadi. Bu uslublar ziddiyatlarining oldini oladi va komponent atrof-muhitdan qatʼi nazar, bashorat qilinadigan tarzda harakat qilishini taʼminlaydi.

Shadow DOM ichida siz faqat komponentning ichki elementlariga tegishli boʻlgan CSS uslublarini aniqlashingiz mumkin. Bu sizga tashqi CSS uslublar jadvallariga tayanmaydigan mustaqil komponentlarni yaratishga imkon beradi.

Misol: Shadow DOM uslubi

constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 // Shadow DOM uchun uslub elementini yarating
 const style = document.createElement('style');
 style.textContent = `
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 `;
 this.shadowRoot.appendChild(style);

 // Hisoblagich qiymatini ishga tushiring.
 this._count = 0;

 // Tugma elementini yarating.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 //Hisobni koʻrsatish uchun span elementini yarating.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Tugma bosish hodisasiga increment usulini bogʻlang.
 this.button.addEventListener('click', this.increment.bind(this));
 }

Ushbu misolda, `style` elementi ichida belgilangan CSS uslublari faqat `my-counter` komponentining Shadow DOM ichidagi tugma va span elementlariga tegishli boʻladi. Ushbu uslublar sahifadagi boshqa tugmalar yoki spanlarga taʼsir qilmaydi.

HTML shablonlari: Qayta foydalanish mumkin boʻlgan tuzilmalarni aniqlash

HTML shablonlari DOMga klonlashtirilishi va kiritilishi mumkin boʻlgan qayta foydalanish mumkin boʻlgan HTML tuzilmalarini aniqlash usulini taqdim etadi. Ular, ayniqsa, murakkab komponent maketlarini yaratish uchun foydalidir.

Misol: HTML shablonlaridan foydalanish

<template id="counter-template">
 <style>
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 </style>
 <button>Increment</button>
 <span>Count: <span id="count-value">0</span></span>
</template>

<script>
class MyCounter extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 const template = document.getElementById('counter-template');
 const templateContent = template.content;
 this.shadowRoot.appendChild(templateContent.cloneNode(true));

 this.button = this.shadowRoot.querySelector('button');
 this.span = this.shadowRoot.querySelector('#count-value');
 this._count = 0;
 this.span.textContent = this._count;
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = this._count;
 }
}

customElements.define('my-counter', MyCounter);
</script>

Ushbu misolda biz `counter-template` ID bilan HTML shablonini aniqlaymiz. Shablon hisoblagich komponenti uchun HTML tuzilmasi va CSS uslublarini oʻz ichiga oladi. `MyCounter` sinf ichida biz shablon tarkibini klonlaymiz va uni Shadow DOMga qoʻshamiz. Bu bizga `my-counter` komponentining har bir nusxasi uchun shablon tuzilmasidan qayta foydalanishga imkon beradi.

Xususiyatlar va Properties

Veb komponentlari ham xususiyatlarga, ham propertiesga ega boʻlishi mumkin. Xususiyatlar HTML belgilanishida aniqlanadi, properties esa JavaScript sinfida aniqlanadi. Xususiyatlardagi oʻzgarishlar propertiesda aks ettirilishi mumkin va aksincha.

Misol: Xususiyatlarni aniqlash va ulardan foydalanish

class MyGreeting extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });
 this.shadowRoot.innerHTML = `<p>Hello, <span id="name"></span>!</p>`;
 this.nameSpan = this.shadowRoot.querySelector('#name');
 }

 static get observedAttributes() {
 return ['name'];
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === 'name') {
 this.nameSpan.textContent = newValue;
 }
 }
}

customElements.define('my-greeting', MyGreeting);

<my-greeting name="World"></my-greeting>
<my-greeting name="Alice"></my-greeting>

Ushbu misolda biz `my-greeting` komponenti uchun `name` xususiyatini aniqlaymiz. `observedAttributes` getter brauzerga qaysi xususiyatlar oʻzgarishini kuzatish kerakligini aytadi. `name` xususiyati oʻzgarganda, `attributeChangedCallback` usuli chaqiriladi va biz `span` elementining mazmunini yangi nom bilan yangilaymiz.

Hayot aylanishi chaqiruvlari

Veb komponentlari komponentning hayot aylanishining turli bosqichlarida kodni bajarishga imkon beruvchi bir nechta hayot aylanishi chaqiruvlariga ega:

Ushbu chaqiruvlar komponentning hayot aylanishi bilan bogʻliq boʻlgan ishga tushirish, tozalash va boshqa vazifalarni bajarish imkoniyatlarini beradi.

Brauzer muvofiqligi va polifillari

Veb komponentlari barcha zamonaviy brauzerlar tomonidan qoʻllab-quvvatlanadi. Biroq, eski brauzerlar zarur funksionallikni taʼminlash uchun polifillarni talab qilishi mumkin. `webcomponents.js` polifill kutubxonasi eski brauzerlarda veb komponentlarini har tomonlama qoʻllab-quvvatlaydi. Polifillni kiritish uchun quyidagi skript tegidan foydalaning:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-loader.js"></script>

Odatda, polifillni faqat brauzer veb komponentlarini mahalliy qoʻllab-quvvatlamasa, yuklab, funksiya aniqlash usulidan foydalanish tavsiya etiladi.

Ilgʻor usullar va eng yaxshi amaliyotlar

Komponent tarkibi

Veb komponentlarini birgalikda yanada murakkab UI elementlarini yaratish uchun tuzish mumkin. Bu sizga yuqori modulli va qayta ishlatilishi mumkin boʻlgan ilovalarni yaratishga imkon beradi.

Hodisalarni qayta ishlash

Veb komponentlari maxsus hodisalarni joʻnatishi va tinglashi mumkin. Bu komponentlarga bir-biri bilan va ilovaning qolgan qismi bilan muloqot qilishga imkon beradi.

Maʼlumotlarni bogʻlash

Veb komponentlari oʻrnatilgan maʼlumotlarni bogʻlash mexanizmlarini taʼminlamasa-da, siz maxsus kod yordamida yoki maʼlumotlarni bogʻlash kutubxonasi bilan integratsiya qilish orqali maʼlumotlarni bogʻlashni amalga oshirishingiz mumkin.

Qulaylik

Veb komponentlaringiz nogironligi boʻlganlar ham boʻlgan barcha foydalanuvchilar uchun qulay boʻlishini taʼminlash muhimdir. Komponentlaringizni loyihalashtirishda va amalga oshirishda qulaylikning eng yaxshi amaliyotlariga rioya qiling.

Haqiqiy dunyoda veb komponentlari: Xalqaro misollar

Veb komponentlari butun dunyo boʻylab kompaniyalar va tashkilotlar tomonidan zamonaviy va qayta foydalanish mumkin boʻlgan foydalanuvchi interfeyslarini yaratish uchun ishlatilmoqda. Mana baʼzi misollar:

Bular veb komponentlarining haqiqiy dunyoda qanday ishlatilishiga oid bir nechta misollardir. Texnologiya ishlab chiquvchilar uning modulli, qayta ishlatilishi mumkin boʻlgan va texnik xizmat koʻrsatish oson boʻlgan veb-ilovalarni yaratish uchun afzalliklarini tan olgan holda tobora koʻproq qabul qilinmoqda.

Xulosa

Veb komponentlari zamonaviy veb uchun qayta ishlatilishi mumkin boʻlgan UI elementlarini yaratish uchun kuchli yondashuvni taklif qiladi. Maxsus elementlar, Shadow DOM va HTML shablonlaridan foydalanish orqali siz turli loyihalar va freymvorklarda ishlatilishi mumkin boʻlgan mustaqil komponentlarni yaratishingiz mumkin. Veb komponentlarini qabul qilish yanada modulli, texnik xizmat koʻrsatish oson boʻlgan va kengaytiriladigan veb-ilovalarga olib kelishi mumkin. Veb standartlari rivojlanar ekan, veb komponentlari veb-ishlab chiqish kelajagini shakllantirishda muhim rol oʻynashda davom etadi.

Qoʻshimcha maʼlumot

Bugun veb komponentlari bilan tajriba oʻtkazishni boshlang va veb-ishlab chiqish loyihalarida qayta foydalanish mumkin boʻlgan UI elementlarining kuchini oching!