Форум

Методология

Инструментарий

Платформа

Сообщество

i-bem.js: JavaScript-фреймворк для БЭМ

i-bem.js — специализированный JavaScript-фреймворк для веб-разработки в рамках БЭМ-методологии.

i-bem.js позволяет:

  • разрабатывать веб-интерфейс в терминах блоков, элементов, модификаторов;
  • описывать логику работы блока в декларативном стиле — как набор состояний;
  • легко интегрировать JavaScript-код с BEMHTML- или BH-шаблонами и CSS в стиле БЭМ;
  • гибко переопределять поведение библиотечных блоков.

i-bem.js не предназначен для замены фреймворка общего назначения, подобного jQuery.

Оглавление

  • Общие сведения о фреймворке: связь с предметной областью БЭМ, краткое описание модульной структуры фреймворка, шаблонного проекта и инструментов для сборки кода, написанного с использованием i-bem.js.
  • Привязка JS-блоков к HTML — разметка JS-блоков в HTML-коде страницы, варианты соотношения HTML-элементов и JS-блоков.
  • Декларация блока — синтаксис описания JS-блоков.
  • Передача параметров — передача параметров экземпляру блока, получение доступа к параметрам блока из экземпляра.
  • Работа с DOM-деревом — API для работы с DOM-узлами блоков: элементы, динамическое изменение DOM-дерева (AJAX), поиск DOM-узлов.
  • Состояния блока — модификаторы, триггеры на смену состояний (установку модификаторов).
  • События — событийная модель i-bem.js: DOM- и БЭМ-события, делегирование событий.
  • Инициализация — инициализация и удаление экземпляров блоков, отложенная и автоматическая инициализация.
  • Взаимодействие блоков — обращение из блока к другим блокам, классам блоков.
  • Контекст — собственные и статические свойства блока. Статические свойства BEMDOM.
  • Что дальше? — ссылки на документацию и дополнительные материалы.
Если вы заметили ошибку или хотите чем-то дополнить статью, вы всегда можете или написать нам об этом на Гитхабе, или поправить статью с помощью prose.io.