Повышение уровня вашего кода JavaScript с помощью Proxy API.

Как разработчики, мы всегда должны стремиться к тому, чтобы наш код было легче читать, управлять им и поддерживать его. Хотя существует множество универсальных способов написания более качественного кода, таких как использование осмысленных имен, создание небольших функций и объяснение себя в коде вместо комментариев, мне также нравится изучать инструменты для конкретных языков, которые могут помочь упростить мой код в долгосрочной перспективе. Одним из таких инструментов является Proxy API. В этом блоге я расскажу, что такое Proxy API и как он может помочь вам писать лучший код.

Что такое прокси API

Proxy API был представлен как часть ECMAScript 6. Подобно тому, как прокси-серверы перехватывают серверные запросы, прокси-объект перехватывает вызовы объектных операций и переопределяет их поведение. Читая Веб-документ MDN, они утверждают:

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

Прежде чем мы начнем, мы должны сначала понять некоторые ключевые термины, которые используются при обсуждении прокси-объектов. Эти определения взяты непосредственно из Документации MDN по прокси-объектам.

Обработчик: объект, переданный в качестве второго аргумента конструктору Proxy. Он содержит ловушку, определяющую поведение прокси.

Ловушка: функция, определяющая поведение соответствующего внутреннего метода объекта. (Это аналогично концепции ловушек в операционных системах.)

Цель: Объект, который виртуализирует прокси. Он часто используется в качестве хранилища для прокси. Инварианты (семантика, которая остается неизменной) в отношении нерасширяемости или ненастраиваемых свойств объекта проверяются относительно цели.

Инварианты: семантика, которая остается неизменной при реализации пользовательских операций. Если ваша реализация ловушки нарушает инварианты обработчика, будет выброшено TypeError.

Наконец, я не буду описывать все внутренние методы объекта, для которых вы можете создавать ловушки (это сделало бы этот блог слишком длинным), но если вас интересуют другие внутренние методы объекта, вы можете найти их здесь.

Создание прокси-объекта

Для создания прокси-объекта мы используем конструктор Proxy. Этот конструктор ожидает два объекта: цель и обработчик. Прокси без определенных действий выглядит так:

И когда мы регистрируем это в консоли браузера, мы видим следующее:

Вещи в квадратных скобках называются внутренними слотами или внутренними методами. Их полезно знать, но не слишком важно, так как они недоступны через код. Единственным важным полем является поле [[IsRevoked]]. По умолчанию прокси-объекты никогда не удаляются сборщиком мусора. Если вы хотите создать прокси-объект, который может быть удален сборщиком мусора, вам нужно использовать статический отзываемый метод. Это создаст прокси-объект с методом отзыва, который можно использовать для отключения прокси-сервера и его сборки мусора, когда это возможно.

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

Получить ловушку

Ловушка get без специальной логики просто возвращает значение свойства или undefined, если свойство не определено.

Более практичным применением было бы выдать ошибку, если свойства не определены, что помогает в процессе отладки. Код ловушки для этой логики будет выглядеть так:

С помощью этого кода при доступе к несуществующему свойству будет выдана ошибка, что поможет в процессе отладки.

Установить ловушку

Ловушка set без специальной логики позволяет установить любое значение свойства.

Более практичным применением было бы предотвращение установки определенных полей. В следующем примере поля, начинающиеся со знака подчеркивания, считаются закрытыми, и их нельзя будет установить после определения. Код ловушки для этой логики будет выглядеть так:

С этим кодом попытка установки закрытого свойства будет зарегистрирована в консоли, и значение не будет установлено.

Применить ловушку

Ловушка применения запускается при вызове функции. Ловушка применения без особой логики:

Более практичным применением этого является создание прокси, который автоматически кэширует результаты дорогостоящих вычислений и при последующих вызовах возвращает кэшированное значение. Код для этой логики будет выглядеть так:

В этом коде первый вызов функции вычисляет и возвращает значение, а последующий вызов извлекает значение из кеша, что значительно повышает производительность функции.

Я надеюсь, что это поможет вам внедрить Proxy API в ваши приложения и упростить чтение, управление и поддержку вашей кодовой базы. До скорого. Удачного кодирования!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .