1. БЭМ
и
JavaScript:
Зачем
мы
написали
js-­‐фреймворк?
Владимир
Варанкин
Разработчик
интерфейсов
Я.Субботник,
Москва,
8
сентября
2012
года

2. Фреймворк
(англ.
framework,
Каркас)
—
структура
программной
системы;
программное
обеспечение,
облегчающее
разработку
и
объединение
разных
компонентов
большого
программного
проекта
2

3. фреймворк
—
каркас
3

4. „ они
заполонили
планету
“!
4

5. Решаемые
задачи
5

6. Решаемые
задачи
• Нормализация
API
браузера
6

7. Решаемые
задачи
• Нормализация
API
браузера
• Готовые
наборы
виджетов
7

8. Решаемые
задачи
• Нормализация
API
браузера
• Готовые
наборы
виджетов
• Rich
UI
интерфейсы
8

9. Решаемые
задачи
• Нормализация
API
браузера
• Готовые
наборы
виджетов
• Rich
UI
интерфейсы
• Библиотеки
написания
сложных
веб-­‐приложений
9

10.
должны
помогать
10

11. 11

12. 12

13. БЭМ!
13

14. БЭМ
— блоки
— элементы
— модификаторы
14

15. БЭМ
— блоки
— элементы
— модификаторы
— уровни
переопределения
15

16. Уровни
переопределения
16

17. i-­‐bem.js
17

18. i-­‐bem.js
— блок,
помогающий
делать
другие
блоки
18

19. i-­‐bem.js
— блок,
помогающий
делать
другие
блоки
— реализация
блока
i-­‐bem
в
технологии
JavaScript
19

20. i-­‐bem.js
— блок,
помогающий
делать
другие
блоки
— реализация
блока
i-­‐bem
в
технологии
JavaScript
— jQuery
для
нормализации
API
браузера
20

21. i-­‐bem.js
Реализация
предметной
области
JavaScript
в
БЭМ-­‐терминах
Оперирует
привычными
понятиями
:-­‐)
21

22. компонент
стека
разработки
проекта
в
БЭМ-­‐методологии
22

23. hrp://github.com/bem/bem-­‐bl
23

24. It’s
Code1me
24

25. blocks-common/i-bem/i-bem.js!
25

26. blocks-common/i-bem/i-bem.js!
26

27. blocks-common/i-bem/i-bem.js!
27

28. blocks-common/i-bem/i-bem.js!
28

29. 29

30. HTML
30

31. <div !
class="myblock i-bem"!
onclick="return {!
myblock: { params: {} }}">!
!
<span class="myblock__item"></span>!
</div>!
!
!
31

32. <div !
class="myblock i-bem"!
onclick="return {!
myblock: { params: {} }}">!
!
<span class="myblock__item"></span>!
</div>!
!
!
32

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

34. BEM.DOM.decl('myblock', {!
!
/* собственные свойства экземпляра */!
!
}, {!
!
/* статические свойства */!
!
})!
34

35. BEM.DOM.decl('myblock', {!
!
method : function() {!
!
// экземпляр5
this!
!
// ссылка на класс!
this.__self!
!
// статический метод класса!
this.__self.staticMethod()!
!
// super-call!
this.__base()!
!
}!
!
})! 35

36. BEM.DOM.decl('myblock', {!
!
method : function() {!
!
// экземпляр5
this!
!
// ссылка на класс!
this.__self!
!
// статический метод класса!
this.__self.staticMethod()!
!
// super-call!
this.__base()!
!
}!
!
})! 36

37. BEM.DOM.decl('myblock', {!
!
method : function() {!
!
// экземпляр5
this!
!
// ссылка на класс!
this.__self!
!
// статический метод класса!
this.__self.staticMethod()!
!
// super-call!
this.__base()!
!
}!
!
})! 37

38. BEM.DOM.decl('myblock', { /* ... */ }, {!
!
staticMethod : function() {!
!
// класс !
this !
!
// super-call!
this.__base()!
!
}!
!
})!
38

39. Селекторы
блоков
39

