Модульная архитектура

Bliss.js — это библиотека, ориентированная на упрощение работы с DOM и асинхронными процессами в JavaScript, сохраняя лёгкость и гибкость кода. Центральным элементом её дизайна является модульная архитектура, позволяющая разделять функциональность на изолированные, легко управляемые части.

Принцип модульности

Модульная архитектура Bliss.js строится на следующих принципах:

  • Инкапсуляция функций: каждый модуль содержит только свою ответственность, не влияя напрямую на другие части приложения.
  • Минимальные зависимости: модули взаимодействуют через чётко определённые интерфейсы, что снижает связность.
  • Повторное использование кода: один модуль может использоваться в разных частях приложения без модификаций.
  • Лёгкость тестирования: изолированные модули проще покрыть unit-тестами.

Bliss.js реализует модульность через объектную структуру, где каждый модуль может быть расширяемым объектом с методами и свойствами.

Создание модуля

Для создания модуля используется объектная конструкция:

const modal = Bliss.createModule({
    name: 'modal',
    init: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        this.el.querySelector('.close').addEventListener('click', () => this.close());
    },
    open: function() {
        this.el.style.display = 'block';
    },
    close: function() {
        this.el.style.display = 'none';
    },
    el: document.querySelector('#modal')
});

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

  • name — уникальный идентификатор модуля.
  • init — функция инициализации, вызываемая при создании.
  • Методы модуля инкапсулируют всю логику работы с элементами DOM.
  • el — ссылка на корневой DOM-элемент модуля, с которым модуль работает напрямую.

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

Организация зависимостей между модулями

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

const tooltip = Bliss.createModule({
    name: 'tooltip',
    dependencies: ['modal'],
    init: function() {
        this.setupTooltips();
    },
    setupTooltips: function() {
        document.querySelectorAll('[data-tooltip]').forEach(el => {
            el.addEventListener('mouseenter', () => this.show(el));
            el.addEventListener('mouseleave', () => this.hide(el));
        });
    },
    show: function(el) {
        const modal = Bliss.getModule('modal');
        modal.open();
    },
    hide: function(el) {
        const modal = Bliss.getModule('modal');
        modal.close();
    }
});

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

  • dependencies гарантирует, что нужный модуль (modal) будет загружен и инициализирован перед использованием.
  • Bliss.getModule('имя') позволяет получить доступ к методам других модулей без прямого обращения к глобальным переменным.

Расширение модулей

Bliss.js поддерживает наследование и расширение модулей, что позволяет создавать специализированные версии базового модуля без дублирования кода:

const advancedModal = Bliss.extendModule('modal', {
    open: function() {
        console.log('Advanced modal opening...');
        this.el.style.opacity = 0;
        this.el.style.display = 'block';
        setTimeout(() => this.el.style.opacity = 1, 50);
    }
});
  • Bliss.extendModule('baseModule', { ... }) создаёт новый модуль на основе существующего.
  • Методы базового модуля могут быть переопределены, сохраняя доступ к оригинальной реализации при необходимости через super.

Подключение модулей к приложению

Bliss.js позволяет подключать модули к основному приложению централизованно:

Bliss.registerModules([modal, tooltip, advancedModal]);

Bliss.initModules();
  • registerModules принимает массив модулей и регистрирует их в системе.
  • initModules инициализирует все зарегистрированные модули, учитывая зависимости и порядок инициализации.

Работа с событиями в модульной архитектуре

Bliss.js поощряет локальное управление событиями:

  • Каждый модуль сам подписывается на события DOM.
  • Межмодульное взаимодействие осуществляется через метод trigger и обработчики:
modal.trigger('opened');
tooltip.on('modalOpened', () => console.log('Tooltip aware of modal opening'));
  • trigger активирует событие в контексте модуля.
  • on подписывает метод на событие другого модуля, что сохраняет низкую связность.

Динамическая загрузка модулей

Bliss.js поддерживает отложенную и динамическую загрузку модулей, что позволяет оптимизировать производительность:

Bliss.loadModule('carousel').then(carousel => {
    carousel.init();
});
  • Метод loadModule возвращает Promise, который разрешается после полной загрузки модуля.
  • Подходит для больших приложений с ленивой загрузкой функциональных блоков.

Принципы проектирования модулей

  1. Single Responsibility — каждый модуль отвечает за одну задачу.
  2. Loose Coupling — модули минимально зависят друг от друга.
  3. High Cohesion — функции модуля логически связаны.
  4. Reusability — модуль легко использовать повторно в разных контекстах.
  5. Testability — простая изоляция позволяет писать unit-тесты без мокирования глобальных объектов.

Эти принципы делают код более поддерживаемым, упрощают масштабирование приложений и сокращают количество ошибок при расширении функционала.

Bliss.js как инструмент для модульной архитектуры сочетает простоту API с гибкостью построения сложных приложений. Структурированное разделение кода на модули, управление зависимостями и поддержка расширения позволяют создавать масштабируемые и легко сопровождаемые проекты.

Оглавление