Не прекращайте всплытие без необходимости!

Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.

Зачастую прекращение всплытия через event.stopPropagation() имеет свои подводные камни, которые со временем могут стать проблемами.

Например:
1) Мы делаем вложенное меню. Каждое подменю обрабатывает клики на своих элементах и делает для них stopPropagation, чтобы не срабатывало внешнее меню.
2) Позже мы решили отслеживать все клики в окне для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Некоторые системы аналитики так делают. Обычно используют document.addEventListener('click'…), чтобы отлавливать все клики.
3) Наша аналитика не будет работать над областью, где клики прекращаются stopPropagation. Увы, получилась «мёртвая зона».

#браузер #документ #всплытие

Погружение

Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»).
Она очень редко используется в реальном коде, однако тоже может быть полезной.

Стандарт DOM Events описывает 3 фазы прохода события:
1) Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
2) Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
3) Фаза всплытия (bubbling stage) – событие начинает всплывать.

Картинка из спецификации демонстрирует, как это работает при клике по ячейке <td>, расположенной внутри таблицы.

То есть при клике на <td> событие путешествует по цепочке родителей сначала вниз к элементу (погружается), затем оно достигает целевой элемент (фаза цели), а потом идёт наверх (всплытие), вызывая по пути обработчики.

#браузер #документ #погружение

Отлов погружения

Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.

Обработчики, добавленные через on<event>-свойство или через HTML-атрибуты, или через addEventListener(event, handler) с двумя аргументами, ничего не знают о фазе погружения, а работают только на 2-ой и 3-ей фазах.

Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент capture (см. картинку выше).

Существуют два варианта значений опции capture:
Если аргумент false (по умолчанию), то событие будет поймано при всплытии.
Если аргумент true, то событие будет перехвачено при погружении.

Обратите внимание, что хоть и формально существует 3 фазы, 2-ую фазу («фазу цели»: событие достигло элемента) нельзя обработать отдельно, при её достижении вызываются все обработчики: и на всплытие, и на погружение.

#браузер #документ #погружение

Чтобы убрать обработчик removeEventListener, нужна та же фаза

Если мы добавили обработчик вот так addEventListener(..., true), то мы должны передать то же значение аргумента capture в removeEventListener(..., true), когда снимаем обработчик.

#браузер #документ #погружение

На каждой фазе разные обработчики на одном элементе срабатывают в порядке назначения

Если у нас несколько обработчиков одного события, назначенных addEventListener на один элемент, в рамках одной фазы, то их порядок срабатывания – тот же, в котором они установлены.

#браузер #документ #событие

Пример: показать сообщение

Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert.

Это был пример HTML. Далее мы будем создавать такой же div, используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

#браузер #документ #изменение

matches

Предыдущие методы искали по DOM.

Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false.

Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.

#браузер #документ #поиск

Proxy

Объект Proxy «оборачивается» вокруг другого объекта и может перехватывать (и, при желании, самостоятельно обрабатывать) разные действия с ним, например чтение/запись свойств и другие. Далее мы будем называть такие объекты «прокси».

Прокси используются во многих библиотеках и некоторых браузерных фреймворках.

Синтаксис:

let proxy = new Proxy(target, handler);

- target – это объект, для которого нужно сделать прокси, может быть чем угодно, включая функции.
- handler – конфигурация прокси: объект с «ловушками» («traps»): методами, которые перехватывают разные операции, например, ловушка get – для чтения свойства из target, ловушка set – для записи свойства в target и так далее.

При операциях над proxy, если в handler имеется соответствующая «ловушка», то она срабатывает, и прокси имеет возможность по-своему обработать её, иначе операция будет совершена над оригинальным объектом target.

#разное #proxy

Proxy: ловушки

Proxy – это особый объект, у него нет собственных свойств. С пустым handler он просто перенаправляет все операции на target.

Чтобы активировать другие его возможности, добавим ловушки.

Для большинства действий с объектами в спецификации JavaScript есть так называемый «внутренний метод», который на самом низком уровне описывает, как его выполнять. Например, [[Get]] – внутренний метод для чтения свойства, [[Set]] – для записи свойства, и так далее. Эти методы используются только в спецификации, мы не можем обратиться напрямую к ним по имени.

Ловушки как раз перехватывают вызовы этих внутренних методов. Полный список методов, которые можно перехватывать, перечислен в спецификации Proxy, а также в таблице ниже.

Для каждого внутреннего метода в этой таблице указана ловушка, то есть имя метода, который мы можем добавить в параметр handler при создании new Proxy, чтобы перехватывать данную операцию.

P.S. На картинке отображена таблица со всеми доступными ловушками.

#разное #proxy #ловушки

Proxy: Значение по умолчанию с ловушкой «get»

Чаще всего используются ловушки на чтение/запись свойств.

Чтобы перехватить операцию чтения, handler должен иметь метод get(target, property, receiver).

Он срабатывает при попытке прочитать свойство объекта, с аргументами:
- target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy,
- property – имя свойства,
- receiver – если свойство объекта является геттером, то receiver – это объект, который будет использован как this при его вызове. Обычно это сам объект прокси (или наследующий от него объект). Прямо сейчас нам не понадобится этот аргумент, подробнее разберём его позже.

Давайте применим ловушку get, чтобы реализовать «значения по умолчанию» для свойств объекта.
Например, сделаем числовой массив, так чтобы при чтении из него несуществующего элемента возвращался 0.

#разное #proxy #ловушки

Продвинутая реализация каррирования

Выше представлен "продвинутый" вариант функции каррирования.