40. // поиск внутри контекста5
this.findBlockInside([elem], block)!
!
// поиск снаружи контекста5
this.findBlockOutside([elem], block)!
!
// поиск на BEM-узле текущего блока5
this.findBlockOn([elem], block)!
!
40

41. // поиск внутри контекста5
this.findBlocksInside([elem], block)!
!
// поиск снаружи контекста5
this.findBlocksOutside([elem], block)!
!
// поиск на BEM-узле текущего блока5
this.findBlocksOn([elem], block)!
!
41

42. Элементы
42

43. // кеширующий селектор5
this.elem(name,!
[modName], [modVal])!
!
// некеширующий5
this.findElem([ctx], name, !
[modName], [modVal])!
43

44. Модификаторы
44

45. // значение модификатора блока5
this.getMod(modName)!
!
// значение модификатора элемента5
this.getMod(elem, modName)!
!
!
45

46. // проверка модификатора5
this.hasMod([elem], modName, modVal)!
!
// установка модификатора 5
this.setMod([elem], modName, modVal)!
!
// удаление модификатора5
this.delMod([elem], modName)!
!
// переключение значений модификатора5
this.toggleMod([elem], modName, !
modVal1, modVal2, [condition])!
46

47. Реакция
на
изменение
модификатора
47

48. onSetMod : {!
!
'mod1' : {!
!
// установка модификатора mod1 в val15
'val1' : function(mod, val, oldVal) { !
!
}!
!
},!
!
// установка модификатора `mod2` в любое значение5
'mod2' : function(mod, val, oldVal) {!
!
}!
!
}!
! 48

49. onElemSetMod : {!
!
/* структура, аналогичная блоку */!
!
'elem' : {!
!
'mod1' : {!
!
// дополнительный параметр `elem` 5
'val1' : function(elem, mod, val, oldVal) {!
!
}!
!
...!
!
}!
49

50. События
50

51. // DOM-события5
this!
.bindTo([elem], event, fn)!
.unbindFrom([elem], event)!
!
!
// BEM-события5
this!
.on(event, [data], fn, [ctx])!
.un(event, [data], fn, [ctx])!
.trigger(event, [data])!
!
51

52. Инициализация
блока
52

53. <div !
class="myblock myblock_js_inited i-bem"!
onclick="return {!
myblock: { params: {} }}">!
!
<span class="myblock__item"></span>!
</div>!
!
!
53

54. onSetMod : {!
!
'js' : {!
!
'inited' : function() { !
!
/* «конструктор блока» */!
!
}!
!
}!
!
}!
!
54

55. Не
рассказал
про
• блоки
без
DOM-­‐представления
• ленивая
инициализация
блока
(live)
• работа
со
статическими
свойствами
• каналы
(Pub/Sub)
…и
много
еще
чего
интересного
55

56. „JavaScript-­‐реализация
блока
i-­‐bem“
hrp://bem.github.com/bem-­‐bl/sets/common-­‐desktop/i-­‐bem/i-­‐bem.ru.html
56

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

59. За
картинки
спасибо:
1. hrp://dan7e87.deviantart.com/art/Iron-­‐Man-­‐Suit-­‐Design-­‐W-­‐I-­‐P-­‐194579401
2. hrp://theheroicage.com/invincible-­‐iron-­‐man-­‐armor-­‐and-­‐glory/
3. hrp://so…-­‐h.deviantart.com/art/zombie-­‐concept11-­‐216439938
4. hrp://spagnolo.deviantart.com/art/Supers-­‐Color-­‐synthesis-­‐2-­‐189705274
5. hrp://ˆger1313.deviantart.com/art/Push-­‐258184965
6. hrp://www.mymodernmet.com/profiles/blogs/11-­‐cleverly-­‐designed-­‐w‹
7. hrp://prolificpen.deviantart.com/art/Speedpaint-­‐Swords-­‐317004863
8. hrp://agoners.wordpress.com/2008/12/04/the-­‐curious-­‐orange/
9. hrp://hmmgabby.deviantart.com/art/summer-­‐2010-­‐165667847