Владимир Варанкин "БЭМ и javascript: Зачем мы написали...

Я.Субботник, Москва, 8 сентября 2012 года

Разработчик интерфейсов Владимир Варанкин

БЭМ и JavaScript: Зачем мы написали js-‐фреймворк?

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

2

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

3

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

4

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

5


•  Нормализация API браузера

6



•  Готовые наборы виджетов

7




•  Rich UI интерфейсы

8




•  Rich UI интерфейсы

•  Библиотеки написания сложных веб-‐приложений

9

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

10

БЭМ!

13

—  блоки

—  элементы

— модификаторы

БЭМ

14

—  блоки

—  элементы

— модификаторы

—  уровни переопределения

БЭМ

15

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

16

i-‐bem.js

17

i-‐bem.js

—  блок, помогающий делать другие блоки

18

i-‐bem.js


—  реализация блока i-‐bem в технологии JavaScript

19

i-‐bem.js


—  реализация блока i-‐bem в технологии JavaScript

—  jQuery для нормализации API браузера

20

Реализация предметной области i-‐bem.js

JavaScript в БЭМ-‐терминах

Оперирует привычными понятиями :-‐)

21

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

22

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

23

It’s Code1me

24

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

25


26


27


28

HTML

30

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

31

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

32

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

33

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

34

BEM.DOM.decl('myblock', { !! method : function() {!!

// экземпляр5 this! !

// ссылка на класс! this.__self! !

// статический метод класса! this.__self.staticMethod()!!

// super-call! this.__base()!!

} !!

}) !35






} !!

}) !36






} !!

}) !37

BEM.DOM.decl('myblock', { /* ... */ }, { !! staticMethod : function() { !!

// класс ! this !!

// super-call! this.__base() !! }!!}) !

38

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

39

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

40

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

41

Элементы

42

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

43

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

44

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

45

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

46

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

47

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

onElemSetMod : { !!

/* структура, аналогичная блоку */!! 'elem' : { !!

'mod1' : {!!

// дополнительный параметр `elem` 5 'val1' : function(elem, mod, val, oldVal) { !! } !! ... !!} !

49

События

50

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

51

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

52

53

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

onSetMod : { !!

'js' : { ! !

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

}!!

} !!

54

Не рассказал про

•  блоки без DOM-‐представления

•  ленивая инициализация блока (live)

•  работа со статическими свойствами

•  каналы (Pub/Sub)

…и много еще чего интересного

55

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

56

Разработчик интерфейсов

varankinv@yandex-‐team.ru

@tvii

github.com/narqo

Владимир Варанкин

За картинки спасибо:

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

Владимир Варанкин "БЭМ и javascript: Зачем мы написали...

Technology