Когда мы запускаем её, есть две ветви выполнения if:
1. Вызвать сейчас: если количество переданных аргументов args совпадает с количеством аргументов при объявлении функции (func.length) или больше, тогда вызов просто переходит к ней.
2. Частичное применение: в противном случае func не вызывается сразу. Вместо этого, возвращается другая обёртка pass, которая снова применит curried, передав предыдущие аргументы вместе с новыми. Затем при новом вызове мы опять получим либо новое частичное применение (если аргументов недостаточно) либо, наконец, результат.

На картинке выше показано, что произойдёт в случае sum(a, b, c). У неё три аргумента, так что sum.length = 3.

#разное #каррирование

Proxy: Валидация с ловушкой «set»

Допустим, мы хотим сделать массив исключительно для чисел. Если в него добавляется значение иного типа, то это должно приводить к ошибке.

Ловушка set срабатывает, когда происходит запись свойства.
- set(target, property, value, receiver):
- target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy,
- property – имя свойства,
- value – значение свойства,
- receiver – аналогично ловушке get, этот аргумент имеет значение, только если свойство – сеттер.

Ловушка set должна вернуть true, если запись прошла успешно, и false в противном случае (будет сгенерирована ошибка TypeError).

#разное #proxy #ловушки

Строки, Intl.Collator

Intl.Collator - конструктор для «сортировщиков», которые представляют собой объекты, позволяющие сравнивать строки с учетом языка.

Общая проблема строк JavaScript – они «не в курсе» языка и особенностей стран, где находится посетитель.

При сравнении сравниваются коды символов, а это неправильно, к примеру, в русском языке оказывается, что "ё" > "я" и "а" > "Я", хотя всем известно, что я – последняя буква алфавита и это она должна быть больше любой другой.

Intl.Collator решает все эти проблемы.

P.S. Результат compare имеет значение 1 (больше), 0 (равно) или -1 (меньше).

#разное #Intl #интернационализация

ТОП-2 способа научиться создавать сайты:

✖️ Купить дорогой онлайн-курс
✔️ Подписаться на Сайтодел

Это крупнейшее сообщество Web-разработчиков в Telegram! Там делятся лучшими бесплатными материалами и уроками:

📲 Макеты, сниппеты, репозитории и даже цветовые палитры. Здесь собрано всё, что необходимо новичку!

Подписывайтесь и прокачивайте свои навыки: @sitodel 👈

Даты, Intl.DateTimeFormat

Первый аргумент – такой же, как и в Collator, а в объекте options мы можем определить, какие именно части даты показывать (часы, месяц, год…) и в каком формате.

Все локали обязаны поддерживать следующие наборы настроек:
- weekday, year, month, day, hour, minute, second
- weekday, year, month, day
- year, month, day
- year, month
- month, day
- hour, minute, second

Если указанный формат не поддерживается, то настройка formatMatcher задаёт алгоритм подбора наиболее близкого формата: basic – по стандартным правилам и best fit – по умолчанию, на усмотрение окружения (браузера).

#разное #Intl #интернационализация

Числа, Intl.NumberFormat

Форматтер Intl.NumberFormat умеет красиво форматировать не только числа, но и валюту, а также проценты.

P.S. На скрине показаны примеры создания и использования числового форматтера.

#разное #Intl #интернационализация

Делать сайты не так сложно как кажется!

На нашем втором канале Полезная вЁрстка можно найти готовые решения ежедневных задач, с которыми сталкиваются веб-разработчики.

Подписывайся на канал и получай новые идеи!

Соседи и родитель

Соседи – это узлы, у которых один и тот же родитель.

Следующий сосед – в свойстве nextSibling, а предыдущий – в previousSibling.
Родитель доступен через parentNode.

P.S. Примеры показаны на картинке выше.

#браузер #документ #dom_навигация

Методы в Date, String, Number

Методы форматирования также поддерживаются в обычных строках, датах, числах:

String.prototype.localeCompare(that [, locales [, options]])
Сравнивает строку с другой, с учётом локали.

Date.prototype.toLocaleString([locales [, options]])
Форматирует дату в соответствии с локалью.

Date.prototype.toLocaleDateString([locales [, options]])
То же, что и выше, но опции по умолчанию включают в себя год, месяц, день.

Date.prototype.toLocaleTimeString([locales [, options]])
То же, что и выше, но опции по умолчанию включают в себя часы, минуты, секунды.

Number.prototype.toLocaleString([locales [, options]])
Форматирует число, используя опции Intl.NumberFormat.

Все эти методы при запуске создают соответствующий объект Intl.* и передают ему опции, можно рассматривать их как укороченные варианты вызова.

P.S. Примеры по каждому методу показаны на картинке.

#разное #Intl #интернационализация

Браузерное окружение, спецификации

Язык JavaScript изначально был создан для веб-браузеров. Но с тех пор он значительно эволюционировал и превратился в кроссплатформенный язык программирования для решения широкого круга задач.

Сегодня JavaScript может использоваться в браузере, на веб-сервере или в какой-то другой среде, даже в кофеварке. Каждая среда предоставляет свою функциональность, которую спецификация JavaScript называет окружением.

Окружение предоставляет свои объекты и дополнительные функции, в дополнение базовым языковым. Браузеры, например, дают средства для управления веб-страницами. Node.js делает доступными какие-то серверные возможности и так далее.

P.S. На картинке в общих чертах показано, что доступно для JavaScript в браузерном окружении.

#браузер #документ

DOM (Document Object Model)

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объект document – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице.

Мы использовали в примере только document.body.style, но на самом деле возможности по управлению страницей намного шире. Различные свойства и методы описаны в спецификации:

DOM Living Standard на https://dom.spec.whatwg.org

#браузер #документ