Что такое прокси -шаблон? А как это реализовать с помощью JavaScript?

Первоначально публикуйте в моем блоге: https://ms314006.github.io/what-is-the-proxy-pattern-and-how-to-implement-it-by-javascript/

Привет ребята! Я Кларк. В этом посте мы собираемся узнать о прокси -шаблоне. В Proxy Pattern JavaScript не такой же, как и другие шаблоны, потому что JavaScript предоставил Новый синтаксис , это может позволить вам легко создать прокси -объект. Поэтому я думаю, что реализация Proxy Pattern не является сложным вопросом в JavaScript.

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

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

Основное использование

В JavaScript создать базовый прокси -объект действительно прост. Так же, как фрагмент ниже:

// original object
const person = {
  firstName: 'Lena',
  lastName: 'Smith',
};

// use proxy add logic on person
const personProxy = new Proxy(person, {
  get: (target, prop) => {
    if(prop === 'fullName') {
      return `${target.firstName} ${target.lastName}`;
    }
    return target[prop];
  },
});

// throw the proxy object, we can get full name
personProxy.fullName; // "Lena Smith"

В примере выше, мы видим получить Когда мы создаем прокси -объект. Если мы хотим получить что -то из объекта прокси, например, как PersonProxy.fullName Тогда это будет в получить Метод, чтобы решить, какой объект прокси должен вернуть.

И получить будет два параметра. Первый – цель , это оригинальный объект, поэтому в получить Метод мы можем получить доступ к исходному объекту через доступ цель . Второй – проп , это имя свойства, к которому мы хотим получить доступ.

Таким образом, согласно примеру выше, мы можем знать, как создать основной прокси -объект и использовать его. Кроме того, мы также можем использовать несуществующие свойства доступа к объекту прокси (например, как fullName ).

Внедрить частные свойства в объекте

Далее Proxy Pattern также может сделать некоторую логику для реализации личной собственности в объекте. В других языках программы мы добавляем «_» в прямом эфире названия свойств, например, как:

const person = {
  firstName: 'Lena',
  lastName: 'Smith',
  _age: 26, // Yes, the age is secret, right? :)
};

Но в JavaScript, даже если мы добавим _ В прямом эфире названия недвижимости мы все еще можем получить к нему доступ:

person._age; // 26

Результат выше – это не мы хотим, поэтому в этой ситуации мы можем использовать прокси -шаблон.

const personProxy = new Proxy(person, {
  get: (target, prop) => {
    if(prop[0] === '_') {
      return undefined;
    }
    return target[prop];
  },
});

personProxy._age; // undefined

Пример выше. Мы проверяем имя свойства, к которому вы хотите получить доступ в получить Метод, если первая буква – «_», верните неопределенную или если вы хотите бросить ошибку.

Мы завершили недоступные частные свойства с помощью Proxy Pattern, но мы все еще можем изменить ее:

personProxy._age = 25;

И частные свойства были изменены. Я думаю, что мы должны решить эту проблему. Так кроме получить Метод, мы можем использовать установить Метод, когда мы хотим установить свойства, например:

const personProxy = new Proxy(person, {
  get: (target, prop) => {
    if(prop[0] === '_') {
      return undefined;
    }
    return target[prop];
  },
  set: (target, prop, value) => {
    if(prop[0] === '_') {
      throw Error(`Hey, don't set private properties!`);
    }
    target[prop] = value;
  },
});

Мы можем заметить установить Метод имеет три параметра. Первый и второй такой же, как получить Анкет Третье – это значение, которое вы хотите установить для свойств. Таким образом, пример выше, мы проверяем имя свойства, если это не частные свойства, то устанавливаем свойства объекта, которые вы хотите установить значение. Но если он приватный, прокси вынесет ошибку, например:

Я показал несколько полезных примеров, которые вы можете рассмотреть, используя Proxy Pattern. И ниже приведена еще одна подходящая ситуация, которую вы также можете использовать Proxy Pattern:

Проверьте какое -то значение, когда вы устанавливаете свойства.

Если у вас есть идея или вы внедряете Proxy Pattern в какой -то ситуации, пожалуйста, прокомментируйте ниже, что мы можем больше обсудить, я очень спасибо!

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

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

Спасибо за вас, ребята, прочитайте, любые комментарии и отзывы очень приветствуются!

фото Остин Дисфель на Неспособный

Оригинал: “https://dev.to/ms314006/what-is-the-proxy-pattern-and-how-to-implement-it-by-javascript-mhd”

Основное использование

Внедрить частные свойства в объекте

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