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

* [Декларативний стиль](#Декларативний стиль)
* [Принципи ООП в JavaScript по БЕМ](#Принципи ООП-в-javascript-БЕМ)
* [Подання динамічних блоків в DOM](#Подання-динамічних-блоків-в-dom)
* [Взаємодію блоків](#Взаємодія блоків)
* [Взаємодію блоку з його елементами](#Взаємодія-блоку з його елементами)

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

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

* Поведінка кожного блоку описується незалежно.
* Стану блоку задаються декларативно. При [зміну станів](#Реакція-на-зміна-модифікаторів) автоматично викликається код, який задекларований для цього стану.
* Логіка роботи блоку описується як набір дій і умов, при яких ці дії необхідно виконувати. Це дозволяє розділяти функціональність блоку на окремі частини і використовувати [рівні перевизначення](../key-concepts/key-concepts.ru.md#Рівень-перевизначення).

> [Докладніше про застосування рівнів переопределния в JavaScript](#Робота з рівнями-перевизначення)

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

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

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

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

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

### Спадкування

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

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

> Приклади реалізації доступні в документації до [i-bem.js](https://ru.bem.info/technology/i-bem/current/i-bem-js-decl/#Наследование-блока).

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

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

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

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

> Приклади реалізації доступні в документації до [i-bem.js](https://ru.bem.info/technology/i-bem/current/i-bem-js-decl/#Синтаксис-декларации).

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

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

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

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

> Приклади реалізації доступні в документації до [i-bem.js](https://ru.bem.info/technology/i-bem/current/i-bem-js-interaction/).

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

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

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