From d637f4915cf8313ef378abea00e2e27c3108d7ac Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 11:44:15 +0300 Subject: [PATCH 01/36] (i-bem.js): new document --- common.docs/i-bem-js/i-bem-js.ru.md | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index df603ef4..5e42fe84 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -1,15 +1,20 @@ -# i-bem.js: руководство пользователя +# i-bem.js -## i-bem.js: JavaScript-фреймворк для БЭМ +* [Введение](#Введение) +* [i-bem.js и jQuery](#Введение) -`i-bem.js` — специализированный JavaScript-фреймворк для веб-разработки в рамках [БЭМ-методологии](https://ru.bem.info/methodology/). +## Введение -`i-bem.js` позволяет: +`i-bem.js` — JavaScript-фреймворк для создания пользовательских интерфейсов. Он был создан в [Яндексе](https://www.yandex.ru) с целью решить ряд проблем, связанных с крупномасштабными сайтами. -* разрабатывать веб-интерфейс в терминах блоков, элементов, модификаторов; -* описывать логику работы блока в декларативном стиле — как набор состояний; -* легко интегрировать JavaScript-код с BEMHTML- или BH-шаблонами и CSS в стиле БЭМ; -* гибко переопределять поведение библиотечных блоков. +Позволяет: + +* разрабатывать интерфейс в компонентном стиле; +* описывать логику работы блоков в декларативном стиле; +* легко интегрировать JavaScript-код с BEMHTML- или BH-шаблонами и CSS в DOM; +* гибко переопределять поведение блоков. + +## i-bem.js и jQuery `i-bem.js` не предназначен для замены фреймворка общего назначения, подобного jQuery. From b3c4f158a2fca6f5fad8bfa37b71d8e307eefbd3 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 12:18:43 +0300 Subject: [PATCH 02/36] WIP --- common.docs/i-bem-js/i-bem-js.ru.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index 5e42fe84..ba81d907 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -1,7 +1,8 @@ # i-bem.js * [Введение](#Введение) -* [i-bem.js и jQuery](#Введение) +* [i-bem.js и jQuery](#i-bemjs-и-jquery) +* [Структура документа](#Структура-документа) ## Введение @@ -9,16 +10,16 @@ Позволяет: -* разрабатывать интерфейс в компонентном стиле; +* разрабатывать интерфейс независимыми блоками; * описывать логику работы блоков в декларативном стиле; -* легко интегрировать JavaScript-код с BEMHTML- или BH-шаблонами и CSS в DOM; +* легко интегрировать JavaScript-код с BEMHTML- или BH-шаблонами и CSS в DOM (объектную модель документа); * гибко переопределять поведение блоков. ## i-bem.js и jQuery `i-bem.js` не предназначен для замены фреймворка общего назначения, подобного jQuery. -**Краткий обзор содержания документа**: +## Структура документа * [Общие сведения](./i-bem-js-common.ru.md) о фреймворке: связь с предметной областью БЭМ, краткое описание модульной структуры фреймворка, шаблонного проекта и инструментов для сборки кода, написанного с использованием `i-bem.js`. * [Привязка JS-экземпляров к HTML](./i-bem-js-html-binding.ru.md) — разметка JS-блоков в HTML-коде страницы, варианты соотношения HTML-элементов и JS-экземпляров. From be39a5eec02443f403c21a1d70e7dea43ac92ec5 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 12:58:52 +0300 Subject: [PATCH 03/36] WIP --- common.docs/i-bem-js/i-bem-js.ru.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index ba81d907..8ee833d6 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -3,6 +3,7 @@ * [Введение](#Введение) * [i-bem.js и jQuery](#i-bemjs-и-jquery) * [Структура документа](#Структура-документа) +* [См. также](#См-также) ## Введение @@ -33,3 +34,7 @@ * [Взаимодействие блоков](./i-bem-js-interact.ru.md) — обращение из экземпляра блока или элемента к другим экземплярам и классам. * [Контекст](./i-bem-js-context.ru.md) — собственные и статические свойства блока и элемента. Статические свойства `i-bem-dom`. * [Что дальше?](./i-bem-js-extras.ru.md) — ссылки на документацию и дополнительные материалы. + +## См. также + +[Справочник i-bem.js]() From c7555926dd0fa32b7482a58f96f962550c22eb5d Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 13:53:18 +0300 Subject: [PATCH 04/36] WIP --- common.docs/i-bem-js/i-bem-js.ru.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index 8ee833d6..c183a7ea 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -1,7 +1,6 @@ # i-bem.js * [Введение](#Введение) -* [i-bem.js и jQuery](#i-bemjs-и-jquery) * [Структура документа](#Структура-документа) * [См. также](#См-также) @@ -16,9 +15,7 @@ * легко интегрировать JavaScript-код с BEMHTML- или BH-шаблонами и CSS в DOM (объектную модель документа); * гибко переопределять поведение блоков. -## i-bem.js и jQuery - -`i-bem.js` не предназначен для замены фреймворка общего назначения, подобного jQuery. +> **Примечание.** `i-bem.js` не предназначен для замены фреймворка общего назначения, подобного jQuery. ## Структура документа From 78fd7438bf9780054e60cbfe0b8af0adbae25d56 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 14:09:02 +0300 Subject: [PATCH 05/36] WIP --- common.docs/i-bem-js/i-bem-js-extras.en.md | 14 -------------- common.docs/i-bem-js/i-bem-js-extras.ru.md | 14 -------------- common.docs/i-bem-js/i-bem-js.ru.md | 3 ++- 3 files changed, 2 insertions(+), 29 deletions(-) delete mode 100644 common.docs/i-bem-js/i-bem-js-extras.en.md delete mode 100644 common.docs/i-bem-js/i-bem-js-extras.ru.md diff --git a/common.docs/i-bem-js/i-bem-js-extras.en.md b/common.docs/i-bem-js/i-bem-js-extras.en.md deleted file mode 100644 index bd214c84..00000000 --- a/common.docs/i-bem-js/i-bem-js-extras.en.md +++ /dev/null @@ -1,14 +0,0 @@ -## What next? - -For information about the BEM methodology, tools, and news in the BEM world, visit the website [bem.info](https://en.bem.info/). - -For complete information about all the `i-bem.js` API methods, see the section [JSDoc](https://en.bem.info/libs/bem-core/current/desktop/i-bem/jsdoc/) for the `i-bem` block. - -To share your experience with BEM or submit questions for experienced users and `i-bem.js` developers, visit the [forum](https://en.bem.info/forum/). - -For `i-bem.js` usage examples and additional information, see these articles: - -* [JavaScript for BEM: main terms](https://en.bem.info/articles/bem-js-main-terms/) -* [i-bem.js tutorial](https://en.bem.info/tutorials/bem-js-tutorial/) -* [Starting your own BEM project](https://en.bem.info/tutorials/start-with-project-stub/) -* [Creating BEM application on Leaflet and 2GIS API](https://en.bem.info/articles/firm-card-story/) diff --git a/common.docs/i-bem-js/i-bem-js-extras.ru.md b/common.docs/i-bem-js/i-bem-js-extras.ru.md deleted file mode 100644 index a0eac176..00000000 --- a/common.docs/i-bem-js/i-bem-js-extras.ru.md +++ /dev/null @@ -1,14 +0,0 @@ -## Что дальше? - -Информацию о БЭМ-методологии, инструментарии и новостях в мире БЭМ смотрите на сайте [bem.info](https://ru.bem.info). - -Полную информацию обо всех методах API `i-bem.js` можно найти в разделе JSDoc [блока i-bem](https://ru.bem.info/platform/i-bem/) и [i-bem-dom](https://ru.bem.info/platform/i-bem/). - -Обменяться опытом и задать вопрос опытным пользователям и разработчикам `i-bem.js` можно на [форуме](https://ru.bem.info/forum/). - -Примеры использования `i-bem.js` и дополнительную информацию смотрите в статьях: - -* [JavaScript по БЭМ: основные понятия](https://ru.bem.info/articles/bem-js-main-terms/) -* [Справочное руководство по i-bem.js](https://ru.bem.info/platform/tutorials/i-bem/) -* [Создаем свой проект на БЭМ](https://ru.bem.info/platform/tutorials/start-with-project-stub/) -* [БЭМ-приложение на Leaflet и API 2GIS](https://ru.bem.info/articles/firm-card-story/) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index c183a7ea..ac897918 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -34,4 +34,5 @@ ## См. также -[Справочник i-bem.js]() +* [Справочное руководство по i-bem.js](https://ru.bem.info/platform/tutorials/i-bem/) +* [Создаем свой проект на БЭМ](https://ru.bem.info/platform/tutorials/start-with-project-stub/) From fedb96d2af63f2fb8bb39f7862fb79db387d3ed8 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 14:09:54 +0300 Subject: [PATCH 06/36] WIP --- common.docs/i-bem-js/i-bem-js.ru.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index ac897918..d239cef3 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -30,7 +30,7 @@ * [Инициализация](./i-bem-js-init.ru.md) — инициализация экземпляров блоков и элементов. * [Взаимодействие блоков](./i-bem-js-interact.ru.md) — обращение из экземпляра блока или элемента к другим экземплярам и классам. * [Контекст](./i-bem-js-context.ru.md) — собственные и статические свойства блока и элемента. Статические свойства `i-bem-dom`. -* [Что дальше?](./i-bem-js-extras.ru.md) — ссылки на документацию и дополнительные материалы. + ## См. также From 65fd78bb69910a4a2979b46d5e05ac6477009b1d Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 14:12:13 +0300 Subject: [PATCH 07/36] WIP --- common.docs/i-bem-js/i-bem-js.ru.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index d239cef3..d12858ff 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -35,4 +35,4 @@ ## См. также * [Справочное руководство по i-bem.js](https://ru.bem.info/platform/tutorials/i-bem/) -* [Создаем свой проект на БЭМ](https://ru.bem.info/platform/tutorials/start-with-project-stub/) +* [Учебные материалы](https://ru.bem.info/platform/tutorials/) From 25fb6a11bc728112d77255f027f8eaa6e5aa719f Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 15:11:44 +0300 Subject: [PATCH 08/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 62 ++-------------------- common.docs/i-bem-js/i-bem-js.ru.md | 8 ++- 2 files changed, 10 insertions(+), 60 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 9f2b8cc3..673c01ba 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -1,68 +1,12 @@ -## Общие сведения +## Знакомьтесь: i-bem.js -### БЭМ-методология и JavaScript -В БЭМ-методологии веб-интерфейс строится из независимых **блоков** у которых могут быть **элементы**. И блоки, и элементы могут иметь состояния или особенности, описываемые **модификаторами**. -Работа веб-интерфейса обеспечивается несколькими **технологиями** (HTML, CSS, JS и т.д.). Его реализация разбита на компоненты по блокам. Блок содержит набор **файлов технологий**, составляющих аспекты его реализации: -* `my-block.css` — внешний вид блока; -* `my-block.bemhtml` — шаблоны для генерации HTML-представления блока; -* `my-block.js` — **динамическое поведение** блока в браузере. -Фреймворк `i-bem.js` позволяет разложить клиентский JavaScript на компоненты в терминах БЭМ: +* [Модульная система i-bem.js](Модульная система i-bem.js) -* **Блок** — JS-компонент, описывающий логику работы однотипных элементов интерфейса. Например, все кнопки могут быть реализованы в виде блока `button`. В этом случае, `button.css` определяет внешний вид всех кнопок, а `button.js` — логику их работы. На каждой странице может размещаться более одного **экземпляра блока** (например, кнопки). Каждому экземпляру блока соответствует JS-объект, в памяти браузера, хранящий его состояние. JS-объект содержит ссылку на DOM-узел, к которому привязан данный экземпляр блока. -* **Элементы** — DOM-узлы, вложенные в DOM-узел блока, с атрибутом `class`, указывающим на их роль в БЭМ-предметной области (имя блока и элемента). Элементы блока доступны через [JS-API](./i-bem-js-states.ru.md#Управление-модификаторами) экземпляра блока. -* **Модификаторы** — предоставляют информацию о состоянии блока и его элементов. Состояние модификаторов записывается в атрибуте `class` на DOM-узлах блока и элементов. Управление модификаторами производится через [JS-API](./i-bem-js-states.ru.md#Управление-модификаторами) экземпляра блока. - -### Сборка - -Разработка в рамках БЭМ-методологии ведется модульно — каждый блок программируется отдельно. Финальный исходный код веб-страниц формируется из кода отдельных блоков с помощью процедур **сборки**. - -В файловой системе блок удобно представлять в виде каталога, а реализацию блока в каждой из технологий — в виде отдельного файла: - -```html - 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 - ... -``` - -Для каждой веб-страницы код использованных на ней блоков может быть собран в единые файлы: - -```html - desktop.bundles/ - index/ - index.html - index.css - index.js - ... -``` - -Существует два инструмента, поддерживающих БЭМ-предметную область, для сборки кода результирующих веб-страниц из отдельных описаний блоков: - -* [bem-tools](https://ru.bem.info/toolbox/bem-tools/) -* [ENB](https://ru.bem.info/toolbox/enb/) - -Оба инструмента позволяют автоматизировать создание HTML-разметки для [привязки JS-блоков](./i-bem-js-html-binding.ru.md#Привязка-js-блоков-к-html) и [передачи параметров экземпляру блока](./i-bem-js-params.ru.md#Передача-параметров-экземпляру-блока-и-элемента). - -### Почему i-bem.js так называется - -В соответствии с БЭМ-методологией, базовая JS-библиотека БЭМ-платформы изначально разрабатывалась как особый служебный блок. Такой подход позволяет работать с базовыми библиотеками так же, как и с обычными блоками. В частности, структурировать код в терминах элементов и модификаторов и гибко настраивать поведение библиотеки на разных уровнях переопределения. - -Служебным блокам в БЭМ было принято давать имена с префиксом `i-`. Таким образом, имя `i-bem.js` читается как *реализация блока `i-bem` в технологии `JS`*. - -### Как использовать i-bem.js +### Модульная система i-bem.js Фреймворк `i-bem.js` входит в состав библиотеки [bem-core](https://ru.bem.info/platform/libs/bem-core/). diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index d12858ff..c5a53740 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -19,7 +19,13 @@ ## Структура документа -* [Общие сведения](./i-bem-js-common.ru.md) о фреймворке: связь с предметной областью БЭМ, краткое описание модульной структуры фреймворка, шаблонного проекта и инструментов для сборки кода, написанного с использованием `i-bem.js`. +* [Знакомьтесь: i-bem.js](./i-bem-js-common.ru.md). + + +* ====== + + + * [Привязка JS-экземпляров к HTML](./i-bem-js-html-binding.ru.md) — разметка JS-блоков в HTML-коде страницы, варианты соотношения HTML-элементов и JS-экземпляров. * [Декларация](./i-bem-js-decl.ru.md) — синтаксис описания класса блока и элемента. * [Передача параметров](./i-bem-js-params.ru.md) — передача параметров экземпляру блока и элемента, получение доступа к параметрам из экземпляра. From 47072426cc17c46d129daf52d5deaea3bc9fb163 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 15:12:11 +0300 Subject: [PATCH 09/36] WIP --- common.docs/i-bem-js/i-bem-js.ru.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index c5a53740..8effe815 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -19,7 +19,7 @@ ## Структура документа -* [Знакомьтесь: i-bem.js](./i-bem-js-common.ru.md). +* [Знакомьтесь: i-bem.js](./i-bem-js-common.ru.md) * ====== From 0bd6944dff5a059b4949232005f64d561b8b6376 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 15:37:26 +0300 Subject: [PATCH 10/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 28 ++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 673c01ba..241205cd 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -1,14 +1,38 @@ ## Знакомьтесь: i-bem.js +* [Настройка страницы](#Настройка-страницы) +* [Модульная система i-bem.js](#Модульная-система-i-bemjs) +### Настройка страницы +Фреймворк `i-bem.js` входит в состав библиотеки [bem-core](https://ru.bem.info/platform/libs/bem-core/). Чтобы работать с `i-bem.js` в браузере, нужно включить библиотеку. В примере ниже показано, как добавляются сценарии на страницу из Yаndex CDN. -* [Модульная система i-bem.js](Модульная система i-bem.js) +```diff index.html + + + + +Примеры i-bem.js + + + + ++
+ + ++ + + + + +``` + ### Модульная система i-bem.js -Фреймворк `i-bem.js` входит в состав библиотеки [bem-core](https://ru.bem.info/platform/libs/bem-core/). Реализация `i-bem.js` состоит из двух модулей: From 261fccced1cd794a11e3a2fcdee70b5cdf674cb8 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 15:45:17 +0300 Subject: [PATCH 11/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 241205cd..13d6755a 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -17,9 +17,6 @@ - -+
- + @@ -31,7 +35,6 @@ ### Модульная система i-bem.js - Реализация `i-bem.js` состоит из двух модулей: * **Модуль [i-bem](https://ru.bem.info/platform/libs/bem-core/)**. @@ -50,3 +53,39 @@ Можно использовать `i-bem.js` как часть полного стека БЭМ-инструментов. В этом случае свой проект удобно создавать на основе шаблонного репозитория [project-stub](https://ru.bem.info/platform/project-stub/), в котором настроена автоматическая установка зависимых библиотек и сборка. Если не планируется использование других технологий БЭМ-платформы, достаточно поместить код библиотеки `bem-core` в существующий проект. + + + +### Простой пример + +```html + + + + +Подключение i-bem.js + + + + + + + + + +``` From f3c5ec6219d9c28d10f152b04c3e5bc52815d1ca Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 17:57:11 +0300 Subject: [PATCH 17/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 83647ecd..7bf4c3d6 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -3,6 +3,7 @@ * [Введение в компонентный подход](#Введение-в-компонентный-подход) * [Настройка страницы](#Настройка-страницы) * [Модульная система i-bem.js](#Модульная-система-i-bemjs) +* [Простой компонент](#Простой-компонент) ### Введение в компонентный подход @@ -37,11 +38,11 @@ Реализация `i-bem.js` состоит из двух модулей: -* **Модуль [i-bem](https://ru.bem.info/platform/libs/bem-core/)**. +* **Модуль i-bem**. Предоставляет базовую реализацию JS-блока `i-bem`, от которой наследуются все блоки и элементы в `i-bem.js`. Блок `i-bem` написан с расчетом на использование в любом JS-окружении: как на клиенте, так и на сервере (например, в Node.js). -* **Модуль [i-bem-dom](https://ru.bem.info/platform/libs/bem-core/)**. +* **Модуль i-bem-dom**. Предоставляет базовую реализацию блока и элемента, привязанных к DOM-узлу. Рассчитан на использование на клиенте, опирается на работу браузеров с DOM. Зависит от `jQuery`. @@ -55,8 +56,7 @@ Если не планируется использование других технологий БЭМ-платформы, достаточно поместить код библиотеки `bem-core` в существующий проект. - -### Простой пример +### Простой компонент ```html From c2b632b7104212f8f10e82a38f201e20f1246e09 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 18:03:34 +0300 Subject: [PATCH 18/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 7bf4c3d6..3353d7b7 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -63,7 +63,7 @@ -Подключение i-bem.js +Простой компонент @@ -75,7 +75,7 @@ onSetMod: { js: { inited: function() { - bemDom.prepend(this.domElem, "

Hello, world!

"); + bemDom.prepend(this.domElem, '

Hello, world!

'); } } }, From a969f305e15772b7879ea0654bc52d57864e6733 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 18:26:45 +0300 Subject: [PATCH 19/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 3353d7b7..31123ad2 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -55,7 +55,6 @@ Если не планируется использование других технологий БЭМ-платформы, достаточно поместить код библиотеки `bem-core` в существующий проект. - ### Простой компонент ```html @@ -75,7 +74,7 @@ onSetMod: { js: { inited: function() { - bemDom.prepend(this.domElem, '

Hello, world!

'); + bemDom.prepend(this.domElem, '

Hello, world!

'); } } }, From 1b69e134f4eb2c81864206f75997c869e284bfdf Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 18:30:30 +0300 Subject: [PATCH 20/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 31123ad2..8d4403a4 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -74,7 +74,7 @@ onSetMod: { js: { inited: function() { - bemDom.prepend(this.domElem, '

Hello, world!

'); + bemDom.prepend(this.domElem, '

Hello, world!

'); } } }, From 536713c1373cdb7552921a514ab401e2d2f2cdad Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Mon, 12 Feb 2018 18:59:52 +0300 Subject: [PATCH 21/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 8d4403a4..f4b7d48e 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -1,6 +1,7 @@ ## Знакомьтесь: i-bem.js * [Введение в компонентный подход](#Введение-в-компонентный-подход) +* [Виртуальная DOM](#Виртуальная-dom) * [Настройка страницы](#Настройка-страницы) * [Модульная система i-bem.js](#Модульная-система-i-bemjs) * [Простой компонент](#Простой-компонент) @@ -8,6 +9,9 @@ ### Введение в компонентный подход +## Виртуальная DOM + +HTML — это набор инструкций, на основе которых браузер строит DOM. ### Настройка страницы @@ -36,7 +40,7 @@ ### Модульная система i-bem.js -Реализация `i-bem.js` состоит из двух модулей: +`i-bem.js` состоит из двух модулей: * **Модуль i-bem**. @@ -44,7 +48,7 @@ * **Модуль i-bem-dom**. - Предоставляет базовую реализацию блока и элемента, привязанных к DOM-узлу. Рассчитан на использование на клиенте, опирается на работу браузеров с DOM. Зависит от `jQuery`. + Предоставляет базовую реализацию [БЭМ-сущностей](https://ru.bem.info/methodology/key-concepts/#БЭМ-сущность), привязанных к DOM-узлу. Рассчитан на использование на клиенте. Зависит от `jQuery`. Зависимости: From d3360cdcaddfa96f7195d6b09b6e1a0dd18239ae Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Thu, 22 Feb 2018 14:22:24 +0300 Subject: [PATCH 22/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index f4b7d48e..c6c63ee0 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -9,7 +9,7 @@ ### Введение в компонентный подход -## Виртуальная DOM +### Виртуальная DOM HTML — это набор инструкций, на основе которых браузер строит DOM. From cbad292f709ca5e32a30c8f5740fd450a7e7d8e7 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Fri, 23 Feb 2018 17:06:46 +0300 Subject: [PATCH 23/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 107 ++++++++++++++++++--- common.docs/i-bem-js/i-bem-js.ru.md | 2 +- 2 files changed, 96 insertions(+), 13 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index c6c63ee0..e72cf280 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -5,13 +5,28 @@ * [Настройка страницы](#Настройка-страницы) * [Модульная система i-bem.js](#Модульная-система-i-bemjs) * [Простой компонент](#Простой-компонент) +* [Несколько компонентов](#Несколько-компонентов) ### Введение в компонентный подход ### Виртуальная DOM -HTML — это набор инструкций, на основе которых браузер строит DOM. +HTML — это набор инструкций, на основе которых браузер строит DOM. Когда браузер загружает код HTML, его элементы становятся элементами DOM. + +HTML-элементы связаны друг с другом в иерархии: существуют родительские и дочерние элементы. Последнии, в свою очередь, могут быть родительскими для других элементов. + +С появлением Ajax добавление новых HTML-элементов на страницу с небольшими порциями данных стало обычным делом. Изначально браузер загружает один HTML-документ. В ходе взаимодействия пользователя со страницей, JavaScript выполняет работу по разбору DOM и добавлению новых элементов интерфейса. + +Управление изменениями DOM с помощью JavaScript может стать очень сложным и затратным по времени. Часто такое управление выполняется императивно: + +```js +const h1 = document.createElement("h1"); +h1.innerHTML = 'Hello, world!'; +document.body.appendChild(h1); +``` + +`i-bem.js` помогает работать с DOM декларативно и не думать о том, как найти тот или иной элемент. Все HTML-элементы объявленные в `i-bem.js` имеют свой JavaScript объект с набором инструкций, применяемых для построения пользовательского интерфейса и взаимодействия с браузером. Таким образом, разработчик изменяет виртуальную модель DOM, а `i-bem.js` отображает эти изменения наиболее эффективным образом. ### Настройка страницы @@ -36,28 +51,49 @@ HTML — это набор инструкций, на основе которы ``` -Это минимальные требования для работы с `i-bem.js` в браузере. Можно поместить ваш код JavaScript в отдельный файл, но он должен загружаться на страницу уже после загрузки `bem-core`. +Это минимальные требования для работы с `i-bem.js` в браузере. Можно поместить ваш код JavaScript в отдельный файл, но он должен загружаться на страницу после загрузки `bem-core`. ### Модульная система i-bem.js -`i-bem.js` состоит из двух модулей: +Модуль в `i-bem.js` представляет собой фрагмент кода, пригодный для многократного использования, который можно легко включить в другой модуль. + +`i-bem.js` использует модульную систему [ym/modules](https://github.com/ymaps/modules), которая позволяет: -* **Модуль i-bem**. +* Предоставлять (`provide`) модули асинхронно. +* Подключать (`require`) модули асинхронно. +* Переопределять и доопределять модули. - Предоставляет базовую реализацию JS-блока `i-bem`, от которой наследуются все блоки и элементы в `i-bem.js`. Блок `i-bem` написан с расчетом на использование в любом JS-окружении: как на клиенте, так и на сервере (например, в Node.js). +`i-bem.js` состоит из двух основных модулей: -* **Модуль i-bem-dom**. +* **i-bem**. - Предоставляет базовую реализацию [БЭМ-сущностей](https://ru.bem.info/methodology/key-concepts/#БЭМ-сущность), привязанных к DOM-узлу. Рассчитан на использование на клиенте. Зависит от `jQuery`. + JavaScript реализация блока `i-bem`. Модуль рассчитан на использование в любом JS-окружении: как на клиенте, так и на сервере (например, в Node.js). -Зависимости: + **Пример** -* jQuery (только для модуля `i-bem-dom`). При использовании `bem-core` отдельная установка jQuery не требуется. -* Модульная система [ym/modules](https://github.com/ymaps/modules). При использовании [ENB](https://ru.bem.info/toolbox/enb/) с технологией `.browser.js` (и производных от нее) эта зависимость удовлетворяется автоматически. + ```js + modules.define('page', ['i-bem'], function(provide, bem){ + // Декларируем блок page в модуле i-bem + provide(bem.declBlock(this.name, { -Можно использовать `i-bem.js` как часть полного стека БЭМ-инструментов. В этом случае свой проект удобно создавать на основе шаблонного репозитория [project-stub](https://ru.bem.info/platform/project-stub/), в котором настроена автоматическая установка зависимых библиотек и сборка. + })); + }); + ``` -Если не планируется использование других технологий БЭМ-платформы, достаточно поместить код библиотеки `bem-core` в существующий проект. +* **i-bem-dom**. + + [Виртуальная DOM](#Виртуальная-dom) (JavaScript реализация DOM). Модуль зависит от библиотеки [jQuery](https://jquery.com) (отдельная установка не требуется) и рассчитан на использование на клиенте. + + **Пример** + + ```js + modules.define('page', ['i-bem-dom'], function(provide, bemDom){ + // Декларируем блок page в модуле i-bem-dom + provide(bemDom.declBlock(this.name, { + + })); + }); + ``` ### Простой компонент @@ -92,3 +128,50 @@ HTML — это набор инструкций, на основе которы ``` + +### Несколько компонентов + +```html + + + + +Простой компонент + + + +
+ + + + + + + +``` diff --git a/common.docs/i-bem-js/i-bem-js.ru.md b/common.docs/i-bem-js/i-bem-js.ru.md index 8effe815..f6c33a15 100644 --- a/common.docs/i-bem-js/i-bem-js.ru.md +++ b/common.docs/i-bem-js/i-bem-js.ru.md @@ -6,7 +6,7 @@ ## Введение -`i-bem.js` — JavaScript-фреймворк для создания пользовательских интерфейсов. Он был создан в [Яндексе](https://www.yandex.ru) с целью решить ряд проблем, связанных с крупномасштабными сайтами. +`i-bem.js` — JavaScript-фреймворк для разработки пользовательских интерфейсов. Он был создан в [Яндексе](https://www.yandex.ru) с целью решить ряд проблем, связанных с крупномасштабными сайтами. Позволяет: From 42223fbcd4defc21cfd9f62745aca83239fdf961 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Fri, 23 Feb 2018 17:11:24 +0300 Subject: [PATCH 24/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index e72cf280..1e0343df 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -59,8 +59,8 @@ document.body.appendChild(h1); `i-bem.js` использует модульную систему [ym/modules](https://github.com/ymaps/modules), которая позволяет: -* Предоставлять (`provide`) модули асинхронно. -* Подключать (`require`) модули асинхронно. +* Предоставлять модули асинхронно (`provide`). +* Подключать модули асинхронно (`require`). * Переопределять и доопределять модули. `i-bem.js` состоит из двух основных модулей: From 7e622b0892879eed872901ec37891972d19cc65a Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Fri, 23 Feb 2018 17:17:29 +0300 Subject: [PATCH 25/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 28 +++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 1e0343df..7776ec0b 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -136,7 +136,7 @@ document.body.appendChild(h1); -Простой компонент +Несколько компонентов @@ -175,3 +175,29 @@ document.body.appendChild(h1); ``` + +Код каждого блока можно вынести в отдельные файлы и затем выполнить инициализацию: + +```html + + + + +Несколько компонентов + + + +
+ + + + + + + + + +``` From c0f08b94928e84a05551439d8e8619af9ef9f068 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Fri, 23 Feb 2018 17:20:05 +0300 Subject: [PATCH 26/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 7776ec0b..73ee8f1b 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -65,7 +65,7 @@ document.body.appendChild(h1); `i-bem.js` состоит из двух основных модулей: -* **i-bem**. +* `i-bem`. JavaScript реализация блока `i-bem`. Модуль рассчитан на использование в любом JS-окружении: как на клиенте, так и на сервере (например, в Node.js). @@ -80,7 +80,7 @@ document.body.appendChild(h1); }); ``` -* **i-bem-dom**. +* `i-bem-dom`. [Виртуальная DOM](#Виртуальная-dom) (JavaScript реализация DOM). Модуль зависит от библиотеки [jQuery](https://jquery.com) (отдельная установка не требуется) и рассчитан на использование на клиенте. @@ -176,7 +176,7 @@ document.body.appendChild(h1); ``` -Код каждого блока можно вынести в отдельные файлы и затем выполнить инициализацию: +JavaScript реализацию каждого блока можно вынести в отдельные файлы и затем выполнить инициализацию модуля `i-bem-dom`: ```html From 568e06f2ba8a00b947542dcc74fbfa2570f2cf05 Mon Sep 17 00:00:00 2001 From: Sergei Bocharov Date: Fri, 23 Feb 2018 17:25:00 +0300 Subject: [PATCH 27/36] WIP --- common.docs/i-bem-js/i-bem-js-common.ru.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/common.docs/i-bem-js/i-bem-js-common.ru.md b/common.docs/i-bem-js/i-bem-js-common.ru.md index 73ee8f1b..11dbc4d7 100644 --- a/common.docs/i-bem-js/i-bem-js-common.ru.md +++ b/common.docs/i-bem-js/i-bem-js-common.ru.md @@ -39,6 +39,7 @@ document.body.appendChild(h1); Подключение i-bem.js + @@ -104,6 +105,7 @@ document.body.appendChild(h1); Простой компонент + @@ -138,13 +140,15 @@ document.body.appendChild(h1); Несколько компонентов + - +