Frontend | Вопросы собесов on Telegram: “🤔 Как отследить изменение поле объекта? Чтобы о…”

🤔 Как отследить изменение поле объекта?

Чтобы отслеживать изменения свойств объекта в JavaScript, можно использовать несколько методов, каждый из которых подходит для различных случаев.

🟠Использование Proxy
Proxy является мощным и гибким способом перехвата и настройки операций с объектами, включая чтение и запись свойств.

const handler = {
    get(target, property) {
        console.log(`Getting value of ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};
const person = {
    name: 'Alice',
    age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

🟠Использование Object.defineProperty
Object.defineProperty позволяет определить новое или изменить существующее свойство непосредственно на объекте, позволяя добавить геттеры и сеттеры для отслеживания изменений.

const person = {
    _name: 'Alice',
    _age: 25
};
Object.defineProperty(person, 'name', {
    get() {
        console.log('Getting name');
        return this._name;
    },
    set(value) {
        console.log(`Setting name to ${value}`);
        this._name = value;
    }
});
Object.defineProperty(person, 'age', {
    get() {
        console.log('Getting age');
        return this._age;
    },
    set(value) {
        console.log(`Setting age to ${value}`);
        this._age = value;
    }
});
person.name = 'Bob'; // Setting name to Bob
console.log(person.name); // Getting name // Bob
person.age = 30; // Setting age to 30
console.log(person.age); // Getting age // 30

🟠Использование библиотеки MobX
MobX — это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.

import { observable, autorun } from 'mobx';
const person = observable({
    name: 'Alice',
    age: 25,
    setName(name) {
        this.name = name;
    },
    setAge(age) {
        this.age = age;
    }
});
// Автоматически вызываемая функция при изменении наблюдаемого состояния
autorun(() => {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
});
person.setName('Bob'); // Name: Bob, Age: 25
person.setAge(30); // Name: Bob, Age: 30

🟠Наблюдатель на изменение (MutationObserver)
Для отслеживания изменений в DOM можно использовать MutationObserver. Это не напрямую связано с объектами, но полезно для отслеживания изменений в элементах DOM.

const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
targetNode.setAttribute('data-test', 'value');

Ставь 👍 и забирай 📚 Базу знаний