Вы, наверное, неоднократно слышали о веб-компонентах и том, что они должны навсегда изменить принципы веб-разработки. О нестабильных и спекулятивных веб-технологиях не знают только те люди, которые живут где-то под скалой или имеют полную, насыщенную жизнь, которая не оставляет им времени на чтение материалов подобной тематики. К числу таких людей я точно не отношусь.
Веб-компоненты представляют собой набор взаимосвязанных технологий, направленных на создание элементов, пригодных для многократного использования в интернете. Большая часть обсуждений была связана с Shadow DOM. Однако наиболее функциональной технологией пакетирования являются Пользовательские элементы (Custom Elements). Данный метод связан с использованием ваших собственных элементов, с их специфическим поведением и свойствами.
Данное описание весьма неоднозначно, поэтому цель этой статьи заключается в объяснении предназначения пользовательских элементов, их функциональности и вариантов использования. Пожалуйста, обратите внимание, что в одних случаях, при обсуждении концепции, я буду говорить о пользовательских элементах (имя нарицательное), а в других случаях, при обсуждении технологии, о Пользовательских элементах (имя собственное). Давайте начнем.
«Что такое точка пользовательских элементов?»
Основная идея заключается в том, что если вы создаете элемент, который всегда выполняет одну и ту же роль и имеет постоянный набор свойств и функций, то должна существовать возможность вызова этого элемента после выполнения одного действия. В нашем распоряжении есть элемент video для отображения видео, элемент select для отображения списка выбора, элемент img для отображения изображений (наши задачи облегчаются, поскольку не нужно вводить дополнительных символов). Многие элементы описывают свою собственную функциональность.
Сегодня интернет должен выполнять намного большие объемы работ, чем это было в предыдущие периоды, а HTML не всегда успевает за скоростью изменений. Пользовательские элементы предоставляют разработчикам требуемую гибкость для создания элементов, основываясь на их функциях, и дает нам низкоуровневый доступ к определению их свойств.
Если созданные нами элементы хорошо себя зарекомендовали, то они могут стать полностью стандартизированной частью будущей HTML спецификации. То, что мы сейчас делаем, в будущем может стать частью создаваемых нами вещей.
«Можем ли мы создать Пользовательские элементы в HTML прямо сейчас?»
Внимательный читатель сразу же ответит, что да. Это невероятно просто. Вам всего лишь необходимо открыть ваш любимый текстовый редактор и вставить элемент в HTML документ, например, вот так:
<apes>…</apes>Откройте эту разметку в браузере. Она будет работать. Вы можете стилизировать её, а также добавить JavaScript события. Она может быть «недопустима» (ну кто же будет уделять подобным проблемам столько внимания, не так ли?), но, тем не менее, будет работать. Вы можете сделать подобную процедуру с любым понравившимся вам именем, и оно создаст новый встроенный элемент.
Ну да. Конечно. Такая возможность действительно существует, и вы даже могли бы сделать разметку более понятной для других людей — но на самом деле это единственное преимущество. Пользовательские элементы предоставляют намного большее количество ощутимых преимуществ. В свое время мы детально рассмотрим все преимущества Пользовательских элементов; но сперва, я хочу показать, насколько легко их использовать.
«Насколько легко создавать Пользовательские элементы?»
Создать их достаточно просто и в предыдущем предложении я уже упоминал об этом. Первым шагом является выбор подходящего имени. Единственное правило, которому необходимо следовать в этом случае, призывает к избеганию совпадений с текущими или будущими именами HTML элементов. Вы должны будете использовать в структуре имени дефис. Например:
<great-apes>…</great-apes>Когда вы определитесь с именем, то следующим шагом будет регистрация его в DOM, которая осуществляется путем передачи имени в качестве аргумента в JavaScript registerElement() метод. Это делается следующим образом:
document.registerElement('great-apes');Теперь DOM сможет распознавать ваш вновь зарегистрированный great-apes элемент и тут может начаться самое интересное. Чтобы еще больше углубиться в терминологию отмечу, что вновь созданный элемент, который не определен в HTML спецификации, известен как «пользовательский тег». Поэтому не стоит пугаться, если вдруг в дальнейшем встретите этот термин.
«Я все еще не понимаю, что особенного в Пользовательских элементах».
Всех нетерпеливых читателей попрошу подождать еще минутку. Основное отличие между ничтожными пользовательскими элементами и могучими пользовательскими тегами (Я надеюсь, вы не удивлены мне используя этот термин) связано с интерфейсом, который отображается в DOM. Пользовательские элементы, незарегистрированные и нераспознанные, используют HTMLUnknownElement интерфейс, в то время как зарегистрированные и распознанные пользовательские теги используют HTMLElement интерфейс.
В чем разница? Благодаря элементу HTMLElement мы можем добавлять наши собственные методы и свойства, создавая по существу API интерфейс. Но подождите, я понимаю, как удивительно это звучит: создание API посредством элемента! Каждый пользовательский тег может иметь свой собственный API интерфейс.
Для начала вы должны определить новый прототип, затем применить к нему все свои свойства и методы. В этом примере я создаю метод с именем hoot(), который записывает сообщение в консоль:
var apeProto = Object.create(HTMLElement.prototype);
apeProto.hoot = function() {
console.log('Apes are great!');
}
Следующим шагом является регистрация элемента. Этот процесс осуществляется так же, как и раньше, но только на этот раз необходимо добавить новый аргумент в опции registerElement(), который позволит использовать наш вновь созданный прототип:
document.registerElement('great-apes', {prototype: apeProto});Когда эта процедура будет выполнена, вы сможете запросить свой элемент в DOM и вызвать метод:
var apes = document.querySelector('great-apes');
apes.hoot();
Это самый простой пример, который я смог придумать. Постарайтесь найти минутку для того, чтобы подумать, как этот пример может быть расширен: добавление уникальных свойств, атрибутов и событий для каждого элемента; размещение разметки в элементе, которая будет передаваться вместе с контентом в качестве значений атрибутов. Вы даже можете использовать элементы с неверным UI (пользовательский интерфейс), но которые выполняют такие функции, как запросы к базе данных. Честно говоря, возможностей у вас невероятно много.
Вы увидели всего лишь простой пример исключительной полезности Пользовательских элементов. Для получения дополнительной информации вы можете рассмотреть элемент Эдуардо Лундгрена под названием google-maps, который позволяет встраивать Google Map и может иметь опции, передаваемые через значения атрибутов, например:
<google-maps latitude="-8.034881" longitude="-34.918377"></google-maps>...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров