JavaScript в терминах БЭМ / Владимир Варанкин (Яндекс)

разработчик интерфейсов
JavaScript
в терминах БЭМ
Владимир Варанкин
РИТ++, Москва, 22 апреля 2013 г.

В докладе рассказывается о написании
клиентского JavaScript

В докладе рассказывается о написании
клиентского JavaScript
Любые совпадения с реальными событиями
специальны

БЭМ и JavaScript
Организация кода в проекте

The basic of Backbone are quite easy to learn. But soon you find that there
are not enough opinions there to know how to best structure your code.
You will need to watch or read a few tutorials to learn
some best Backbone practices
10
A Comparison of Angular, Backbone,
CanJS and Ember
bit.ly/179Ojtc

Файловая структура
project/
blocks/
button/
checkbox/
input/
radiobox/
...
11

project/
blocks/
button/
button.css
button.js
...
12

project/
blocks/
button/
button.css
button.doc.md
button.js
button.spec.js
...
13

project/
css/
app.css
list.css
item.css
js/
models/
app.js
list.js
item.js
views/
app.js
list.js
item.js
routes/
...
14

project/
css/
app.css
list.css
item.css
js/
models/
app.js
list.js
item.js
views/
app.js
list.js
item.js
routes/
...
15
project/
blocks/
app/
app.model.js
app.view.js
app.router.js
list/
list.css
list.model.js
list.view.js
item/
item.css
item.model.js
...

Блок — это самодостаточный
компонент
приложения
16

i-bem.js
• Кроссбраузерность (jQuery)
18

i-bem.js
– селекторы
– события
– AJAX
– манипуляции с DOM
– ...
19

i-bem.js
• Решение типичных задач создания веб-компонентов
20

i-bem.js
– связь HTML и JS
– инициализация приложения
– ...
21

i-bem.js
• JavaScript в БЭМ-терминах
22

i-bem.js
• JavaScript в БЭМ-терминах
– „блок, помогающий делать другие блоки“
23

i-bem
Помощник для создания
других блоков
bit.ly/12uO7Ub
24

Статичный HTML
и динамичный JavaScript

Императивный подход
26

Что делать?
27

<div id="app">
<a>Do something</a>
</div>
28

$('#app')
.on('click', 'a', function() {
// logic...
})
29

$('#app')
.on('click', 'a', function() {
$(this).fadeOut(
'normal',
function() { ... })
})
30

Как делать?
Декларативный подход
32

<html ng-app>
<body>
<div ng-controller="AppCtrl">
<a ng-click="{{doLogic()}}">
Do something
</a>
</div>
</body>
</html>
34

HTML — скучный статичный
формат
35

HTML — скучный статичный
формат, но...
36

Индексируется поисковиками
HTML
37

Работает «везде» ;-)
HTML
38

Работает «везде»
Работает «всегда» ;-)
HTML
39

<div class="app i-bem">
<a class="app__controller">
Do something
</a>
</div>
Декларативный подход с i-bem.js
40

Декларация блока

Декларация блока
42

Декларация блока в HTML
<form class="search i-bem">
<input class="search__input"/>
<button class="search__button">Найти</button>
<div>
Например,
<a class="search__sample"/>который час?</a>
</div>
</form>
43

Декларация блока в JS
44
BEM.DOM.decl(
// блок,
// методы/свойства экземпляра блока,
// статические методы/свойства блока
)

45
BEM.DOM.decl(
'search',
// методы/свойства экземпляра блока,
// статические методы/свойства блока
)

46
BEM.DOM.decl(
'search',
{
method: function() { }
},
{
staticMethod: function() { }
}
)

47
BEM.DOM.decl('search', {
method: function() {
this ⟶ указатель на блок
this.domNode ⟶ jQuery-узел блока
this.__self ⟶ указатель на класс
this.__self.staticMethod() ⟶ вызов ст. метода
this.method() ⟶ вызов собственного метода
this.params ⟶ параметры блока
}
})

Инициализация

49
BEM.DOM.init()

50
$(function() {
BEM.DOM.init()
})

Инициализация всей страницы?
51

52
BEM.DOM.init([ctx])

Динамическая инициализация
56
$.get('http://...', function(list) {
BEM.DOM.update('.playlist', list)
})

Destruct
• Отписаться от событий
58

Destruct
• Очистить ссылки на объекты
59

