MVC с Bliss.js

Bliss.js — это легковесная библиотека для работы с DOM, ориентированная на простоту и производительность. Одной из ключевых возможностей её использования является реализация паттерна MVC (Model–View–Controller), который обеспечивает чёткое разделение данных, представления и логики управления.

Модель (Model)

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

const model = {
    data: {
        users: []
    },
    onChange: function(callback) {
        this._callback = callback;
    },
    setData: function(key, value) {
        this.data[key] = value;
        if (this._callback) this._callback(key, value);
    },
    getData: function(key) {
        return this.data[key];
    }
};

Особенности:

  • Метод onChange позволяет подписаться на изменения модели.
  • setData автоматически уведомляет контроллер или представление о модификации данных.
  • Хранение данных централизовано, что упрощает управление состоянием приложения.

Представление (View)

View отвечает за отображение данных модели в DOM. Bliss.js предоставляет удобные методы для манипуляции элементами страницы, например $.create, $.bind, $.find.

const view = {
    init: function(rootSelector) {
        this.root = $(rootSelector);
        this.userList = this.root.find('.user-list');
    },
    renderUsers: function(users) {
        this.userList.empty();
        users.forEach(user => {
            const li = $.create('li', { textContent: user.name });
            this.userList.append(li);
        });
    }
};

Ключевые моменты:

  • Использование $.create для динамического создания элементов.
  • Метод empty очищает контейнер перед повторным рендерингом.
  • View не содержит логики обработки данных — только визуализацию.

Контроллер (Controller)

Контроллер связывает модель и представление, управляет событиями и изменяет состояние модели в ответ на действия пользователя.

const controller = {
    init: function(model, view) {
        this.model = model;
        this.view = view;

        this.model.onChange((key, value) => {
            if (key === 'users') this.view.renderUsers(value);
        });

        this.view.root.on('click', '.add-user', (e) => {
            const name = this.view.root.find('.user-name').val();
            if(name) {
                const users = this.model.getData('users');
                users.push({ name });
                this.model.setData('users', users);
            }
        });
    }
};

Принципы работы:

  • Контроллер подписан на события модели, чтобы обновлять представление.
  • Обработка пользовательских действий происходит через события DOM (.on).
  • Контроллер сохраняет единую точку логики, не позволяя модели или view напрямую изменять друг друга.

Динамическое связывание модели и view

Bliss.js позволяет минимизировать ручное обновление DOM с помощью методов, таких как $.bind, которые автоматически синхронизируют данные модели с элементами страницы.

const model = { count: 0 };

$.bind('.counter', 'textContent', model, 'count');

$('.increment').on('click', () => {
    model.count += 1;
});

Преимущества:

  • Автоматическая синхронизация DOM с моделью.
  • Уменьшение дублирования кода.
  • Возможность легко расширять приложение без изменения структуры view.

Организация MVC в больших приложениях

Для крупных приложений рекомендуется:

  1. Разделять модели по функциональности (UserModel, ProductModel и т.д.).
  2. Разделять view по компонентам интерфейса (UserListView, ProductGridView).
  3. Контроллеры управляют только определённой частью приложения, избегая глобального состояния.
  4. Использовать события Bliss.js ($.trigger, $.on) для коммуникации между компонентами, чтобы снизить связность.

Работа с шаблонами

Bliss.js позволяет динамически вставлять HTML-шаблоны без сторонних библиотек:

function renderTemplate(template, data) {
    return template.replace(/\{\{(\w+)\}\}/g, (_, key) => data[key] || '');
}

const template = '<li>{{name}}</li>';
const users = [{ name: 'Alice' }, { name: 'Bob' }];

users.forEach(user => {
    view.userList.append($.create('li', { innerHTML: renderTemplate(template, user) }));
});

Преимущества шаблонного подхода:

  • Легко управлять разметкой без сложных фреймворков.
  • Повторное использование HTML-шаблонов.
  • Разделение логики рендеринга и структуры HTML.

Интеграция с AJAX и REST API

Модель может получать данные из внешних источников, используя стандартный fetch:

fetch('/api/users')
    .then(response => response.json())
    .then(data => model.setData('users', data));
  • После установки данных через setData автоматически обновляется view.
  • Можно добавлять обработку ошибок и состояние загрузки прямо в модель, что сохраняет чистоту контроллера.

Итоговые рекомендации

  • Модель содержит только данные и методы для управления ими.
  • View занимается исключительно отображением и рендерингом элементов.
  • Контроллер связывает модель и view, обрабатывает пользовательские действия.
  • Bliss.js упрощает работу с DOM и позволяет реализовать MVC без громоздких фреймворков, сохраняя структуру кода чистой и масштабируемой.
Оглавление