Сейчас я как делаю, пишу специальную функцию редактор, через который и работаю везде с целевыми объектами. Грубо говоря, если мне надо что-то изменить в объекте, я это делаю не напрямую, а вызываю функцию редактор. Однако, я тут подумал, а может быть существуют какие-то иные способы реагировать на изменение объекта?
В идеале бы хотелось тупо повесить некий обработчик и уже в дальнейшем работать с объектом напрямую.
P. S. Смутное ощущение, что я этот вопрос уже задавал, не пинайте меня сильно если что)
Сергей Соколов, да, есть такая штука, но я от него отказался, так как заморочено и намного проще и удобнее использовать функции редакторы. Может быть есть еще какие-нибудь интересные способы? Через прототипы там, например? Взять и прописать объекту свои собственные методы, которые после использования уже вызывают потом нужный обработчик.
class Watched {
constructor() {
this.props = {};
}
set width(value) {
this.props.width = value;
this.log("width", value); // <-- ради этого всё затевалось
}
get width() {
return this.props.width;
}
log(name, value) {
console.log(`Property ${name} was set to ${value}`);
}
}
const a = new Watched();
a.width = 100; // в консоль выведет сообщение
Надим Закиров, ох извините, действительно не то скинул. Имел ввиду Object.Observe, но пишут что он давно уже deprecated и рекомендуют использовать proxy (правда Object.Observe, опять выдвинули как кандидат на реализацию)
Вы можете использовать систему реактивности из фреймворка Vue. Вам не нужен весь фреймворк. Достаточно только @vue/reactivity (работает на Proxy)
Пример:
import { computed, effect, reactive } from "@vue/reactivity";
const obj = reactive({ foo: 1 }); // Реактивная переменная
const doubleFoo = computed(() => obj.foo * 2); // Вычисляемое свойство (Реактивная переменная которая автоматически пересчитывается когда изменяется какая-либо из использованных внутри реактивных переменных)
effect(() => console.log("doubleFoo value changed to:" + doubleFoo.value)); // Функция, запускается когда изменяется какая-либо из использованных внутри реактивных переменных)
// Каждую секунду изменяет значение obj.foo
// После чего автоматически пересчитывается значение doubleFoo
// После изменения doubleFoo вызывается функция переданная в effect и выводится сообщение в лог
setInterval(() => obj.foo++, 1000)
