Кратко ознакомиться с прокси-серверами JavaScript

kratko oznakomitsya s proksi serverami javascript

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

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

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

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

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

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

Синтаксис

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'

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

Из прокси нам нужен только один get и set trap для управления взаимодействием с каждым свойством в staff объект. Каждый раз, когда мы пытаемся получить доступ к несуществующему свойству, мы получаем специальное сообщение об ошибке.

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

Проверка с помощью прокси

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

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

Во фрагменте кода выше мы объявляем a validator обработчик, где у нас есть массив allowedProperties. В set trap, мы проверяем, является ли установленный ключ частью нашего allowedProperties. Если нет, мы обнаруживаем ошибку. Мы также проверяем, имеют ли установленные значения определенные типы данных, прежде чем сохранить значение.

Отозванные доверенные лица

Что делать, если мы хотим отменить доступ к объекту? Что ж, прокси-серверы JavaScript имеют a 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 и revoke свойства объекта, возвращенного Proxy.revocable().

После того, как мы позвоним по телефону revoke функция, любая операция, к которой применяется proxy вызывает а TypeError. Благодаря этому в нашем коде мы можем запретить пользователям выполнять определенные действия по определенным объектам.

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

  • Расширяемые конструкторы
  • Манипулирование узлами DOM
  • Коррекция значения и дополнительное свойство
  • Отслеживание доступа к свойствам
  • Перехват вызовов функций

И список можно продолжать.

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

Надеюсь, это руководство было вам полезно. Пожалуйста, сделайте и поделитесь, чтобы другие могли найти статью. Обращайтесь ко мне в Twitter @developia_ с вопросами или для чата.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *