Отслеживаемые свойства

Frontend Interview - собеседования по Javascript / Html / Css

Отслеживаемые свойства, что такое, как использовать?

В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как Proxy.

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

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

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

Пример использования MobX

import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
    count: 0,
    increment() {
        this.count++;
    }
});
autorun(() => {
    console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (
    <div>
        <p>Count: {appState.count}</p>
        <button onClick={() => appState.increment()}>Increment</button>
    </div>
));
ReactDOM.render(<Counter />, document.getElementById('root'));

Плюсы отслеживаемых свойств
- Автоматическое обновление UI
Изменения данных автоматически отражаются в пользовательском интерфейсе.
- Централизованное управление состоянием
Легче управлять состоянием и следить за его изменениями.
- Повышенная производительность
При правильной настройке обновляются только те части интерфейса, которые зависят от измененных данных.

Примеры реального использования
Простой счетчик с использованием Proxy

const handler = {
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        document.getElementById(property).innerText = value;
        return true;
    }
};
const state = {
    count: 0
};
const proxyState = new Proxy(state, handler);

document.getElementById('increment').addEventListener('click', () => {
    proxyState.count++;
});

<div>
    <p id="count">0</p>
    <button id="increment">Increment</button>
</div>
<script src="path/to/your/script.js"></script>

👉 @frontendInterview

www.tgoop.com/frontendInterview/4680

1.2K viewsJun 9 at 09:02

tgoop.com/frontendInterview/4680

Create: 2025-06-09
Last Update: 2025-06-28 14:12:14

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

import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
    count: 0,
    increment() {
        this.count++;
    }
});
autorun(() => {
    console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (
    <div>
        <p>Count: {appState.count}</p>
        <button onClick={() => appState.increment()}>Increment</button>
    </div>
));
ReactDOM.render(<Counter />, document.getElementById('root'));

const handler = {
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        document.getElementById(property).innerText = value;
        return true;
    }
};
const state = {
    count: 0
};
const proxyState = new Proxy(state, handler);

document.getElementById('increment').addEventListener('click', () => {
    proxyState.count++;
});

<div>
    <p id="count">0</p>
    <button id="increment">Increment</button>
</div>
<script src="path/to/your/script.js"></script>

👉 @frontendInterview

BY Frontend Interview - собеседования по Javascript / Html / Css

Share with your friend now:
tgoop.com/frontendInterview/4680

Telegram News

Отслеживаемые свойства