7 июля 2015 года мы провели третий вебинар по БЭМ, где научились писать JavaScript с использованием jQuery для наших блоков в соответствии с принципами методологии БЭМ.
В ходе вебинара мы расширили функциональность страницы нашего проекта (о том, что это за проект, можно узнать из видео 1 и видео 2), добавили валидацию для полей формы и обратный отсчёт до начала и конца акции, и продолжили собирать и оптимизировать его с помощью Gulp.
Видео вебинара
Презентация вебинара
Ответы на вопросы
Вопрос: Используются ли какие-то модули для JS? CommonJS/Require/ES6 modules?
Ответ: В рамках данного вебинара — нет, но в следующих выпусках мы обязательно расскажем про использование модульной системы.
Вопрос: Как с помощью jQuery можно добавить и убрать модификатор для элемента?
Ответ: Самый простой способ — toggleClass. Существуют библиотеки, добавляющие БЭМ-ориентированную функциональность. Например, jquery-bem. Разумеется, есть i-bem.js, про который мы расскажем на следующих вебинарах.
Вопрос: Почему у инпутов нет атрибута name? Его можно использовать вместо отдельного модификатора $('[name=email]').
Ответ: Идея в том, чтобы работать с любыми блоками консистентно. Если нужно как-то отличать похожие блоки, модификаторы будут работать универсально.
Вопрос: Как собрать все изображения в папку public/images, если блок на текущей странице не используется?
Ответ: Есть несколько вариантов:
- Переписать сборку так, чтобы собиралось все, что есть на файловой системе.
- Использовать в качестве списка необходимых для сборки сущностей не разметку, а отдельный JSON-файл.
- Использовать специальный файл для каждого блока, описывающий необходимые ему зависимости.
Мы на проектах используем комбинацию 2 и 3. Подробнее см. https://ru.bem.info/technology/deps/
Вопрос: Под компонентом имеется в виду сборка из одного или нескольких блоков?
Ответ: Компонент — это некая полезная штука на странице. Например, поле ввода или шапка. Компоненты могут состоять из нескольких вложенных компонентов поменьше. Сборка же — это процесс объединения кода всех используемых компонентов в один файл для отправки в браузер.
Вопрос: Как правильно собрать несколько страниц (сразу и простую, и pink)?
Ответ: Можно переписать конфиг, чтобы он содержал массив с нужными наборами параметров, и обходить его.
Вопрос: Блоки независимые, но что, если нужны зависимости между блоками? Например, при сабмите формы нужно обнулять блок countDown.
Ответ: Можно использовать паттерн «посредник» в упрощенном виде — добавить вышестоящему блоку, например, headline,
прослушивание событий формы и дергание методов таймера. Примиксовав соответствующие элементы headline__form, headline__countdown
к блокам. Подробнее можно прочесть на нашем форуме.
Вопрос: Как использовать готовые плагины для jQuery, физически куда их правильнее складывать?
Ответ: Можно использовать bower для этих целей, потом вставлять код плагинов при сборке в app.js.
Вопрос: Как уменьшить связанность кода, если на одной странице реализуется большой компонент с огромным количеством внутренных кнопок/переключателей.
Ответ: Можно воспользоваться MV*-подходом.
Вопрос: Будет ли правильно по технологии БЭМ создать js файлы для view, для model?
Ответ: Да, вполне. В качестве примера можно посмотреть библиотеку bem-mvc.
Вопрос: Как реализовать методологию БЭМ средствами PHP? Есть ли какие-то инструменты для этого?
Ответ: Сообщество уже позаботилось об этом. Реализацию можно посмотреть здесь.
Вопрос: Почему в библиотеке bem-components нет блоков-элеметов форм: form, label ... ?
Ответ: Они есть в bem-forms.
Вопрос: Есть ли возможность использовать angularjs c БЭМ-методологией? И как лучше это сделать? Есть ли примеры проектов использующих такую связку?
Ответ: Да, смотрите репозиторий ng-bem-components. Кроме того, есть доклад от Антона Виноградова из Альфа-Банка.
Вопрос: Почему вы не используете angularjs? И что думаете о нем?
Ответ: Он появился сильно позже, чем наш JS-фреймворк. Как и любой инструмент, он хорош для определенного ряда задач.
Вопрос: Насколько целесообразно переписывать существующий сайт по методологии БЭМ?
Ответ: Зависит от того, какие у вас на него планы. Если планируется его дальше активно развивать, то, скорее всего, смысл есть.
Надеемся, что видео и ответы на вопросы помогают вам в ходе обучения.
До встречи на следующих «БЭМинарах» и Stay BEMed!