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

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

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

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

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

2  

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

3  

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

4  

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

5  

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

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

6  

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

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

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

7  

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

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

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

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

8  

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

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

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

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

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

9  

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

10  

11  

12  

БЭМ!  

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  

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

26  

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

27  

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

28  

29  

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  

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

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

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

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

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

} !!

}) !36  

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

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

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

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

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

} !!

}) !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