Пишем свой реактивный движок на JavaScript

Зачем нужен реактивный подход?

Современные веб-приложения требуют динамического обновления интерфейса при изменении данных. Реактивные библиотеки и фреймворки позволяют разработчикам абстрагироваться от ручного управления DOM и сосредоточиться на логике приложения.

Что такое реактивность?

Реактивное программирование позволяет описывать зависимости между данными так, чтобы изменения одного элемента автоматически приводили к изменениям других связанных элементов. Например, если у вас есть компонент, который отображает список товаров, то при добавлении нового товара этот компонент должен автоматически обновить своё представление.

Пишем простейший реактивный движок

Давайте реализуем простой реактивный движок на чистом JavaScript:

class Reactive {
    constructor() {
        this.data = {};
        this.dependencies = new Map();
    }

    set(key, value) {
        if (!this.dependencies.has(key)) {
            this.dependencies.set(key, []);
        }
        const deps = this.dependencies.get(key);
        for (const dep of deps) {
            dep(value);
        }
        this.data[key] = value;
    }

    get(key) {
        return this.data[key];
    }
}

Этот код создаёт класс Reactive, который хранит данные и зависимости. При вызове метода set он вызывает все зарегистрированные функции, связанные с изменяемым ключом.

Заключение

Создание собственного реактивного движка помогает лучше понять внутренние механизмы популярных библиотек и фреймворков. Это не только улучшает навыки программирования, но и даёт возможность создавать более эффективные и оптимизированные решения.