Destruct
• Очистить ссылки на объекты
• Удалить HTML-код
60

Destruct
61
App.View = Backbone.View.extend({
teardown: function() {
// отписаться от событий в модели;
// вызвать `teardown()` для вложенных вьюх;
// очистить DOM...
}
})

Destruct
62
BEM.DOM.update(ctx, data)

Destruct
63
BEM.DOM.decl('player', {
destruct: function() {
// дополнительная очистка от мусора..
}
})

Ленивая инициализация блока

Ленивая инициализация
65

66

67
...
}, {
live: true
})

68
...
}, {
live: function() {
// условия инициализации
}
})

69
...
}, {
live: function() {
this.liveInitOnEvent('click', fn)
}
})

Состояния инициализации

JavaScript отключен
JavaScript включен,
но блок еще не инициализирован

JavaScript отключен
но блок еще не инициализирован
блок инициализирован

74

</form>

75
<form class="search search_js_inited i-bem">

</form>

76
<html class="ua_js_no">
<body>

</form>
</body>
</html>

77
<html class="ua_js_yes">
<body>

</form>
</body>
</html>

78
/* search.css */
.ua_js_no .search__sample {
display: none
}
.ua_js_yes .search__clean {
visibility: hidden;
}
.search_js_inited .search__clean {
visibility: visible;
}

Взаимодействие компонентов

80
<form class="search">
<div>
Например,
<a class="search-sample"/>который час?</a>
</div>
</form>

81
$('.search').find('.search-sample')

82
App.SearchView = Backbone.View.extend({
el: '.search',
events: {
'click .search-sample': doSmthg
}
})

83
App.SearchView = Backbone.View.extend({
el: '.search',
events: {
'click .search-sample': doSmthg
}
})

84
<div>
Например,
<a class="search__sample"/>который час?</a>
</div>
</form>

85
$('.search').find('.search__sample')
this.elem('sample')
}
})

Селекторы
86
// поиск блока внутри контекста
this.findBlockInside([elem], block)
// поиск снаружи контекста
this.findBlockOutside([elem], block)
// поиск на БЭМ-узле текущего блока
this.findBlockOn([elem], block)
// поиск элемента
this.findElem([ctx], elem)
// кеширующий поиск
this.elem(elem)

Расширение функциональности

89
// lib/search.js
SearchView = Backbone.View.extend({
// ...
}
})

90
// lib/search.js
SearchView = Backbone.View.extend({
})
// search.js
AutoSearchView = SearchView.extend({
this.constructor.__super__.method.apply(this)
}
})

91
// lib/search.js
SearchView = Ember.View.extend({
})
// search.js
SearchView.reopenClass({
this._super()
}
})

92
/* lib/search.css */
.search {
background: #fc0;
color: #000;
margin: 0;
}

93
/* lib/search.css */
.search {
background-color: #fc0;
color: #000;
margin: 0;
}
/* search.css */
.search {
background: none;
margin-right: 50px;
}

94
.search {
background: none;
margin: 0 50px 0 0;
}
.search {
background-color: #fc0;
color: #000;
margin: 0;
}

95
// lib/search.js
})

96
// lib/search.js
})
// search.js
this.__base()
}
})

О чем еще можно поговорить?

• Работа с модификаторами
98

• Работа с событиями
99

• Наследование блоков
100

• Распределенные блоки
101

• Миксины
102

• Миксины
• Инструменты сборки
103

• Миксины
• Инструменты сборки
• ...
104

Настоящее и будущее?

github.com/bem/bem-bl
Настоящее
106

Будущее
108
github.com/bem/bem-core

Часть БЭМ-экосистемы
i-bem.js
110

Удобно писать сложный клиентский JS
i-bem.js
111

@bem_tw
fb.com/groups/bem.info
github.com/bem
113

Разработчик интерфейсов
varankinv@yandex-team.ru
Владимир Варанкин
github.com/narqo
Спасибо

JavaScript в терминах БЭМ / Владимир Варанкин (Яндекс)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (13)

Similaire à JavaScript в терминах БЭМ / Владимир Варанкин (Яндекс)

Similaire à JavaScript в терминах БЭМ / Владимир Варанкин (Яндекс) (20)

Plus de Ontico

Plus de Ontico (20)

JavaScript в терминах БЭМ / Владимир Варанкин (Яндекс)