תבניות HTML וחריצים לרכיבי Web

תבניות HTML וחריצים לרכיבי Web

אנו מיישמים רכיבי Web באמצעות תבניות HTML וחריצים עבור פרויקטים שזקוקים לרכיבי UI שאינם תלויים בפריימוורק. הצוות שלנו בונה רכיבים מותאמים אישית לשימוש חוזר שעובדים בכל פריימוורק מודרני או בהקשר HTML פשוט, עם אנקפסולציה נכונה של Shadow DOM, חריצים בעלי שם וחריצים ברירת מחדל, והגדרות מחלקה ב-TypeScript. האספקה אורכת יום עד חמישה ימי עבודה בהתאם למספר הרכיבים. בנינו ספריות רכיבים עבור מערכות עיצוב, פורטלים ויישומי דשבורד. הרכיבים שלנו כוללים טיפוסים מלאים של TypeScript, בדיקות אוטומטיות ותיעוד שימוש עבור צוות הפיתוח שלך.

תבניות HTML וחריצים הם תכונות דפדפן מקוריות שמשלימות רכיבים מותאמים אישית ו-Shadow DOM. תבניות מאפשרות לך להגדיר מבנה רכיב ב-HTML מבלי להריץ אותו עד שיהיה צורך. חריצים מאפשרים לצרכנים להקרין תוכן משלהם לתוך ה-Shadow DOM של הרכיב. יחד הם מהווים את הבסיס למערכות רכיבים שאינן תלויות בפריימוורק.

מה כלול בשירות רכיבי ה-Web שלנו

אנו מספקים יישומי רכיבי Web כחבילה סוהר. ההיקף כולל:

• הגדרות מחלקת רכיב מותאם אישית ב-TypeScript עם הצמדת Shadow DOM
• מבנה תבנית HTML עם חריצים בעלי שם ותוכן גיבוי
• טיפול באירועי שינוי חריץ לעדכוני תוכן חריץ ראקטיביים
• תצפית על תכונות והחזרת מאפיינים עבור API חיצוני
• תמיכה בעיצוב באמצעות משתני CSS מותאמים אישית דרך בוררי <template>
• תיעוד רכיב עם דוגמאות שימוש
• בדיקות אוטומטיות המכסות רינדור, הקרנת חריצים ושינויי תכונות

למה להשתמש בתבניות HTML במקום במחרוזות JavaScript?

ביצועי הדפדפן שונים בין שתי הגישות. מחרוזת JavaScript שהוקצתה ל-<slot> מנותחת על ידי הדפדפן בכל יצירת מופע רכיב. תבנית HTML מנותחת פעם אחת כשהדף נטען. שכפול ה-<template> של התבנית יוצר קטע DOM חדש ללא ניתוח מחדש.

עבור רכיבים שמרנדרים מאות מופעים על עמוד, כמו כרטיסי מוצר או פריטי רשימה, ההבדל הזה משמעותי. שכפול תבנית מהיר יותר כי עבודת הניתוח מתרחשת פעם אחת, לא לכל מופע.

תבנית HTML עם חריצים בעלי שם

<template id="card-template">
  <style>
    .card {
      padding: 24px;
      border-radius: 12px;
      background: var(--card-bg, #fff);
      box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    }
    .card__header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .card__avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }
    .card__body {
      line-height: 1.6;
    }
  </style>
  <div class="card">
    <div class="card__header">
      <img class="card__avatar" src="" alt="">
      <div class="card__meta">
        <slot name="name"><strong>Имя не указано</strong></slot>
        <slot name="role"><em>Роль не указана</em></slot>
      </div>
    </div>
    <div class="card__body">
      <slot>Описание не указано</slot>
    </div>
  </div>
</template>

class TeamCard extends HTMLElement {
    private shadow: ShadowRoot

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

