Быстрое введение в прокси JavaScript

Автор оригинала: Chuks Opia.

Что такое прокси JavaScript? Вы можете спросить. Это одна из функций, которые отправлены с ES6. К сожалению, это, кажется, не широко используется.

Согласно MDN веб-документы :

Простые условия, прокси – Геттерс и Соседниты с большим количеством Swag. Прокси-объект сидит между объектом и внешним миром. Они перехватывают вызовы атрибутов и методов объекта, даже если эти атрибуты и методы не существуют.

Для нас, чтобы понять, как работает прокси, нам нужно определить три термина, используемые прокси:

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

Синтаксис

let myProxy = new Proxy(target, handler);

Почему прокси?

Поскольку прокси похож на Геттерс и Соседниты Почему мы должны использовать их? Посмотрим, почему:

const staff = {
  _name: "Jane Doe",
  _age: 25,
  get name() {
    console.log(this._name);
  },
  get age() {
    console.log(this._age);
  },
  set age(newAge) {
    this._age = newAge;
    console.log(this._age)
  }
};
staff.name // => "Jane Doe"
staff.age // => 25
staff.age = 30
staff.age // => 30
staff.position // => undefined

Давайте напишем тот же код с прокси:

const staff = {
  name: "Jane Doe",
  age: 25
}
const handler = {
  get: (target, name) => {
    name in target ? console.log(target[name]) : console.log('404 not found');
  },
  set: (target, name, value) => {
    target[name] = value;
  }
}
const staffProxy = new Proxy(staff, handler);
staffProxy.name // => "Jane Doe"
staffProxy.age // => 25
staffProxy.age = 30
staffProxy.age // => 30
staffProxy.position // => '404 not found'

В приведенном выше примере использования Геттерс и Соседниты мы должны определить Добрать и Сеттер Для каждого атрибута в Персонал объект. Когда мы пытаемся получить доступ к несуществующей собственности, мы получаем undefined Отказ

С прокси, нам нужно только один получить и Установить Ловушка для управления взаимодействиями с каждым свойством в Персонал объект. Всякий раз, когда мы пытаемся получить доступ к несуществующему свойству, мы получаем пользовательское сообщение об ошибке.

Есть много других случаев использования для прокси. Давайте рассмотрим некоторые:

Валидация с прокси

С прокси, мы можем обеспечить соблюдение валидаций ценностей в объектах JavaScript. Скажем, у нас есть Персонал Схема и хотелось бы выполнить некоторые валидации до того, как персонал может быть сохранен:

const validator = {
  set: (target, key, value) => {
    const allowedProperties = ['name', 'age', 'position'];
    if (!allowedProperties.includes(key)) {
      throw new Error(`${key} is not a valid property`)
    }
    
    if (key === 'age') {
      if (typeof value !== 'number' || Number.isNaN(value) || value <= 0) {
        throw new TypeError('Age must be a positive number')
      }
    }
    if (key === 'name' || key === 'position') {
      if (typeof value !== 'string' || value.length <= 0) {
        throw new TypeError(`${key} must be a valid string`)
      }
    }
   target[key] = value; // save the value
   return true; // indicate success
  }
}
const staff = new Proxy({}, validator);
staff.stats = "malicious code" //=> Uncaught Error: stats is not a valid property
staff.age = 0 //=> Uncaught TypeError: Age must be a positive number
staff.age = 10
staff.age //=> 10
staff.name = '' //=> Uncaught TypeError: name must be a valid string

На фрагменте кода выше мы объявляем Валидатор Обработчик, где у нас есть массив разрезание Отказ В Установить Ловушка, мы проверяем, является ли настроек ключа, частью нашего разрезание Отказ Если это не так, мы бросаем ошибку. Мы также проверяем, установлены ли значения значений определенных типов данных, прежде чем сохранить значение.

Отзывные прокси

Что если мы хотели отозвать доступ к объекту? Ну, прокси JavaScript имеет Proxy.RevoCable () Метод, который создает обратный прокси. Это дает нам возможность отозвать доступ к прокси. Посмотрим, как это работает:

const handler = {
  get: (target, name) => {
    name in target ? console.log(target[name]) : console.log('404 not found');
    console.log(target)
  },
  
  set: (target, name, value) => {
    target[name] = value;
  }
}
const staff = {
  name: "Jane Doe",
  age: 25
}
let { proxy, revoke } = Proxy.revocable(staff, handler);
proxy.age // => 25
proxy.name // => "Jane Doe"
proxy.age = 30
proxy.age // => 30
revoke() // revoke access to the proxy
proxy.age // => Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked
proxy.age = 30 // => Uncaught TypeError: Cannot perform 'set' on a proxy that has been revoked

В приведенном выше примере мы используем разрушительность доступа к прокси и отозвать Свойства объекта, возвращаемого Proxy.RevoCable () Отказ

После того, как мы назовем отозвать Функция, любая операция, применяемая к прокси вызывает Типеррор Отказ С этим в нашем коде мы сможем предотвратить определенные действия пользователей на определенные объекты.

Прокси JavaScript – это мощный способ создания и управления взаимодействиями между объектами. Другие приложения реального мира для прокси включают в себя:

Расширение конструкторов
Манипулирование узлами DOM
Коррекция стоимости и дополнительная собственность
Отслеживание объектов недвижимости
Функция захвата

И список продолжается.

Есть больше для прокси, чем мы покрывали здесь. Вы можете проверить Proxy MDN Docs Чтобы узнать все доступные ловушки и как их использовать.

Я надеюсь, что вы нашли этот учебник полезным. Пожалуйста, сделайте и делитесь, чтобы другие могли найти эту статью. Ударил меня в Twitter @d Evelopia_ с вопросами или для чата.

Синтаксис

Почему прокси?

Валидация с прокси

Отзывные прокси

Читайте ещё по теме: