progway — программирование, IT

Как реагировать на изменения объекта

В JavaScript обычные объекты не умеют уведомлять о своих изменениях, однако эту задачу можно решить с помощью Proxy

Proxy — это специальный встроенный в язык объект-обёртка, который позволяет изменить поведение других объектов, перехватывая действия над ними

new Proxy(target, handlers) создаёт прокси для объекта target, где handler содержит ловушки для перехвата операций

Ловушек много — get, set, deleteProperty, has... (подробнее на MDN) — каждая из ловушек переопределяет реакцию объекта на взаимодействие с ним

Например, можно переопределить поведение объекта при обращении к какому-нибудь из его свойств:

const user = { name: "Денис", age: 23 };

const proxyUser = new Proxy(user, {
  get(target, key) {
    return key in target ? target[key] : "Не найдено";
  }
});

proxyUser.name // "Денис"
proxyUser.city // "Не найдено"

Но это лишь частный случай, можно сделать более утилитарный пример:

const reactive = (obj, callback) => {
  return new Proxy(obj, {
    set(target, key, value) {
      target[key] = value; // обновляем значение
      callback(key, value); // вызываем реакцию
      return true;
    }
  });
};

// Используем:
const state = reactive({ count: 0 }, (key, value) => {
  console.log(`Свойство "${key}" изменилось:`, value);
});

state.count = 1; // Лог: "Свойство 'count' изменилось: 1"
state.count = 5; // Лог: "Свойство 'count' изменилось: 5"

Прикрутить сюда типы и рекурсивный вызов функции reactive на каждый вложенный объект и у вас почти получится свой vue.js 🗿

Сам Proxy — это крайне нишевый инструмент, особенно в экосистеме реакта, где его встретить крайне сложно. Обычно можно обойтись более простыми вещами, но знать про прокси тоже нужно, может и пригодится. По крайней мере, у меня такой кейс на практике всё же был

В первую очередь прокси удобен конечно же для создания реактивных систем, но также его можно применять, например, для валидации свойств и логирования

Удобно, что Proxy крайне прост и к нему можно прикрутить что угодно. Например, к прокси можно прилепить zod для валидации, как это сделано в zoxy. Тут вы ограничены лишь своей фантазией

Если кратко:

— Proxy — обёртка, которая позволяет переопределить реакцию на операцию для объекта
— Переопределение поведения происходит при помощи "ловушек"

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #useful #javascript #code #web #patterns

Please open Telegram to view this post

VIEW IN TELEGRAM

❤28🔥15👍7🐳3🤓1

www.tgoop.com/prog_way_blog/357

1.65K viewsMar 19 at 08:27

Как реагировать на изменения объекта

В JavaScript обычные объекты не умеют уведомлять о своих изменениях, однако эту задачу можно решить с помощью Proxy

Proxy — это специальный встроенный в язык объект-обёртка, который позволяет изменить поведение других объектов, перехватывая действия над ними

new Proxy(target, handlers) создаёт прокси для объекта target, где handler содержит ловушки для перехвата операций

Ловушек много — get, set, deleteProperty, has... (подробнее на MDN) — каждая из ловушек переопределяет реакцию объекта на взаимодействие с ним

Например, можно переопределить поведение объекта при обращении к какому-нибудь из его свойств:

const user = { name: "Денис", age: 23 };

const proxyUser = new Proxy(user, {
  get(target, key) {
    return key in target ? target[key] : "Не найдено";
  }
});

proxyUser.name // "Денис"
proxyUser.city // "Не найдено"

const reactive = (obj, callback) => {
  return new Proxy(obj, {
    set(target, key, value) {
      target[key] = value; // обновляем значение
      callback(key, value); // вызываем реакцию
      return true;
    }
  });
};

// Используем:
const state = reactive({ count: 0 }, (key, value) => {
  console.log(`Свойство "${key}" изменилось:`, value);
});

state.count = 1; // Лог: "Свойство 'count' изменилось: 1"
state.count = 5; // Лог: "Свойство 'count' изменилось: 5"

Прикрутить сюда типы и рекурсивный вызов функции reactive на каждый вложенный объект и у вас почти получится свой vue.js 🗿

Если кратко:

— Proxy — обёртка, которая позволяет переопределить реакцию на операцию для объекта
— Переопределение поведения происходит при помощи "ловушек"