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 #ловушки

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

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

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

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

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

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

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

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

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

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

Строки, Intl.Collator

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

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

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

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

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

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

Даты, 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 #интернационализация

Методы в 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

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

BOM (Browser Object Model)

Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером (окружением), чтобы работать со всем, кроме документа.

Например:
- Объект navigator даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются: navigator.userAgent – информация о текущем браузере, и navigator.platform – информация о платформе (может помочь в понимании того, в какой ОС открыт браузер – Windows/Linux/Mac и так далее).
- Объект location позволяет получить текущий URL и перенаправить браузер по новому адресу.

Пример как мы можем использовать объект location показан на рисунке.

Функции alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем.

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

Пример DOM

DOM – это представление HTML-документа в виде дерева тегов.

На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов.

Каждый узел этого дерева – это объект.

Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: <html> – это корневой узел, <head> и <body> его дочерние узлы и т.д.

Текст внутри элементов образует текстовые узлы, обозначенные как #text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне.

Например, в теге <title> есть текстовый узел "О лосях".

Обратите внимание на специальные символы в текстовых узлах:
- перевод строки: ↵ (в JavaScript он обозначается как \n)
- пробел: ␣

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

Автоисправление

Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.

Например, в начале документа всегда должен быть тег <html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>.

Например, если HTML-файл состоит из единственного слова "Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег <head>.

При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.

В примере единственный тег <p> не закрыт, однако DOM будет нормальным, потому что браузер сам закроет тег и восстановит отсутствующие детали.

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

Другие типы узлов

Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.

Например, узел-комментарий, который вы можете увидеть на картинке выше.

Здесь мы видим узел нового типа – комментарий, обозначенный как #comment, между двумя текстовыми узлами.

Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве.

Все, что есть в HTML, даже комментарии, является частью DOM.

Даже директива <!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед <html>. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует.

Даже объект document, представляющий весь документ, формально является DOM-узлом.

Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них: document, узлы-элементы, текстовые узлы, комментарии.

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

Поэкспериментируйте сами

Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.

Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.

Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.

Выглядит примерно так, как на картинке выше.

Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.

Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.

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

Взаимодействие с консолью

При работе с DOM нам часто требуется применить к нему JavaScript. Например: получить узел и запустить какой-нибудь код для его изменения, чтобы посмотреть результат. Вот несколько подсказок, как перемещаться между вкладками Elements и Console.

Для начала:
1. На вкладке Elements выберите первый элемент <li>.
2. Нажмите Esc – прямо под вкладкой Elements откроется Console.

Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0; предыдущий, выбранный до него, как $1 и т.д.

Теперь мы можем запускать на них команды. Например $0.style.background = 'red' сделает выбранный элемент красным, как на картинке выше.

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

Навигация по DOM-элементам

DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект.

Все операции с DOM начинаются с объекта document. Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу.

Так выглядят основные ссылки, по которым можно переходить между узлами DOM (см. картинку выше).

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

Сверху: documentElement и body

Самые верхние элементы дерева доступны как свойства объекта document:

<html> = document.documentElement
Самый верхний узел документа: document.documentElement. В DOM он соответствует тегу <html>.

<body> = document.body
Другой часто используемый DOM-узел – узел тега <body>: document.body.

<head> = document.head
Тег <head> доступен как document.head.

Есть одна тонкость: document.body может быть равен null

Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.

В частности, если скрипт находится в <head>, document.body в нём недоступен, потому что браузер его ещё не прочитал.

Поэтому, в примере выше первый alert выведет null.

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

Дочерние узлы и потомки

Здесь и далее мы будем использовать два принципиально разных термина:

- Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например, <head> и <body> являются детьми элемента <html>.
- Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.

В примере выше детьми тега <body> являются теги <div> и <ul> (и несколько пустых текстовых узлов).

А потомки <body>– это и прямые дети <div>, <ul> и вложенные в них: <li> (потомок <ul>) и <b> (потомок <li>) – в общем, все элементы поддерева.

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

childNodes, firstChild, lastChild

childNodes содержит список всех детей, включая текстовые узлы.

Пример выше последовательно выведет детей document.body.

Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент <script>. На самом деле, в документе есть ещё «какой-то HTML-код», но на момент выполнения скрипта браузер ещё до него не дошёл, поэтому скрипт не видит его.

Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему элементу.

Они, по сути, являются всего лишь сокращениями. Если у тега есть дочерние узлы, условие ниже всегда верно:

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

Для проверки наличия дочерних узлов существует также специальная функция elem.hasChildNodes().

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