EN RU
Форум

Методология

Технологии

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

Библиотеки

Учебные материалы

Общие сведения

БЭМ-методология и JavaScript

В БЭМ-методологии веб-интерфейс строится из независимых блоков у которых могут быть элементы. И блоки, и элементы могут иметь состояния или особенности, описываемые модификаторами.

Работа веб-интерфейса обеспечивается несколькими технологиями (HTML, CSS, JS и т.д.). Его реализация разбита на компоненты по блокам. Блок содержит набор файлов технологий, составляющих аспекты его реализации:

Фреймворк i-bem.js позволяет разложить клиентский JavaScript на компоненты в терминах БЭМ:

Сборка

Разработка в рамках БЭМ-методологии ведется модульно — каждый блок программируется отдельно. Финальный исходный код веб-страниц формируется из кода отдельных блоков с помощью процедур сборки.

В файловой системе блок удобно представлять в виде каталога, а реализацию блока в каждой из технологий — в виде отдельного файла:

    desktop.blocks/
        my-block/
            my-block.css
            my-block.js
            my-block.bemhtml
            ...

    desktop.blocks/
        other-block/
            other-block.css
            other-block.js
            other-block.bemhtml
            ...

Для каждой веб-страницы код использованных на ней блоков может быть собран в единые файлы:

    desktop.bundles/
        index/
            index.html
            index.css
            index.js
            ...

Существует два инструмента, поддерживающих БЭМ-предметную область, для сборки кода результирующих веб-страниц из отдельных описаний блоков:

Оба инструмента позволяют автоматизировать создание HTML-разметки для привязки JS-блоков и передачи параметров экземпляру блока.

Почему i-bem.js так называется

В соответствии с БЭМ-методологией, базовая JS-библиотека БЭМ-платформы изначально разрабатывалась как особый служебный блок. Такой подход позволяет работать с базовыми библиотеками так же, как и с обычными блоками. В частности, структурировать код в терминах элементов и модификаторов и гибко настраивать поведение библиотеки на разных уровнях переопределения.

Служебным блокам в БЭМ было принято давать имена с префиксом i-. Таким образом, имя i-bem.js читается как реализация блока i-bem в технологии JS.

Как использовать i-bem.js

Фреймворк i-bem.js входит в состав библиотеки bem-core.

Реализация i-bem.js состоит из двух модулей:

Зависимости:

Можно использовать i-bem.js как часть полного стека БЭМ-инструментов. В этом случае свой проект удобно создавать на основе шаблонного репозитория project-stub, в котором настроена автоматическая установка зависимых библиотек и сборка.

Если не планируется использование других технологий БЭМ-платформы, достаточно поместить код библиотеки bem-core в существующий проект.