Многие темы удобнее и интереснее изучать с помощью разных небольших примеров конкретных решений задач. Написание JavaScript для браузера с использованием i-bem.js – не исключение. Разберём задачи, основанные на реальной практике разных проектов Яндекса.

1. БЭМ и JavaScript: Сборник рецептов
Варя Степанова
руководитель группы разработки интерфейсов
Я.Субботник, Москва, 8 сентября 2012 года

2. bit.ly/P121UR
2

3. Вложенные блоки

4. Блоки b-menu-*
4

5. Блоки b-menu-*
4

6. Как работает b-menu-*?
thi
s
.tr
igg
er(
‘cu
r ren
t’)
;
5

7. b-seach
6

8. find*() методы
внутри
снаружи
на себе
7

9. BEM.DOM.decl('b-search', {
onSetMod: {
'js': {
'inited': function() {
this
.findBlockInside(
'b-menu-vert')
.on(
'current', this.doSmth()
);
}
}
}
}
8

10. ...
<div class="b-search__filter">
<div
class="b-menu-vert i-bem"
onclick="...">
...
</div>
</div>
...
9

11. ...
<div
class="b-menu-vert i-bem
b-search__filter"
onclick="...">
...
</div>
...
10

12. this
.findBlockInside(
this.elem('filter'),
'b-menu-vert')
.on('current', this.doSmth()
);
11

13. bit.ly/NfYdTa
Пример
реиспользования меню
12

14. Декларативность

15. Декларативность в архитектуре

16. bit.ly/OptXT5
Презентация про
Кнопочку на РИТ 2012
15

17. 16
Состояния кнопки

18. 16
Состояния кнопки

19. 17
BEM.DOM.decl('b-form-button', {
onSetMod : {
'focused' : {
'yes' : function() {
...
this
.bindTo('keydown',
this._onKeyDown)
.elem('input').focus();

20. b-map & i-geo-point
18

21. {
block: 'b-map',
mods: { ... },
js: {
...
center: [ 37.58, 55.73 ],
zoom: 16,
points: [ ... ]
}
}
19

22. bit.ly/RdKGNA
Пример Яндекс.Карты
на БЭМ
20

23. Переопределение уровнем

24. Переопределение в CSS
22

25. Переопределение в CSS
library/blocks/b-head/b-head.css
-----------------------------------------
.b-head { color: red; }
22

26. Переопределение в CSS
library/blocks/b-head/b-head.css
-----------------------------------------
.b-head { color: red; }
blocks/b-head/b-head.css
-----------------------------------------
.b-head { color: green; }
22

27. Переопределение динамического
метода

28. b-flash
24

29. b-flash
24

30. getDefaultParams : function() {
return {
version : '10.0.0',
width : '100%',
height : '100%',
attributes : {},
...
};
}
25

31. getDefaultParams : function() {
return {
version : '10.0.0',
width : '50%',
height : '50%',
attributes : {},
...
};
}
26

32. getDefaultParams : function() {
return $.extend(
this.__base(),
{
width: '50%',
height: '50%'
}
);
}
27

33. Переопределение статического
свойства

34. b-serp
29

35. b-serp
29

36. blocks-common/b-serp/b-serp.js
BEM.DOM.decl('b-serp', {
// динамические поля
}, {
blocks: []
});
30

37. blocks/b-serp/b-serp.js
BEM.DOM.decl('b-serp', {}, {
blocks: [ 'b-form-input', 'b-adv',
'b-serp-list', 'b-more',
'b-feet' ]
});
blocks-new/b-serp/b-serp.js
BEM.DOM.decl('b-serp', {}, {
blocks: [ 'b-form-input', 'b-adv',
'b-filters', 'b-serp2-list',
'b-more', 'b-feet' ]
});
31

38. Переопределение модификатором

39. b-form-input
33

40. b-form-input
b-form-input_autocomplete_yes
34

41. BEM.DOM.decl('b-form-input', {
onSetMod : {
'js' : {
'inited' : function() {
// инициализация
}
},
'focused' : {
'yes' : {
// что делать, когда в фокусе
}
}
}
}
35

42. 36

43. BEM.DOM.decl({
block: 'b-form-input',
modName: 'autocomplete',
modVal: 'yes'
},
36

44. BEM.DOM.decl({
block: 'b-form-input',
modName: 'autocomplete',
modVal: 'yes'
},
{
onSetMod: {
'js': {
'inited': function() {
this.__base.apply(this,
arguments);
// расширение
// функциональности
},
...
36

45. BEM.DOM.decl({ block: 'b-form-input',
modName: 'autocomplete',
modVal: 'yes' },
{
onSetMod: {
...
37

46. BEM.DOM.decl({ block: 'b-form-input',
modName: 'autocomplete',
modVal: 'yes' },
{
onSetMod: {
...
'focused': {
'yes': function() {
this.__base();
// расширение
//функциональности
},
'': function() {
...
}
37

47. live-события

48. 39

49. 39

50. BEM.DOM.decl('b-form-select', {
...
}, {
live: function() {
this.liveBindTo(
'item',
'mouseup',
function() { ... }
}
});
40

51. live-инициализация

52. 42

53. 42

54. 43

55. 43

56. 43

57. BEM.DOM.decl('b-block', { ... },
{
/* Статические методы и свойства */
}
);
44

58. BEM.DOM.decl('b-block', { ... },
{
live: function() {
/* Когда инициализировать? */
}
}
45

59. live: function() {
this.liveInitOnEvent(...)
.liveInitOnBlockEvent(...)
.liveInitOnBlockInsideInit(...)
.liveInitOnBlockInsideEvent(...)
.liveInitOnBlockInit(...)
}
46

60. this
.liveBindTo('leftclick', function(e){
this._onClick(e);
})
.liveBindTo(
'mouseover ... focusin',
function(e) {
var mod = eventsToMods[e.type];
this.setMod(mod.name, mod.val || '');
});
}
47

61. Миксование блоков

62. Миксование блоков
<div class="b-block1
b-block2
i-bem"
onclick="
return { 'b-block1': {},
'b-block2': {}
}
">
49

63. Блок сбора статистики кликов
<div class="b-domik b-c i-bem"
onclick="return { 'b-domik' :
{...}, 'b-c' : { .. } }">
...
<a class="b-domik__help">
Помощь
</a>
...
</div>
50

64. baseBlock

65. Блоки b-menu-*
52

66. Блоки b-menu-*
52

67. BEM.DOM.decl('i-menu', {
onElemSetMod : {
'item' : {
'state' : {
'current' : function(...) {
...
this.trigger('current');
}
}
}
}
});
53

68. blocks-desktop/b-menu-horiz/b-menu-horiz.js
BEM.DOM.decl(
{
name: 'b-menu-horiz',
baseBlock: 'i-menu'
}
);
blocks-desktop/b-menu-vert/b-menu-vert.js
BEM.DOM.decl(
{
name: 'b-menu-vert',
baseBlock: 'i-menu'
}
);
54

69. bit.ly/Tq5aU4
Блок i-menu
55

70. Распределённый :-) блок

71. Один и тот же блок
57

72. <div
class="b-my-block i-bem"
onclick="return {
'b-my-block' : {
'id' : 'myBlockId'
}
}"> <!-- smth --> </div>
<div
class="b-my-block i-bem"
onclick="return {
'b-my-block' : {
'id' : 'myBlockId'
}
}”> <!-- smth else --> </div>
58

73. b-tabbed-pane
59

74. <div class="b-tabbed-pane b-tabbed-
pane__tabs i-bem" onclick="return {'b-
tabbed-pane':{'id':'myTabbedPaneId'}}">
<div class="b-tabbed-pane b-tabbed-
pane__panels i-bem" onclick="return
{'b-tabbed-pane':
{'id':'myTabbedPaneId'}}">
60

75. Блок без DOM-представления

76. BEM.decl('i-system', {
// динамические поля
}, {
// статические поля
});
62

77. BEM.decl('i-system', {
// динамические поля
}, {
// статические поля
});
BEM.DOM.decl(...)
62

78. channel

79. channel API
BEM.channel('channelName');
BEM
.channel('channelName')
.trigger('event');
BEM.channel('channelName').on();
BEM.channel('channelName').un();
64

80. var channel = BEM.channel('sys');
BEM.decl('i-system', {}, {
// каждые 50 милисекунд
channel.trigger('tick');
// если активности нет
channel.trigger('idle');
// при mousemove и keydown
channel.trigger('wakeup');
});
65

81. BEM.DOM.decl('b-form-input', {
'js' : {
'inited' : function() {
...
var sys = this.channel('sys').on({
'tick' : update,
'idle' : function() {
сhannel.un('tick', update);
},
'wakeup' : function() {
сhannel.on('tick', update);
}
});
}
},
66

82. 67

83. update = function () {
var inst, i = 0;
while(inst = inst[i++])
inst.val(in.elem('input').val());
}
67

84. update = function () {
var inst, i = 0;
while(inst = inst[i++])
inst.val(in.elem('input').val());
}
BEM.DOM.decl('b-form-input', {
...
67

85. update = function () {
var inst, i = 0;
while(inst = inst[i++])
inst.val(in.elem('input').val());
}
BEM.DOM.decl('b-form-input', {
...
val : function(val, data) {
if (val != oldVal)
this.trigger('change', data);
}
...
});
67

86. bit.ly/OVJHhs
Блок i-system, c
примером
68

87. 69

88. Варвара Степанова
toivonen@yandex-team.ru
toivonens