0.0.9 • Published 3 years ago
@zasada/boilerplate v0.0.9
Zasada
Фабрика виджетов, для упрощения WEB разработки, с рендерингом HTML на сервере.
Определения
- Виджет - ecmascript class с методом run ( запускается при привязке виджета к DOM узлу ).
- Блок - DOM узел, к которому привязан виджет.
- Элемент - DOM узел потомок блока. Смысл определений блок и элемент из БЭМ методологии.
Разметка
<div class="_ _Widget"> // блок, к которому првязан виджет "Widget"
<span class="_Widget-Element1"></span> // элемент виджета Widget, с названием "Element1"
<span class="_Widget-Element2"></span> // элемент виджета Widget, с названием "Element2"
</div>
// "_" - специальный класс, чтобы в один запрос к DOM найти все узлы с виджетами
// виджет
class Widget {
run() {}
}
Особенности
- Больше подходит для рендеринга HTML на сервере.
- Легко переносить виджеты из проекта в проект, достаточно перенести esmodule класс, и добавить HTML class верстку.
- Минимум обращений к DOM, один запрос document.querySelectorAll( '' ) для всех виджетов_ на странице.
- Кеширование элементов внутри контекста виджета, к DOM обращение только один раз.
- Легкое обращение из одного виджета к другому через специальный интерфейс ._rel или через события.
- Возможность вложенности виджетов, например когда элемент одного виджета является блоком другого
<div class="_ _Widget1 _Widget2">
<span class="_ _Widget3 _Widget1-Element _Widget2-Element">
<span class="_Widget1-Element _Widget3-Element"></span>
</span>
</div>
- Dependency injection реализация, позволяющая гибко изменить - расширить функционал.
- Легкая возможность подгрузки по требованию кода виджетов с сервера ( Lazy ).
- Подгрузка с сервера необходимых для работы полифилов при необходимости.
- Расширяемая система логирования ошибок
- Простая возможность передавать с сервера необходимые дополнительные действия на странице. Например после ajax запроса, просто добавляя дополнительные css классы в HTML ответ. Например, закрыть popup.
- Средний размер 38 kb ( 10 kb gz )
Примеры
Boilerplate app ( простой шаблон приложения )
npm install -g degit
npx degit kraut-dps/zasada/packages/boilerplate#@zasada/boilerplate@0.0.4
npm i
npm run dev
API Reference
Пока отдельного описания нет, но есть в примерах - нужно в окне browser кликнуть по WidgetApi или LinkerApi.
Концепция
- По аналогии с DOM, CSSOM еще одна Object Model, где узлами являются DOM элементы с привязанным js функционалом.
- На определяющие привязку виджетов class значения не добавляются css свойства, для отделния функционала, и отображения.
- Один виджет не обращается к элментам другого виджета. В другом виджете раеализованы публичные методы для реализации необходимого.
Дополнительная декларативность через HTML. Например, виджет слайдер картинок, кнопки предыдущая-следующая. Вместо того, чтобы через js создавать новые узлы DOM, в зависимости от параметров, виджет при наличии в HTML элементов кнопок отслеживает клики по ним, а при отсутствии ничего не делает.