Форум

Методологія

Інструментарій

Платформа

Спільнота

Особливості реалізації JavaScript за БЕМ-методології

Декларативний стиль

Декларативність JavaScript у БЕМ-проекті проявляється в наступному:

  • Поведінка кожного блоку описується незалежно.
  • Стану блоку задаються декларативно. При зміну станів автоматично викликається код, який задекларований для цього стану.
  • Логіка роботи блоку описується як набір дій і умов, при яких ці дії необхідно виконувати. Це дозволяє розділяти функціональність блоку на окремі частини і використовувати рівні перевизначення.

Докладніше про застосування рівнів переопределния в JavaScript

Принципи ООП в JavaScript по БЕМ

У БЕМ-методології до JavaScript застосовуються основні принципи об'єктно-орієнтованого програмування (ООП).

Інкапсуляція

У БЕМ JavaScript-реалізація одного блоку відокремлена від іншого. Кожен блок надає API для взаємодії з іншими блоками.

Декларація блоку дозволяє приховати його внутрішню реалізацію. Так як елементи завжди є внутрішньою реалізацією блоку, звернення до них можливо тільки через API самого блоку.

Спадкування

Декларативне опис поведінки блоків дозволяє використовувати методи базового блоку всередині похідного, наслідувати їх. Новий блок може отримувати всі властивості і методи базового.

Також можна створювати ланцюжки спадкування — блок успадковується від іншого, який, у свою чергу, успадковується від третього і т. д.

Приклади реалізації доступні в документації до i-bem.js.

Подання динамічних блоків в DOM

Блокам з JavaScript-реалізацією можуть відповідати вузли в HTML. У цьому випадку йдеться про те, що блоки мають DOM-подання.

У найпростішому випадку блок відповідає DOM-вузла один до одного. Однак DOM-вузол і блок — це не завжди одне і те ж. Можна розмістити кілька блоків на одному DOM-сайті (це називається мікс), а також реалізувати один блок на декількох DOM-вузлах.

Існують блоки без DOM-подання. В JavaScript вони представлені у вигляді об'єктів, що мають свої методи.

Приклади реалізації доступні в документації до i-bem.js.

Взаємодія блоків

БЕМ-методологія передбачає роботу з незалежними блоками. Однак на практиці повна незалежність блоків недосяжна.

Блоки можуть взаємодіяти один з одним за допомогою:

  • Підписки на події інших примірників блоків.
  • Підписки на зміни модифікаторів.
  • Безпосереднього виклику методів інших примірників блоків або статичних методів класу іншого блоку.
  • Будь патернів взаємодії. Наприклад, каналу подій: всі комунікації відбуваються завдяки повідомленнями, які компоненти публікують і слухають з допомогою посередника.

Приклади реалізації доступні в документації до i-bem.js.

БЕМ-методологія рекомендує вибудовувати взаємодію між блоками в ієрархічному порядку відповідно до їх розташуванням в DOM-дереві. Вкладений блок не повинен нічого знати про батьківському блоці, так як це порушує принцип незалежності компонентів.

Взаємодія блоку з його елементами

Елемент — це внутрішня реалізація блоку. У БЕМ-методології прийнято реалізовувати додаткові хелпери блоку для роботи з його елементами. Звернення безпосередньо до елементу іншого блоку неможливо. Взаємодія з елементом відбувається тільки через API блоку, якому належить даний елемент.

Якщо ви помітили помилку, або хочете доповнити статтю, ви завжди можете або написати нам про це на Гітхабі, або поправити статтю з допомогою prose.io.