Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

826 views

Published on

  • Be the first to comment

  • Be the first to like this

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

  1. 1. разработчик интерфейсовJavaScriptв терминах БЭМВладимир ВаранкинРИТ++, Москва, 22 апреля 2013 г.
  2. 2. 3github.com/bem/rit-2013
  3. 3. В докладе рассказывается о написанииклиентского JavaScript
  4. 4. В докладе рассказывается о написанииклиентского JavaScriptЛюбые совпадения с реальными событиямиспециальны
  5. 5. БЭМ
  6. 6. bem.info7
  7. 7. БЭМ и JavaScript
  8. 8. БЭМ и JavaScriptОрганизация кода в проекте
  9. 9. The basic of Backbone are quite easy to learn. But soon you find that thereare not enough opinions there to know how to best structure your code.You will need to watch or read a few tutorials to learnsome best Backbone practices10A Comparison of Angular, Backbone,CanJS and Emberbit.ly/179Ojtc
  10. 10. Файловая структураproject/blocks/button/checkbox/input/radiobox/...11
  11. 11. Файловая структураproject/blocks/button/button.cssbutton.js...12
  12. 12. Файловая структураproject/blocks/button/button.cssbutton.doc.mdbutton.jsbutton.spec.js...13
  13. 13. Файловая структураproject/css/app.csslist.cssitem.cssjs/models/app.jslist.jsitem.jsviews/app.jslist.jsitem.jsroutes/...14
  14. 14. Файловая структураproject/css/app.csslist.cssitem.cssjs/models/app.jslist.jsitem.jsviews/app.jslist.jsitem.jsroutes/...15project/blocks/app/app.model.jsapp.view.jsapp.router.jslist/list.csslist.model.jslist.view.jsitem/item.cssitem.model.js...
  15. 15. Блок — это самодостаточныйкомпонентприложения16
  16. 16. БЭМ и JavaScripti-bem.js
  17. 17. i-bem.js• Кроссбраузерность (jQuery)18
  18. 18. i-bem.js• Кроссбраузерность (jQuery)– селекторы– события– AJAX– манипуляции с DOM– ...19
  19. 19. i-bem.js• Кроссбраузерность (jQuery)• Решение типичных задач создания веб-компонентов20
  20. 20. i-bem.js• Кроссбраузерность (jQuery)• Решение типичных задач создания веб-компонентов– связь HTML и JS– инициализация приложения– ...21
  21. 21. i-bem.js• Кроссбраузерность (jQuery)• Решение типичных задач создания веб-компонентов• JavaScript в БЭМ-терминах22
  22. 22. i-bem.js• Кроссбраузерность (jQuery)• Решение типичных задач создания веб-компонентов• JavaScript в БЭМ-терминах– „блок, помогающий делать другие блоки“23
  23. 23. i-bemПомощник для созданиядругих блоковbit.ly/12uO7Ub24
  24. 24. БЭМ и JavaScriptСтатичный HTMLи динамичный JavaScript
  25. 25. Императивный подход26
  26. 26. Что делать?Императивный подход27
  27. 27. Императивный подход<div id="app"><a>Do something</a></div>28
  28. 28. Императивный подход$(#app).on(click, a, function() {// logic...})29
  29. 29. Императивный подход$(#app).on(click, a, function() {$(this).fadeOut(normal,function() { ... })})30
  30. 30. Как делать?Декларативный подход32
  31. 31. Декларативный подход<script type="text/x-handlebars" data-template-name="app"><div><a {{action "doLogic"}}>Do something</a></div></script>33
  32. 32. Декларативный подход<html ng-app><body><div ng-controller="AppCtrl"><a ng-click="{{doLogic()}}">Do something</a></div></body></html>34
  33. 33. HTML — скучный статичныйформат35
  34. 34. HTML — скучный статичныйформат, но...36
  35. 35. Индексируется поисковикамиHTML37
  36. 36. Индексируется поисковикамиРаботает «везде» ;-)HTML38
  37. 37. Индексируется поисковикамиРаботает «везде»Работает «всегда» ;-)HTML39
  38. 38. <div class="app i-bem"><a class="app__controller">Do something</a></div>Декларативный подход с i-bem.js40
  39. 39. БЭМ и JavaScriptДекларация блока
  40. 40. Декларация блока42
  41. 41. Декларация блока в HTML<form class="search i-bem"><input class="search__input"/><button class="search__button">Найти</button><div>Например,<a class="search__sample"/>который час?</a></div></form>43
  42. 42. Декларация блока в JS44BEM.DOM.decl(// блок,// методы/свойства экземпляра блока,// статические методы/свойства блока)
  43. 43. Декларация блока в JS45BEM.DOM.decl(search,// методы/свойства экземпляра блока,// статические методы/свойства блока)
  44. 44. Декларация блока в JS46BEM.DOM.decl(search,{method: function() { }},{staticMethod: function() { }})
  45. 45. Декларация блока в JS47BEM.DOM.decl(search, {method: function() {this ⟶ указатель на блокthis.domNode ⟶ jQuery-узел блокаthis.__self ⟶ указатель на классthis.__self.staticMethod() ⟶ вызов ст. методаthis.method() ⟶ вызов собственного методаthis.params ⟶ параметры блока}})
  46. 46. БЭМ и JavaScriptИнициализация
  47. 47. Инициализация49BEM.DOM.init()
  48. 48. Инициализация50$(function() {BEM.DOM.init()})
  49. 49. Инициализация всей страницы?51
  50. 50. Инициализация52BEM.DOM.init([ctx])
  51. 51. 53
  52. 52. 54
  53. 53. 55
  54. 54. Динамическая инициализация56$.get(http://..., function(list) {BEM.DOM.update(.playlist, list)})
  55. 55. Destruct• Отписаться от событий58
  56. 56. Destruct• Отписаться от событий• Очистить ссылки на объекты59
  57. 57. Destruct• Отписаться от событий• Очистить ссылки на объекты• Удалить HTML-код60
  58. 58. Destruct61App.View = Backbone.View.extend({teardown: function() {// отписаться от событий в модели;// вызвать `teardown()` для вложенных вьюх;// очистить DOM...}})
  59. 59. Destruct62BEM.DOM.update(ctx, data)
  60. 60. Destruct63BEM.DOM.decl(player, {destruct: function() {// дополнительная очистка от мусора..}})
  61. 61. БЭМ и JavaScriptЛенивая инициализация блока
  62. 62. Ленивая инициализация65
  63. 63. Ленивая инициализация66
  64. 64. Ленивая инициализация67BEM.DOM.decl(search, {...}, {live: true})
  65. 65. Ленивая инициализация68BEM.DOM.decl(search, {...}, {live: function() {// условия инициализации}})
  66. 66. Ленивая инициализация69BEM.DOM.decl(search, {...}, {live: function() {this.liveInitOnEvent(click, fn)}})
  67. 67. БЭМ и JavaScriptСостояния инициализации
  68. 68. JavaScript отключен
  69. 69. JavaScript отключенJavaScript включен,но блок еще не инициализирован
  70. 70. JavaScript отключенJavaScript включен,но блок еще не инициализированJavaScript включен,блок инициализирован
  71. 71. Состояния инициализации74<form class="search i-bem"><!-- ... --></form>
  72. 72. Состояния инициализации75<form class="search search_js_inited i-bem"><!-- ... --></form>
  73. 73. Состояния инициализации76<html class="ua_js_no"><body><form class="search i-bem"><!-- ... --></form></body></html>
  74. 74. Состояния инициализации77<html class="ua_js_yes"><body><form class="search i-bem"><!-- ... --></form></body></html>
  75. 75. Состояния инициализации78/* search.css */.ua_js_no .search__sample {display: none}.ua_js_yes .search__clean {visibility: hidden;}.search_js_inited .search__clean {visibility: visible;}
  76. 76. БЭМ и JavaScriptВзаимодействие компонентов
  77. 77. Взаимодействие компонентов80<form class="search"><div>Например,<a class="search-sample"/>который час?</a></div></form>
  78. 78. Взаимодействие компонентов81$(.search).find(.search-sample)
  79. 79. Взаимодействие компонентов82App.SearchView = Backbone.View.extend({el: .search,events: {click .search-sample: doSmthg}})
  80. 80. Взаимодействие компонентов83App.SearchView = Backbone.View.extend({el: .search,events: {click .search-sample: doSmthg}})
  81. 81. Взаимодействие компонентов84<form class="search i-bem"><div>Например,<a class="search__sample"/>который час?</a></div></form>
  82. 82. Взаимодействие компонентов85BEM.DOM.decl(search, {method: function() {$(.search).find(.search__sample)this.elem(sample)}})
  83. 83. Селекторы86// поиск блока внутри контекстаthis.findBlockInside([elem], block)// поиск снаружи контекстаthis.findBlockOutside([elem], block)// поиск на БЭМ-узле текущего блокаthis.findBlockOn([elem], block)// поиск элементаthis.findElem([ctx], elem)// кеширующий поискthis.elem(elem)
  84. 84. БЭМ и JavaScriptРасширение функциональности
  85. 85. Расширение функциональности89// lib/search.jsSearchView = Backbone.View.extend({method: function() {// ...}})
  86. 86. Расширение функциональности90// lib/search.jsSearchView = Backbone.View.extend({method: function() { }})// search.jsAutoSearchView = SearchView.extend({method: function() {this.constructor.__super__.method.apply(this)}})
  87. 87. Расширение функциональности91// lib/search.jsSearchView = Ember.View.extend({method: function() { }})// search.jsSearchView.reopenClass({method: function() {this._super()}})
  88. 88. Расширение функциональности92/* lib/search.css */.search {background: #fc0;color: #000;margin: 0;}
  89. 89. Расширение функциональности93/* lib/search.css */.search {background-color: #fc0;color: #000;margin: 0;}/* search.css */.search {background: none;margin-right: 50px;}
  90. 90. Расширение функциональности94.search {background: none;margin: 0 50px 0 0;}.search {background-color: #fc0;color: #000;margin: 0;}
  91. 91. Расширение функциональности95// lib/search.jsBEM.DOM.decl(search, {method: function() { }})
  92. 92. Расширение функциональности96// lib/search.jsBEM.DOM.decl(search, {method: function() { }})// search.jsBEM.DOM.decl(search, {method: function() {this.__base()}})
  93. 93. БЭМ и JavaScriptО чем еще можно поговорить?
  94. 94. О чем еще можно поговорить?• Работа с модификаторами98
  95. 95. О чем еще можно поговорить?• Работа с модификаторами• Работа с событиями99
  96. 96. О чем еще можно поговорить?• Работа с модификаторами• Работа с событиями• Наследование блоков100
  97. 97. О чем еще можно поговорить?• Работа с модификаторами• Работа с событиями• Наследование блоков• Распределенные блоки101
  98. 98. О чем еще можно поговорить?• Работа с модификаторами• Работа с событиями• Наследование блоков• Распределенные блоки• Миксины102
  99. 99. О чем еще можно поговорить?• Работа с модификаторами• Работа с событиями• Наследование блоков• Распределенные блоки• Миксины• Инструменты сборки103
  100. 100. О чем еще можно поговорить?• Работа с модификаторами• Работа с событиями• Наследование блоков• Распределенные блоки• Миксины• Инструменты сборки• ...104
  101. 101. БЭМ и JavaScriptНастоящее и будущее?
  102. 102. github.com/bem/bem-blНастоящее106
  103. 103. 107 github.com/bem/bem-bl
  104. 104. Будущее108github.com/bem/bem-core
  105. 105. Заключение
  106. 106. Часть БЭМ-экосистемыi-bem.js110
  107. 107. Удобно писать сложный клиентский JSi-bem.js111
  108. 108. OpenSourcei-bem.js112
  109. 109. @bem_twfb.com/groups/bem.infogithub.com/bem113
  110. 110. Разработчик интерфейсовvarankinv@yandex-team.ruВладимир Варанкинgithub.com/narqoСпасибо

×