Автор оригинала: Arbaz Siddiqui.
Ссылка на сайт к оригинальной статье.
Введение в прокси
В условиях программирования прокси – любая организация, которая действует от имени какой-то другой организации. Прокси-сервер расположен между клиентом и сервером и действует клиент для сервера и наоборот. Работа любого прокси – перехватить входящие запросы/вызовы и пересылать его вверх по течению. Этот перехват позволяет прокси добавить логику и изменять поведение входящих и исходящих запросов.
Прокси JavaScript – это нечто очень похожее, что между вашим фактическим объектом и кодом пытается получить доступ к этому объекту.
Согласно веб-документам MDN:
Прокси-объект используется для определения пользовательского поведения для фундаментальных операций (например, поиск свойств, назначение, перечисление, вызов функций и т. Д.).
Терминологии
Есть три термина, которые нам нужно знать, прежде чем мы сможем реализовать прокси:
Цель
Цель – это фактический объект, который наш прокси будет сидеть перед и виртуализировать. Это может быть любой объект JavaScript.
Ловушки
Ловушки – это методы, которые перехватывают вызов цели, когда вызывается свойство или метод. Есть Многие Определенные ловушки, которые могут быть реализованы.
Обработчик
Обработчик – это объект заполнителя, где живут все ловушки. Вы можете подумать об этом как об этом как объект с ключами ломтиков и значений функций, реализующих эти ловушки.
Давайте посмотрим на основной пример:
//movie is a target
const movie = {
name: "Pulp Fiction",
director: "Quentin Tarantino"
};
//this is a handler
const handler = {
//get is a trap
get: (target, prop) => {
if (prop === 'director') {
return 'God'
}
return target[prop]
},
set: function (target, prop, value) {
if (prop === 'actor') {
target[prop] = 'John Travolta'
} else {
target[prop] = value
}
}
};
const movieProxy = new Proxy(movie, handler);
console.log(movieProxy.director); //God
movieProxy.actor = "Tim Roth";
movieProxy.actress = "Uma Thurman";
console.log(movieProxy.actor); //John Travolta
console.log(movieProxy.actress); //Uma Thurman
Выход выше выполнения кода будет:
God John Travolta Uma Thurman
В приведенном выше примере наш целевой объект был фильм Мы реализовали обработчик с получить и а Установить ловушка. Мы добавили логику, что если мы доступны Режиссер Ключ, мы должны вернуть строку Бог вместо фактического значения. Точно так же мы добавили Установить Ловушка, которая перехватит все записи для целевого объекта и изменить значение для Джон Траволта Если ключ Актер Отказ
## Реальные случаи использования мира
Хотя он не так хорошо известен как другие функции ES2015, Proxy имеет много немногодных, таких как значения по умолчанию для всех свойств цели, могут быть очевидны сейчас. Позволяет взглянуть на более реальные сценарии мира, где мы можем использовать прокси.
Валидация
Поскольку мы можем перехватить писать на объект, мы можем сделать проверку значение, которое мы пытаемся установить на объекте. Позволяет привести пример:
const handler = {
set: function (target, prop, value) {
const houses = ['Stark', 'Lannister'];
if (prop === 'house' && !(houses.includes(value))) {
throw new Error(`House ${value} does not belong to allowed ${houses}`)
}
target[prop] = value
}
};
const gotCharacter = new Proxy({}, handler);
gotCharacter.name = "Jamie";
gotCharacter.house = "Lannister";
console.log(gotCharacter);
gotCharacter.name = "Oberyn";
gotCharacter.house = "Martell";
Выполнение вышеуказанного кода приведет к следующему выходу:
{ name: 'Jamie', house: 'Lannister' }
Error: House Martell does not belong to allowed Stark,Lannister
В приведенном выше примере мы ограничиваем, что значение, разрешенное для свойства Дом Может быть только один из разрешенных домов. Мы даже можем использовать этот подход для создания объектов только для чтения, все, что нам нужно сделать этот бросок внутри Установить ловушка.
Побочные эффекты
Мы можем использовать прокси, чтобы создать побочные эффекты на недвижимость для чтения/записи. Идея состоит в том, чтобы вызвать некоторую функцию, если конкретное свойство доступно или записано. Позволяет привести пример:
const sendEmail = () => {
console.log("sending email after task completion")
};
const handler = {
set: function (target, prop, value) {
if (prop === 'status' && value === 'complete') {
sendEmail()
}
target[prop] = value
}
};
const tasks = new Proxy({}, handler);
tasks.status = "complete";
Выполнение вышеуказанного кода приведет к следующему выходу:
sending email after task completion
Здесь мы перехватываем пишет в недвижимость Статус И если Статус Завершено, мы запускаем функцию побочного эффекта. Один действительно прохладный реализация это в Sindre Sorhus ‘s по изменению упаковка.
Кэширование
Как мы можем перехватить доступ к свойствам объекта, мы можем построить кэширования памяти, чтобы только возвращать значения для объекта, если он не имеет истечения. Давайте посмотрим на пример:
const cacheTarget = (target, ttl = 60) => {
const CREATED_AT = Date.now();
const isExpired = () => (Date.now() - CREATED_AT) > (ttl * 1000);
const handler = {
get: (target, prop) => isExpired() ? undefined : target[prop]
};
return new Proxy(target, handler)
};
const cache = cacheTarget({age: 25}, 5);
console.log(cache.age);
setTimeout(() => {
console.log(cache.age)
}, 6 * 1000);
Выполнение вышеуказанного кода приведет к следующему выходу:
25 undefined
Здесь мы создаем функцию, которая возвращает прокси и обработчик для этого прокси сначала проверки, если объект истек или нет. Мы можем продлить эту функциональность иметь на основе ключевых TTLS и многое другое.
Недостатки
В то время как прокси – довольно волшебные, но там мало недостатков с прокси, которые мы должны быть осторожны.
- Производительность может взять Резкий Нажмите при использовании прокси и, следовательно, следует избегать при написании критического кода производительности.
- Учитывая объект не знание, если это прокси-объект или целевой объект.
- Наконец, прокси не обязательно приводит к очень чистому и легко понятному коду.
Заключение
Прокси невероятно мощные и могут быть использованы и оскорблены для широкого спектра вещей. В этой статье мы посмотрели, какие прокси, как их реализовать, мало реального мира используют случаи их и их недостатков.
Как этот пост? Вы можете найти больше в Twitter: @Arbazsiddiqui_ Или посетить мой Сайт Или присоединиться к рассылка Спасибо за прочтение!