Автор оригинала: Benny Powers.

UI на основе компонентов – это ярость в наши дни. На самом деле это настолько установлено, что люди даже начали ретвировать виджеты stear-school jQuery как “jQuery компоненты”

Когда мы говорим «компонент», мы в основном ссылаемся на автономные, многоразовые биты пользовательского интерфейса, которые когда-то написаны, мы можем вставить в наши приложения, куда бы мы ни хотели. Необычные интерактивные кнопки, специально разработанные вытягивающие котировки или многолетние любимые виджеты карты являются примерами типов конструкций, которые хорошо поддаются компонентам.

Знаете ли вы, что в Интернете есть свой собственный модуль нативного компонента, который не требует использования любых библиотек? Правдивая история! Вы можете написать, опубликовать и повторно использовать одно файловые компоненты, которые будут работать в любом * хороший браузер и В любых рамках (Если это ваша сумка). Читайте дальше, чтобы узнать, как!

Обзор

Веб-компоненты Является ли зонтичный термин, который относится к набору четырех стандартов браузера, которые работают вместе, чтобы сформировать модульную компонентную модель сети.

Каждый из этих стандартов обеспечивает один кусок головоломки. В этом вступлении мы собираемся кратко представить каждому из них и объяснить, как они помогают нам в практическом разработке веб-разработки.

<Шаблон> Элементы

Фундаментальная идея компонентов является многоразовая UI. Чтобы создать это, нам нужен способ определить шаблон для нашего компонента. Если вы знакомы с реакцией, то вы, вероятно, использовали JSX раньше. Если вы больше углового типа, вы, вероятно, определили шаблоны в шаблонах JavaScript шаблона литералов.

<Шаблон> Элемент позволяет нам определить фрагменты HTML, которые не добавляются в документ до клонирования JavaScript. Браузер требуется только для того, чтобы разбираться в том, что HTML один раз (например, когда документ нагрузки), и может затем клонировать его дешево, когда его попросили.

Вот (действительно увлажненный) пример элемента шаблона в действии:

  Type a  💌
  


🦑 Ahoy!

Использование <Шаблон> Элементы легко и исполняют. Я собрал глупую маленькую ориентир Это строит простую таблицу трех способов: путем клонирования элемента шаблона, непосредственно с помощью API DOM, а также настройкой innerhtml Отказ Элементы шаблона клонирования – самые быстрые, апис-апис немного медленнее, а innerhtml самый медленнее.

Итак, <Шаблон> Элемент позволяет нам разбирать HTML один раз и повторно использовать его столько раз, сколько мы хотим. Точно так же, как нам нужно для наших многоразовых компонентов!

Узнайте больше о <Шаблон> элемент И это Дом API на MDN.

Пользовательские элементы

Второй стандарт мы собираемся взглянуть, называется пользовательскими элементами. Он имеет именно то, что он говорит на коробке: он позволяет определить свои собственные пользовательские HTML-теги. Теперь вам не нужно соглашаться на простое старое

Пользовательские элементы работают так же, как встроенные элементы; Добавьте им свой документ, дайте им детские элементы, используйте регулярные API на них DOM и т. Д. Вы можете использовать пользовательские элементы везде, которые вы используете регулярные элементы, в том числе в популярных веб-каркасах

Все пользовательские имена тегов элементов должны содержать тире, чтобы дифференцировать их из встроенных элементов. Это также помогает избежать конфликтов имен, когда вы хотите использовать и <Саллис-ввод> в том же приложении. Кроме того, пользовательские элементы могут иметь свои собственные пользовательские атрибуты, свойства DOM, методы и поведение.

Пример того, как вы можете использовать пользовательский элемент:

  
Twinkle, twinkle, little star.
  Shine it!

Пользовательские элементы определяются как JavaScript классы и зарегистрирован на window.customelements объект через его Определить Метод, имеющий два параметра: строка для определения имени элемента и класс JavaScript для определения его поведения.

Этот пример берет на себя скучный старый И дает ему эмодзи супер-силы! Дайте это попробовать.

customElements.define('super-span', class SuperSpan extends HTMLElement {
  /**
   * `connectedCallback` is a custom-element lifecycle callback
   * which fires whenever the element is added to the document
   */
  connectedCallback() {
    this.addEventListener('click', this.beAwesome.bind(this))
    this.style.display = 'inline-block';
    this.setAttribute('aria-label', this.innerText);
    switch (this.innerText) {
      case 'star': this.innerText = '⭐️';
    }
  }

  /**
   * You can define your own methods on your elements.
   * @param  {Event} event
   * @return {Animation}
   */
  beAwesome(event) {
    let keyframes = [];
    let options = {duration: 300, iterations: 5, easing: 'ease-in-out'}
    switch (this.getAttribute('animation')) {
      case 'shine': keyframes = [
        {opacity: 1.0, blur: '0px', transform: 'rotate(0deg)'},
        {opacity: 0.7, blur: '2px', transform: 'rotate(360deg)'},
        {opacity: 1.0, blur: '0px', transform: 'rotate(0deg)'},
      ];
    }
    return this.animate(keyframes, options)
  }
});

Пользовательские элементы имеют встроенные функции, такие как обратные вызовы жизненного цикла и наблюдаемые атрибуты. Мы покроем их в более позднем посте. Оположение спойлера: вы можете прочитать Все о пользовательских элементах на MDN

Тень Дом

Что преследует дерево документа, скрываясь в тени, темные места, где невинные узлы боятся идти?

Дада Дада Дада Дада! Тень Дом!

Я тьма. Я ночь. Я тени Дом!

Хотя «Shadow DOM» может звучать экзотику, оказывается, вы использовали его в течение многих лет. Каждый раз, когда вы использовали <Видео> элемент с элементами управления или Элемент с DataList или другими, как элемент собора даты, вы использовали Shadow DOM.

Shadow DOM – это просто фрагмент документа HTML, который виден пользователю, в то же время, изолированные от остальной части документа. Точно так же, как ifmames отделяют один документ из другого встроенного документа, теневые корни отделяют часть документа из основного документа.

Например, элементы управления в видеоэлементе на самом деле представляют собой отдельное дерево DOM, которое живет, бэтман, в тени вашей страницы. Глобальные стили не влияют на видеоролики видео, и то же самое верно наоборот.

Пример Shadow DOM используется на wego.com, чтобы изолировать DOM от остальной части страницы

Почему выделяет хорошую вещь? При работе над веб-приложениями любого нетривиального размера правила и селекторы CSS могут быстро выйти из-под контроля. Вы можете написать идеальные CSS для одного раздела вашей страницы, только чтобы ваши стили были отменены вашей командовой по команде, затем вниз по каскаду. Еще хуже, ваши новые дополнения к приложению могут нарушить существующий контент без того, чтобы кто-то заметил!

Многие решения этой проблемы были разработаны с течением времени, от строгих обоснованных конвенций «CSS-js», но ни один из них не удовлетворяет. С Shadow DOM у нас есть комплексное решение, встроенное в браузер.

Shadow DOM изолирует узлы DOM Позвольте вам свободно стирать ваши компоненты, не беспокоясь о том, что другие порции приложения могут их сбивать. Вместо того, чтобы достичь имен классов тайных классов или забив все в Стиль Атрибут, вы можете стиль свои компоненты простым, простой способом:

Shadow DOM – это секретный соус в веб-компонентах. Это то, что делает их самостоятельно. Это то, что дает нам уверенность, чтобы бросить их на страницу, не беспокоясь о нарушении других частей приложения.

И начиная с Firefox 63, он доступен в родом на всех хороших браузерах.

Узнайте больше о Тень Дом на MDN

С этими тремя стандартами: шаблон, пользовательские элементы и Shadow DOM, у нас есть все, что нам нужно, чтобы написать богатый компонент UIS, который работает непосредственно в браузере без необходимости каких-либо специальных инструментов или этапов сборки. Четвертый стандарт, JavaScript Modules, позволяет нам факторировать комплексные приложения, состоящие из пользовательских элементов и публикуют наши компоненты для других.

JavaScript модули

Когда мы используем слово модуль , что мы имеем в виду, это отдельно стоящий программное обеспечение, которое содержит свой собственный объем. Другими словами, если я определим переменную Foo В некоторых модуле я могу использовать только эту переменную внутри этого модуля. Если я хочу получить доступ к Foo В каком-то другом модуле мне нужно явно экспортировать его первым.

Разработчики нашли способы написать модульную JavaScript сейчас на некоторое время, но это было только недавно (с 2015 года в спецификации, и за последний год или около того на практике), что JavaScript имеет собственную модульную систему.

import { foo } from './foo.js'

const bar = 'bar'

export const baz = foo(bar)

Есть А Лот к Скажи О модулях, но для наших целей достаточно, чтобы мы могли использовать их для записи и публикации веб-компонентов.

Вот простой пример, чтобы соединить свой аппетит.

// super-span.js

const options = {duration: 300, iterations: 5, easing: 'ease-in-out'}
const keyframes = [
  {opacity: 1.0, blur: '0px', transform: 'rotate(0deg)'},
  {opacity: 0.7, blur: '2px', transform: 'rotate(360deg)'},
  {opacity: 1.0, blur: '0px', transform: 'rotate(0deg)'},
]

const template = document.createElement('template')
template.innerHTML = `
  
  
  🖱
`;

customElements.define('super-span', class SuperSpan extends HTMLElement {

  $(selector) {
    return this.shadowRoot && this.shadowRoot.querySelector(selector)
  }

  constructor() {
    super()
    const onMouse = this.shine.bind(this)
    const root = this.attachShadow({mode: 'open'})
          root.appendChild(template.content.cloneNode(true))
    const slot = this.$('slot')
    const [node] = slot.assignedNodes()

    this.setAttribute('aria-label', node.textContent)
    node.textContent = '⭐️'

    this.addEventListener('click', onMouse)
    this.addEventListener('mouseover', onMouse)
  }

  shine(event) {
    this.$('span').animate(keyframes, options)
  }
});

А затем в HTML нашего приложения:

  
    
    
    
    
    
    
    
  
    star
  

И это, мои друзья, это момент сброса монет, когда вы понимаете, насколько удивительными веб-компонентами могут быть.

Теперь вы можете легко импортировать предварительно сделанные пользовательские элементы с удивительным поведением и семантикой прямо в ваши документы, без какого-либо шага сборки.

  
    
    
    
    
    
    
  
  
    

      
Cross-platform, Framework-Agnostic, Reusable Components
    
    


      
        
      

      🚀 Launch

      
    
  

Заключение

Стандарты веб-компонентов Дайте факторе автономным, многоразовым интерфейсом, который работает непосредственно в браузере без громоздких шагов сборки. Эти компоненты могут быть использованы в любом месте, где вы используете регулярные элементы: в простом HTML или в рамках приложения вашего приложения шаблоны.

В нашем следующем сообщении Бог-желание мы рассмотрим написание веб-компонентов с API ванильного браузера для максимального контроля и совместимости.

😀 Спасибо за чтение! 😁.

Этот пост изначально опубликован на dev.to Отказ Читайте там для интерактивных примеров.