Веб-компоненты в действии (5000,00 руб.)

Стр.5

Стр.7

Стр.8

Стр.9

Стр.10

Стр.11

Стр.12

Стр.13

Стр.14

Стр.15

УДК 004.42 ББК 32.972 Ф25 Ф25 Веб-компоненты в действии / пер. с англ. Д. А. Беликова. – М.: ДМК Пресс, 2020. – 462 с.: ил. Фаррелл Б. ISBN 978-5-97060-856-2 Один из основных факторов, способствующих трансформации интернета в последние годы, – широкое внедрение разработки пользовательского интерфейса на основе компонентов. В этой книге подробно описываются рабочие процессы, которые дают вам полный контроль над стилями и поведением компонентов и существенно упрощают их создание, совместное и повторное использование в проектах. В первой части рассмотрено получение простого компонента с нуля. Вторая часть посвящена улучшению организации проекта. В третьей части освещаются принципы совместной работы с несколькими компонентами, позволяющей решать более сложные задачи. Для всех примеров предоставляется исходный код. Издание предназначено для веб-разработчиков, имеющих опыт работы с HTML, CSS и JavaScript. УДК 004.42 ББК 32.972 Original English language edition published by Manning Publications USA, USA. Copyright © 2019 by Manning Publications Co. Russian-language edition copyright © 2020 by DMK Press. All rights reserved. Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. ISBN 978-1-617-29577-5 (англ.) ISBN 978-5-97060-856-2 (рус.) Copyright © 2019 by Manning Publications Co. © Оформление, издание, перевод, ДМК Пресс, 2020

Стр.5

Оглавление Часть I  1  Первые шаги ...........................................................................................26 Фреймворк без фреймворка ..................................................................27 2  Ваш первый веб-компонент ..................................................................45 3  Делаем так, чтобы ваш компонент можно было использовать повторно .................................................................................................75 4  Жизненный цикл компонента ............................................................106 5  Реализация более качественного веб-приложения с помощью модулей .............................................................................128 Часть II  Способы улучшить рабочий процесс вашего компонента ................154 6  Управление разметкой .........................................................................155 7  Шаблонирование контента с помощью HTML ...................................182 8  Теневая модель DOM ............................................................................206 9  Shadow CSS ............................................................................................222 10  Проблемы Shadow CSS ..........................................................................251 Часть III  Объединяем компоненты воедино .....................................................274 11  Реальный компонент пользовательского интерфейса ......................275 12  Сборка и поддержка старых браузеров ...............................................309 13  Тестирование компонентов .................................................................341 14  События и поток данных приложения ................................................363 15  Сокрытие сложностей ..........................................................................396

Стр.7

Содержание Предисловие .................................................................................................15 От автора ...................................................................................................17 Благодарности ............................................................................................19 Об этой книге ..............................................................................................20 Об авторе ....................................................................................................24 Об иллюстрации на обложке .......................................................................25 ЧАСТЬ I ПЕРВЫЕ ШАГИ ................................................................ 26 Фреймворк без фреймворка .......................................................27 1 1.1 Что такое веб-ком по нен ты? .......................................................30 1.1.1 Календарь с возможностью выбора даты .............................30 1.1.2 Теневая модель DOM ..............................................................31 1.1.3 Что имеют в виду, когда говорят «веб-ком по нен ты»? ........33 1.1.4 Проблемная история импорта HTML ...................................33 1.1.5 Библиотеки Polymer и X-Tag ..................................................35 1.1.6 Современные веб-ком по нен ты ..............................................36 1.2 Будущее веб-ком по нен тов ..........................................................37 1.3 За пределами одного компонента .............................................38 1.3.1 Веб-компоненты как и любой другой элемент DOM.............39 1.3.2 От отдельного компонента к приложению ..........................40 2 Ваш первый веб-компонент ......................................................45 2.1 Знакомство с HTMLElement ........................................................46 2.1.1 Ускоренный курс по наследованию .........................................46 2.1.2 Наследование в ваших любимых элементах ..........................47 1.4 Ваш проект, ваш выбор ................................................................43 Резюме .......................................................................................................43

Стр.8

8 Содержание 2.2 Правила именования вашего элемента ...................................48 2.3 Определение вашего пользовательского элемента (и обработка столкновений) .......................................................50 2.4 Расширение HTMLElement для создания логики пользовательского компонента .................................................51 2.5 Использование вашего пользовательского элемента на практике .....................................................................................56 2.6 Создание (полезного) первого компонента ............................59 2.6.1 Настраиваем свой веб-сервер ...............................................59 2.6.2 Пишем свой HTML-тег ...........................................................61 2.6.3 Создаем свой класс .................................................................62 2.6.4 Добавляем содержимое в наш компонент .............................63 2.6.5 Добавляем стили ...................................................................64 2.6.6 Логика компонента ................................................................65 2.6.7 Добавляем интерактивности ...............................................67 2.6.8 Последние штрихи .................................................................69 2.6.9 Улучшение компонента .........................................................73 2.7 Примечания относительно поддержки в браузерах .............73 Резюме .......................................................................................................74 3 Делаем так, чтобы ваш компонент можно было использовать повторно ..................................................75 3.1 Реальный компонент ....................................................................76 3.1.1 Пример использования поиска в 3D .......................................76 3.1.2 Начнем с HTTP-запроса .........................................................77 3.1.3 Обертываем свою работу в пользовательский компонент ...77 3.1.4 Отображение результатов поиска .......................................80 3.1.5 Стилизация нашего компонента ..........................................81 3.2 Делаем наш компонент настраиваемым .................................83 3.2.1 Создание API компонента с помощью устанавливающих методов ..................................................................................84 3.2.2 Используя наш API извне ........................................................84 3.3 Использование атрибутов для конфигурирования ...............86 3.3.1 Аргумент против API компонента .......................................86 3.3.2 Реализация атрибутов ..........................................................87 3.3.3 Чувствительность к регистру символов ..............................88 3.4 Прослушивание изменений в атрибутах .................................89 3.4.1 Добавление поля ввода текста ..............................................89 3.4.2 Метод attributeChangedCallback ............................................90 3.4.3 Атрибуты, за которыми ведется наблюдение .....................91 3.5 Делаем другие вещи еще более настраиваемыми .................94 3.5.1 Использование метода hasAttribute для проверки существования атрибута .....................................................94 3.5.2 Полная настройка URL-адреса HTTP-запроса для разработки ......................................................................95

Стр.9

Содержание 9 3.5.3 Руководство по передовым методикам .................................96 3.5.4 Избегайте использования атрибутов для расширенных данных ....................................................................................96 3.5.5 Отражение свойств и атрибутов ........................................97 3.6 Обновление компонента-ползунка ..........................................99 Резюме .....................................................................................................105 4 5 Жизненный цикл компонента................................................106 4.1 API веб-ком по нен тов .................................................................106 4.2 Обработчик connectedCallback .................................................107 4.2.1 Конструктор в сравнении с методом connectedCalback .....111 4.3 Остальные методы жизненного цикла веб-компонента ...114 4.3.1 Метод disconnectedCallback .................................................114 4.3.2 Метод adoptedCallback ........................................................117 4.4 Сравнение с жизненным циклом React .................................118 4.5 Сравнение с жизненным циклом игрового движка ............120 4.6 Жизненный цикл компонента v0 ............................................126 Резюме .....................................................................................................127 Реализация более качественного веб-приложения с помощью модулей .......................................................................128 5.1 Использование тега