This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.
Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"
Один из основных факторов, способствующих трансформации интернета в последние годы, – широкое внедрение разработки пользовательского интерфейса на основе компонентов. В этой книге подробно описываются рабочие процессы, которые дают вам полный контроль над стилями и поведением компонентов и существенно упрощают их создание, совместное и повторное использование в проектах.
В первой части рассмотрено получение простого компонента с нуля. Вторая часть посвящена улучшению организации проекта. В третьей части освещаются принципы совместной работы с несколькими компонентами, позволяющей решать более сложные задачи. Для всех примеров предоставляется исходный код.
Издание предназначено для веб-разработчиков, имеющих опыт работы с HTML, CSS и JavaScript.
Author(s): Бен Фаррелл Edition: 1 Publisher: ДМК Пресс Year: 2020
Language: Russian Commentary: Vector PDF Pages: 462 City: М. Tags: Web Applications; DOM; Unit Testing; CSS; User Interface; Web Design; HTML
Титульный лист
Предисловие
От автора
Благодарности
Об этой книге
Об авторе
Об иллюстрации на обложке
Часть I. Первые шаги
1. Фреймворк без фреймворка
1.1 Что такое веб-компоненты?
1.1.1 Календарь с возможностью выбора даты
1.1.2 Теневая модель DOM
1.1.3 Что имеют в виду, когда говорят «веб-компоненты»?
1.1.4 Проблемная история импорта HTML
1.1.5 Библиотеки Polymer и X-Tag
1.1.6 Современные веб-компоненты
1.2 Будущее веб-компонентов
1.3 За пределами одного компонента
1.3.1 Веб-компоненты как и любой другой элемент DOM
1.3.2 От отдельного компонента к приложению
1.4 Ваш проект, ваш выбор
Резюме
2. Ваш первый веб-компонент
2.1 Знакомство с HTMLElement
2.1.1 Ускоренный курс по наследованию
2.1.2 Наследование в ваших любимых элементах
2.2 Правила именования вашего элемента
2.3 Определение вашего пользовательского элемента (и обработка столкновений)
2.4 Расширение HTMLElement для создания логики пользовательского компонента
2.5 Использование вашего пользовательского элемента на практике
2.6 Создание (полезного) первого компонента
2.6.1 Настраиваем свой веб-сервер
2.6.2 Пишем свой HTML-тег
2.6.3 Создаем свой класс
2.6.4 Добавляем содержимое в наш компонент
2.6.5 Добавляем стили
2.6.6 Логика компонента
2.6.7 Добавляем интерактивности
2.6.8 Последние штрихи
2.6.9 Улучшение компонента
2.7 Примечания относительно поддержки в браузерах
Резюме
3. Делаем так, чтобы ваш компонент можно было использовать повторно
3.1 Реальный компонент
3.1.1 Пример использования поиска в 3D
3.1.2 Начнем с HTTP-запроса
3.1.3 Обертываем свою работу в пользовательский компонент
3.1.4 Отображение результатов поиска
3.1.5 Стилизация нашего компонента
3.2 Делаем наш компонент настраиваемым
3.2.1 Создание API компонента с помощью устанавливающих методов
3.2.2 Используя наш API извне
3.3 Использование атрибутов для конфигурирования
3.3.1 Аргумент против API компонента
3.3.2 Реализация атрибутов
3.3.3 Чувствительность к регистру символов
3.4 Прослушивание изменений в атрибутах
3.4.1 Добавление поля ввода текста
3.4.2 Метод attributeChangedCallback
3.4.3 Атрибуты, за которыми ведется наблюдение
3.5 Делаем другие вещи еще более настраиваемыми
3.5.1 Использование метода hasAttribute для проверки существования атрибута
3.5.2 Полная настройка URL-адреса HTTP-запроса для разработки
3.5.3 Руководство по передовым методикам
3.5.4 Избегайте использования атрибутов для расширенных данных
3.5.5 Отражение свойств и атрибутов
3.6 Обновление компонента-ползунка
Резюме
4. Жизненный цикл компонента
4.1 API веб-компонентов
4.2 Обработчик connectedCallback
4.2.1 Конструктор в сравнении с методом connectedCalback
4.3 Остальные методы жизненного цикла веб-компонента
4.3.1 Метод disconnectedCallback
4.3.2 Метод adoptedCallback
4.4 Сравнение с жизненным циклом React
4.5 Сравнение с жизненным циклом игрового движка
4.6 Жизненный цикл компонента v0
Резюме
5. Реализация более качественного веб-приложения с помощью модулей
5.1 Использование тега
