Date post: | 22-Jun-2015 |
Category: |
Technology |
Upload: | varvara-stepanova |
View: | 511 times |
Download: | 0 times |
YAC-2011, Москва, 19 сентября 2011 года
Варвара Степанова
JavaScript в БЭМ-терминах
Wednesday, October 5, 2011
clck.ru/L45Cшпаргалка к мастер-классу
JavaScript в терминах БЭМ
Wednesday, October 5, 2011
Блоки и элементы
3
Wednesday, October 5, 2011
Модификаторы
4
Wednesday, October 5, 2011
Уровни переопределения
5
Wednesday, October 5, 2011
Составные блоки
6
Wednesday, October 5, 2011
JS-реализация блока i-bem
7
Wednesday, October 5, 2011
Некоторые особенностиFeatures
8
Wednesday, October 5, 2011
Некоторые особенностиFeatures
9
Декларативный стиль
Wednesday, October 5, 2011
Некоторые особенностиFeatures
10
Декларативный стиль
Отложенная инициализация
Wednesday, October 5, 2011
Некоторые особенностиFeatures
11
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Wednesday, October 5, 2011
Некоторые особенностиFeatures
12
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
Wednesday, October 5, 2011
Некоторые особенностиFeatures
13
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
Расширение поведения модификаторами и уровнями переопределения
Wednesday, October 5, 2011
Что будем делать?
14
Wednesday, October 5, 2011
b-cutБлок-cut
15
Wednesday, October 5, 2011
b-cutБлок-cut
16
Wednesday, October 5, 2011
Инструменты и окружение
17
Wednesday, October 5, 2011
Инструменты и окружение
18
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
Wednesday, October 5, 2011
Инициализация проекта
19
Wednesday, October 5, 2011
Инициализация проекта
20
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-docs.git
make
Получает библиотеку bem-bl
Собирает страницы
Wednesday, October 5, 2011
Структура проекта
21
bem-bl/blocks/pages/GNUmakefile
Wednesday, October 5, 2011
22
bem-bl/ blocks-common/ blocks-desktop/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
23
bem-bl/ blocks-common/ i-bem/ ... blocks-desktop/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
24
bem-bl/blocks/ b-cut/ ...pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
25
bem-bl/blocks/pages/ index/ index.bemjson.js ...GNUmakefile
Структура проекта
Wednesday, October 5, 2011
26
bem-bl/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
Пишем код
27
Wednesday, October 5, 2011
Основные элементы блока
28
<div class=”b-cut”> <a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ... </a> <div class=”b-cut__content”> ... </div></div>
Wednesday, October 5, 2011
Начальное состояние
29
<div class=”b-cut”> <a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ... </a> <div class=”b-cut__content”> ... </div></div>
Wednesday, October 5, 2011
Открытый кат
30
<div class=”b-cut”> <a class=”b-link b-link_pseudo_yes b-cut__opener b-cut__opener_visibility_hidden i-bem” onclick=”return {"b-link":{}}”> ... </a> <div class=”b-cut__content b-cut__opener_visibility_visible”> ... </div></div>
Wednesday, October 5, 2011
Контейнер блока
31
<div class=”b-cut”> ...</div>
Wednesday, October 5, 2011
js: true
32
<div class=”b-cut i-bem” onclick=”return {"b-cut":{}}”> ...</div>
Wednesday, October 5, 2011
Пишем код
33
Wednesday, October 5, 2011
Инициализация
34
<div class=”b-cut i-bem b-cut_js_inited” onclick=”return {"b-cut":{}}”> ...</div>
Wednesday, October 5, 2011
Начальное состояние
35
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
Wednesday, October 5, 2011
Начальное состояние
36
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
Wednesday, October 5, 2011
Начальное состояние
37
<a class=”b-link b-link_pseudo_yes b-link_js_inited b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
Wednesday, October 5, 2011
Пишем код
38
Wednesday, October 5, 2011
Как закрывать кат?
39
<div class=”b-cut”> ... <div class=”b-cut__content b-cut__opener_visibility_visible”> <i class=”b-cut__close”></i> ... </div></div>
Wednesday, October 5, 2011
Пишем код
40
Wednesday, October 5, 2011
Очередной проект
41
Wednesday, October 5, 2011
Инициализация проекта
42
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-blog.git
make
Получает библиотеку bem-bl
Собирает страницы
Wednesday, October 5, 2011
Пишем код
43
Wednesday, October 5, 2011
для “почитать”Ссылки
44
Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4jsdoc в коде блока i-bem
Документация блока i-bemclck.ru/KzEJ
Клуб в Ярушке
Wednesday, October 5, 2011
Бонус!
46
Wednesday, October 5, 2011
Пишем код
47
Wednesday, October 5, 2011