    connectedCallback() {
        const template = document.getElementById('card-template') as HTMLTemplateElement
        const clone = template.content.cloneNode(true) as DocumentFragment
        const avatar = clone.querySelector('.card__avatar') as HTMLImageElement
        avatar.src = this.getAttribute('avatar') || '/placeholder.png'
        avatar.alt = this.getAttribute('name') || 'Фото'
        this.shadow.appendChild(clone)
    }
}

customElements.define('team-card', TeamCard)

שימוש:

<team-card avatar="/team/anna.jpg">
  <strong slot="name">Анна Ковалёва</strong>
  <span slot="role">Lead Frontend Engineer</span>
  Специализируется на архитектуре React-приложений и WebGL-визуализациях.
</team-card>

תבנית מובנית לרכיבים לשימוש חוזר

עבור רכיבים שבהם התבנית לא חייבת לחיות במסמך ה-HTML, אנו מגדירים אותה פרוגרמטית. יצירת התבנית פעם אחת בזמן הגדרת המחלקה ושכפולה בקונסטרוקטור מהירה יותר מאשר יצירת innerHTML בכל אינסטנציאציה.

const template = document.createElement('template')
template.innerHTML = `
  <style>
    :host {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .badge {
      padding: 4px 10px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.03em;
    }
    :host([color="green"]) .badge {
      background: #d4edda;
      color: #155724;
    }
    :host([color="red"]) .badge {
      background: #f8d7da;
      color: #721c24;
    }
    :host([color="blue"]) .badge {
      background: #d1ecf1;
      color: #0c5460;
    }
    :host([color="yellow"]) .badge {
      background: #fff3cd;
      color: #856404;
    }
  </style>
  <span class="badge"><slot></slot></span>
`
class StatusBadge extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    shadow.appendChild(template.content.cloneNode(true))
  }
}
customElements.define('status-badge', StatusBadge)

אירועי שינוי חריץ וגישת חריץ פרוגרמטית

רכיבי Web יכולים להגיב כאשר התוכן המוקרן לתוך חריץ משתנה. זה שימושי עבור רכיבים שמציגים ספירות או סיכומים של הפריטים המוקרנים שלהם.

connectedCallback() {
    const defaultSlot = this.shadow.querySelector('slot:not([name])')!
    defaultSlot.addEventListener('slotchange', () => {
        const items = (defaultSlot as HTMLSlotElement).assignedElements()
        this.countEl.textContent = `${items.length} items`
    })
}

אנו גם בונים רכיבים שחוקרים תוכן חריץ פרוגרמטית כדי להחליף קטעים בהתבסס על האם חריץ בעל שם מולא על ידי הצרכן.

כיצד אנו מספקים רכיבי Web

התהליך שלנו שומר על היקף רכיב ברור ואספקה צפויה.

1. סקירת דרישות הרכיב שלך והגדרת ה-API הציבורי: תכונות, חריצים ואירועים
2. עיצוב מבנה ה-Shadow DOM ומבנה התבנית
3. יישום מחלקת ה-TypeScript עם קריאות חוזרות למחזור חיים וטיפול בחריצים
4. כתיבת בדיקות אוטומטיות לרינדור, שינויי תכונות והקרנת חריצים
5. תיעוד דוגמאות שימוש עבור צוות הפיתוח שלך

צור קשר כדי לדון בדרישות הרכיב שלך. נסקור את ה-UI הקיים שלך, נגדיר את ה-API של הרכיב ונספק הצעת מחיר ליישום.

כיצד אנו מספקים

אנו מתחילים עם מלאי רכיבים. אנו מזהים אילו אלמנטים הגיוניים כרכיבי Web. אנו מגדירים את ה-API הציבורי עבור כל אחד. אנו בונים רכיב אחד תחילה. אתה סוקר אותו. אנו מיישמים משוב. אנו בונים את שאר הרכיבים. אנו כותבים בדיקות אוטומטיות. אנו מספקים תיעוד עם דוגמאות שימוש.