Вы слышали о DOM. В большинстве случаев вы слышали плохие вещи. Обход DOM медленный! DOM-операции стоят дорого! DOM API - это беспорядок! Верно, что DOM получает свою долю плохой прессы, но когда мы делаем шаг назад и успокаиваемся, мы понимаем, что DOM - самая важная часть того, что мы делаем как веб-разработчики, и чрезвычайно важно, чтобы мы прилагали усилия к тому, чтобы понимать это.
DOM или объектная модель документа - это графическое представление декларативной разметки HTML. Каждый HTML-тег внутренне переводится в объект. Например, простой ‹div› переводится в HTMLDivElement или ‹span› переводится в HTMLSpanElement. Когда парсер запускается, он знает, какой объект создать, на основе разметки, с которой он столкнулся. По сути, каждый тег HTML поддерживается классом.
Мы знаем, что некоторые элементы HTML инкапсулируют свое представление. Примером может служить тег ‹h1›. Мы знаем, что любой текст, который мы заключаем в тег ‹h1›, имеет размер шрифта 2em, жирный шрифт и блок отображения. Некоторые элементы принимают атрибуты, определяющие поведение. Примером может служить тег ‹a›, который принимает атрибут «href», который позволяет нам ссылаться на другую страницу. Эта способность инкапсулировать представление и поведение достигается внутренними API браузера, которые используются для реализации различных типов элементов.
Введите веб-компоненты. Веб-компоненты - это набор API нижнего уровня, которые предоставляет браузер, чтобы их можно было использовать для разработки пользовательских элементов, которые могут инкапсулировать логику представления и логику поведения. Поскольку API-интерфейсы веб-компонентов встроены в браузеры, эти настраиваемые элементы могут работать без фреймворка и библиотеки изначально в браузере, который поддерживает спецификацию веб-компонентов.
Веб-компоненты в основном состоят из 4 функций:
- Пользовательские элементы
- Теневой DOM
- HTML импорт
- HTML шаблоны
Давайте углубимся в каждую из этих функций и в ту часть, которую вы так долго ждали… код!
Пользовательские элементы
Пользовательские элементы позволяют реализовать новые теги HTML. Пользовательские элементы могут быть расширены из существующих пользовательских элементов. Их можно вставить и использовать как любой HTML-тег. Их можно создать, используя основные строительные блоки веб-разработки - html, css и javascript.
Самый простой способ создать собственный элемент - расширить HTMLElement и зарегистрировать элементную часть словаря браузера.
Теперь этот элемент можно просто использовать как любой другой тег HTML.
<name-tag></name-tag>
Однако мы не видим разницы. Это связано с тем, что для этого настраиваемого элемента не определена реализация. Давайте добавим это в.
Теперь, если мы просто используем ‹name-tag› ‹/name-tag› как элемент HTML, мы увидим на странице следующий вывод:
This is a custom element
Давайте сделаем наш элемент немного умнее. Чтобы настраиваемый элемент можно было использовать, он должен иметь общедоступный API, с помощью которого элементу могут быть предоставлены свойства, которые будут определять способ визуализации компонента. Давайте реализуем это поведение с намерением использовать такой элемент, как ‹name-tag name =” John Doe ”/›:
Теперь мы можем не только использовать элемент, как если бы элемент был доступен как часть стандартного словаря HTML, например ‹name-tag name =” John ”/›, но мы также можем использовать его с javascript, как и с любым другим изначально предоставленным элемент:
Подведем итоги рабочего процесса для настраиваемого элемента:
- Создается класс, расширяющий класс HTMLElement. Это указывает браузеру обрабатывать настраиваемый элемент как элемент HTML.
- Выберите свойства или атрибуты, которые будут переданы элементу. Решите, какие свойства можно изменить, и отобразите их, вернув список имен свойств из статического метода Наблюдаемые атрибуты.
- Свойства или атрибуты, которые, как мы ожидаем, будут переданы элементу, хранятся как локальные переменные в конструкторе класса.
- Реализуйте метод attibuteChangedCallback, который вызывается каждый раз при изменении свойства в списке наблюдения. Этот метод используется для вызова методов установки свойств. AttributeChangedCallback является частью нескольких обработчиков жизненного цикла, которые содержат настраиваемые элементы.
- Определите простые методы получения и установки ES6 для свойств, которые устанавливают значения локальных свойств и выполняют некоторую логику визуализации, например, устанавливают innerHTML.
Если вы следовали инструкциям, значит, вы создали свой первый пользовательский элемент. Как и было обещано, этот элемент будет работать в любом браузере, совместимом с веб-компонентами. Мы поговорим о том, как отправить настраиваемый элемент, позже.
Мы вернемся к настраиваемым элементам, поскольку сообщения предназначены для наложения друг на друга. Следите за обновлениями во второй части, где мы рассмотрим Shadow DOM.
Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.
Чтобы узнать больше, прочтите нашу страницу о нас, поставьте лайк / напишите нам в Facebook или просто tweet / DM @HackerNoon.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!
