Your SlideShare is downloading. ×
Сергей Бережной "Разные способы создания клиентских js-компонентов"
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Сергей Бережной "Разные способы создания клиентских js-компонентов"

1,771
views

Published on

Какие есть варианты для программирования интерактивной функциональности в браузере. Доклад-обзор – от самых простых и древних техник с использованием «чистого» JavaScript до множества современных …

Какие есть варианты для программирования интерактивной функциональности в браузере. Доклад-обзор – от самых простых и древних техник с использованием «чистого» JavaScript до множества современных подходов в разных фреймворках.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,771
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Клиентские js-компоненты разные способы создания Сергей Бережной руководитель отдела разработки поисковых интерфейсов Я.Субботник, Москва, 28 июля 2012 года 1вторник, 31 июля 12 г.
  • 2. Что это? 2вторник, 31 июля 12 г.
  • 3. вторник, 31 июля 12 г.
  • 4. Что это? — HTML 4вторник, 31 июля 12 г.
  • 5. вторник, 31 июля 12 г.
  • 6. Что это? — HTML + JavaScript 6вторник, 31 июля 12 г.
  • 7. вторник, 31 июля 12 г.
  • 8. Что это? — HTML + JavaScript — история 8вторник, 31 июля 12 г.
  • 9. вторник, 31 июля 12 г.
  • 10. вторник, 31 июля 12 г.
  • 11. Что это? — JavaScript + HTML — история + Яндекс 11вторник, 31 июля 12 г.
  • 12. вторник, 31 июля 12 г.
  • 13. Что это? — JavaScript + HTML — история + Яндекс + другие ребята 13вторник, 31 июля 12 г.
  • 14. вторник, 31 июля 12 г.
  • 15. Что это? — JavaScript + HTML — история + Яндекс + другие ребята — полная всеобъемлющая энциклопедия 15вторник, 31 июля 12 г.
  • 16. Что это? — JavaScript + HTML — история + Яндекс + другие ребята — полная всеобъемлющая энциклопедия 16вторник, 31 июля 12 г.
  • 17. Для кого? 17вторник, 31 июля 12 г.
  • 18. Для кого? — разработчик, админ, тестировщик 18вторник, 31 июля 12 г.
  • 19. Для кого? — разработчик, админ, тестировщик 19вторник, 31 июля 12 г.
  • 20. вторник, 31 июля 12 г.
  • 21. Для кого? — разработчик — PHP, JavaScript, Ruby, Perl, Python 21вторник, 31 июля 12 г.
  • 22. Для кого? — разработчик — PHP, JavaScript, Ruby, Perl, Python 22вторник, 31 июля 12 г.
  • 23. Для кого? — разработчик — JavaScript — на сервере, в браузере 23вторник, 31 июля 12 г.
  • 24. Для кого? — разработчик — JavaScript — на сервере, в браузере 24вторник, 31 июля 12 г.
  • 25. Для кого? — разработчик — JavaScript — в браузере 25вторник, 31 июля 12 г.
  • 26. вторник, 31 июля 12 г.
  • 27. Old School 27вторник, 31 июля 12 г.
  • 28. вторник, 31 июля 12 г.
  • 29. вторник, 31 июля 12 г.
  • 30. вторник, 31 июля 12 г.
  • 31. вторник, 31 июля 12 г.
  • 32. Old School HTML <a href="http://passport.yandex.ru/..." onclick="return showLogin()"> 32вторник, 31 июля 12 г.
  • 33. Old School HTML <div id="login-form" ... > ... <form name="login" ... > ... </form> ... </div> 33вторник, 31 июля 12 г.
  • 34. Old School JavaScript dom = document.getElementById ? true : false; function showLogin() { if (dom && document.forms[login]) { document.getElementById(login-form) .style.display = block; return false; } else return true; } 34вторник, 31 июля 12 г.
  • 35. Old School 35вторник, 31 июля 12 г.
  • 36. Old School — плавная деградация без JavaScript 36вторник, 31 июля 12 г.
  • 37. Old School — плавная деградация без JavaScript — глобальные переменные 37вторник, 31 июля 12 г.
  • 38. вторник, 31 июля 12 г.
  • 39. Old School — плавная деградация без JavaScript — глобальные переменные — showLogin() 39вторник, 31 июля 12 г.
  • 40. Old School — плавная деградация без JavaScript — глобальные переменные — showLogin() — <form name="login"> 40вторник, 31 июля 12 г.
  • 41. Old School — плавная деградация без JavaScript — глобальные переменные — showLogin() — <form name="login"> — <div id="login-form"> 41вторник, 31 июля 12 г.
  • 42. Old School — плавная деградация без JavaScript — глобальные переменные — скрипты в <head> 42вторник, 31 июля 12 г.
  • 43. Old School — плавная деградация без JavaScript — глобальные переменные — скрипты в <head> — JavaScript начинает работу только от пользовательских действий 43вторник, 31 июля 12 г.
  • 44. Начать JavaScript «сразу» 44вторник, 31 июля 12 г.
  • 45. вторник, 31 июля 12 г.
  • 46. Начать JavaScript «сразу» — window onload 46вторник, 31 июля 12 г.
  • 47. Начать JavaScript «сразу» — window onload — вызов скриптов после HTML 47вторник, 31 июля 12 г.
  • 48. Начать JavaScript «сразу» — window onload — вызов скриптов после HTML — domready 48вторник, 31 июля 12 г.
  • 49. Начать JavaScript «сразу» — window onload — вызов скриптов после HTML — domready function r(f) { /in/.test(document.readyState) ? setTimeout(r( + f + ), 9) : f() } // http://www.dustindiaz.com/smallest-domready-ever/ 49вторник, 31 июля 12 г.
  • 50. jQuery-плагины 50вторник, 31 июля 12 г.
  • 51. вторник, 31 июля 12 г.
  • 52. jQuery-плагины docs.jquery.com/Plugins/Authoring $.fn.myPlugin = function() { ... }; 52вторник, 31 июля 12 г.
  • 53. jQuery-плагины docs.jquery.com/Plugins/Authoring $.fn.myPlugin = function() { this.fadeIn( normal, function() { ... }); }; 53вторник, 31 июля 12 г.
  • 54. jQuery-плагины docs.jquery.com/Plugins/Authoring $.fn.myPlugin = function() { this.fadeIn( normal, function() { ... }); }; $(#element).myPlugin(); 54вторник, 31 июля 12 г.
  • 55. jQuery-плагины docs.jquery.com/Plugins/Authoring — самостоятельно сохранять инициализированный js-объект в .data(myPlugin) 55вторник, 31 июля 12 г.
  • 56. jQuery-плагины docs.jquery.com/Plugins/Authoring — самостоятельно сохранять инициализированный js-объект в .data(myPlugin) $.fn.myPlugin = function() { return this.each(function() { var $this = $(this), data = $this.data(myPlugin); if (!data) { // init... $this.data(myPlugin, { /* ... */ }); } }}; 56вторник, 31 июля 12 г.
  • 57. jQuery-плагины docs.jquery.com/Plugins/Authoring — самостоятельно сохранять инициализированный js-объект в .data(myPlugin) — самостоятельно правильно деактивировать контрол 57вторник, 31 июля 12 г.
  • 58. jQuery-плагины docs.jquery.com/Plugins/Authoring — самостоятельно правильно деактивировать контрол $.fn.myPlugin = function() { return this.each(function() { var $this = $(this), data = $this.data(myPlugin); if (!data) { // init... $this.data(myPlugin, { destroy: function() { /* ... */ } }); } }}; 58вторник, 31 июля 12 г.
  • 59. Описание отдельно, использование отдельно 59вторник, 31 июля 12 г.
  • 60. вторник, 31 июля 12 г.
  • 61. вторник, 31 июля 12 г.
  • 62. вторник, 31 июля 12 г.
  • 63. Описание/использование $.fn.myPlugin = function() { // ... }; $(#element).myPlugin(); 63вторник, 31 июля 12 г.
  • 64. Описание/использование $.fn.myPlugin = function() { // ... }; $(#element).myPlugin({ // options... }); 64вторник, 31 июля 12 г.
  • 65. Декларативный подход 65вторник, 31 июля 12 г.
  • 66. вторник, 31 июля 12 г.
  • 67. Декларативный подход <input name="login" value=""/> 67вторник, 31 июля 12 г.
  • 68. Декларативный подход $.fn.myInput = function() { // ... }; $(input[name="login"]).myInput(); 68вторник, 31 июля 12 г.
  • 69. Декларативный подход <input name="login" value=""/> <input name="password" type="password" value=""/> 69вторник, 31 июля 12 г.
  • 70. Декларативный подход $.fn.myInput = function() { // ... }; $(input[name="login"]).myInput(); $(input[name="password"]).myInput(); 70вторник, 31 июля 12 г.
  • 71. Декларативный подход $.fn.myInput = function() { /*...*/ }; $(input[name="login"]).myInput({ validator: login }); $(input[name="password"]).myInput({ validator: password }); 71вторник, 31 июля 12 г.
  • 72. Декларативный подход — HTML — JS компонентов — JS связанный с HTML 72вторник, 31 июля 12 г.
  • 73. Декларативный подход — HTML — JS компонентов — JS связанный с HTML 73вторник, 31 июля 12 г.
  • 74. вторник, 31 июля 12 г.
  • 75. Связь HTML и JS 75вторник, 31 июля 12 г.
  • 76. вторник, 31 июля 12 г.
  • 77. вторник, 31 июля 12 г.
  • 78. Декларативный подход Связь HTML и JS <input class="myInput" name="login" value=""/> 78вторник, 31 июля 12 г.
  • 79. Декларативный подход Связь HTML и JS $.fn.myInput = function() { // ... }; $(function() { $(.myInput).myInput() }); 79вторник, 31 июля 12 г.
  • 80. Декларативный подход Связь HTML и JS $.fn.myInput = function() { /* ... */ }; $(function() { $(body).on(change, .myInput, function() { $(this).myInput() }) }); 80вторник, 31 июля 12 г.
  • 81. change не работает 81вторник, 31 июля 12 г.
  • 82. вторник, 31 июля 12 г.
  • 83. Декларативный подход Связь HTML и JS $.fn.myInput = function() { // ... }; $(function() { $(.myInput).myInput() }); 83вторник, 31 июля 12 г.
  • 84. Декларативный подход Связь HTML и JS: Параметры 84вторник, 31 июля 12 г.
  • 85. Декларативный подход Связь HTML и JS: Параметры <input class="myInput" data-validator="login" name="login" value=""/> 85вторник, 31 июля 12 г.
  • 86. Декларативный подход Связь HTML и JS: Параметры $.fn.myInput = function() { this.data(validator) === login }; 86вторник, 31 июля 12 г.
  • 87. Декларативный подход Связь HTML и JS: Параметры <input class="myInput" onclick="return { validator: login }" name="login" value=""/> 87вторник, 31 июля 12 г.
  • 88. Декларативный подход Связь HTML и JS: Параметры $.fn.myInput = function() { this[0].onclick().validator === login }; 88вторник, 31 июля 12 г.
  • 89. Декларативный подход Связь HTML и JS: Параметры <input class="myInput" onclick="return { validator: { ... } }" name="login" value=""/> 89вторник, 31 июля 12 г.
  • 90. Декларативный подход Связь HTML и JS: Параметры <input class="myInput" onclick="return { validator: function() { ... } }" name="login" value=""/> 90вторник, 31 июля 12 г.
  • 91. Декларативный подход Связь HTML и JS: Параметры <input class="myInput" onclick="return { validator: require(validators).login }" name="login" value=""/> 91вторник, 31 июля 12 г.
  • 92. вторник, 31 июля 12 г.
  • 93. Декларативный подход Связь HTML и JS $(function() { $(.myInput).myInput(); $(.myButton).myButton(); $(.myBlabla).myBlabla(); }); 93вторник, 31 июля 12 г.
  • 94. Декларативный подход Связь HTML и JS <input class="myInput js" data-component="myInput" data-validator="login" name="login" value=""/> 94вторник, 31 июля 12 г.
  • 95. Декларативный подход Связь HTML и JS $(function() { $(.js).each(function() { var $this = $(this); $this[$this.data(component)](); }) }) 95вторник, 31 июля 12 г.
  • 96. AJAX и динамическая инициализация 96вторник, 31 июля 12 г.
  • 97. Динамическая инициализация $.ajax({ url: ..., success: function(data) { $(body).append(data) } }) 97вторник, 31 июля 12 г.
  • 98. Динамическая инициализация $.fn.myInit = function() { this.find(.js).each(function() { var $this = $(this); $this[$this.data(component)](); }); return this; }) 98вторник, 31 июля 12 г.
  • 99. Динамическая инициализация $.ajax({ url: ..., success: function(data) { $(data) .myInit() .appendTo(body) } }) 99вторник, 31 июля 12 г.
  • 100. вторник, 31 июля 12 г.
  • 101. jQuery-плагины docs.jquery.com/Plugins/Authoring — самостоятельно правильно деактивировать контрол $.fn.myPlugin = function() { return this.each(function() { var $this = $(this), data = $this.data(myPlugin); if (!data) { // init... $this.data(myPlugin, { destroy: function() { /* ... */ } }); } }}; 101вторник, 31 июля 12 г.
  • 102. Динамическая инициализация $.fn.myDestroy = function() { this.find(.js).each(function() { var $this = $(this), name = $this.data(component); $this.data(name).destroy(); }); return this.remove(); }) 102вторник, 31 июля 12 г.
  • 103. вторник, 31 июля 12 г.
  • 104. Высокоуровневое API 104вторник, 31 июля 12 г.
  • 105. вторник, 31 июля 12 г.
  • 106. Высокоуровневое API — jQuery UI http://wiki.jqueryui.com/w/page/12138135/Widget%20factory 106вторник, 31 июля 12 г.
  • 107. Высокоуровневое API jQuery UI $.widget(my.component, {   _create: function() { /* ... */ },   destroy: function() { /* ... */ }   myMethod: function() { /* ... */ }, }); 107вторник, 31 июля 12 г.
  • 108. Высокоуровневое API jQuery UI $.widget(ui.dialog, $.ui.dialog, {   close: function() {     if(confirm(Close???)) {       this._super(close)     }   } }) 108вторник, 31 июля 12 г.
  • 109. Высокоуровневое API — jQuery UI wiki.jqueryui.com/w/page/12138135/Widget%20factory — i-bem.js clubs.ya.ru/bem/posts.xml?tag=68697803 109вторник, 31 июля 12 г.
  • 110. Высокоуровневое API i-bem.js BEM.DOM.decl( { block: my-dialog, baseBlock: dialog }, {    myMethod: function() { this.__base(); this.__self.myStaticMethod(); } }, { myStaticMethod: function() { /*...*/ } }); 110вторник, 31 июля 12 г.
  • 111. Итого 111вторник, 31 июля 12 г.
  • 112. вторник, 31 июля 12 г.
  • 113. Итого Было 113вторник, 31 июля 12 г.
  • 114. Итого Было — глобальные переменные и модульность 114вторник, 31 июля 12 г.
  • 115. Итого Было — глобальные переменные и модульность — инициализация + деактивация 115вторник, 31 июля 12 г.
  • 116. Итого Было — глобальные переменные и модульность — инициализация + деактивация — декларативный подход: связь html и js + проброс параметров 116вторник, 31 июля 12 г.
  • 117. Итого Было — глобальные переменные и модульность — инициализация + деактивация — декларативный подход: связь html и js + проброс параметров — ajax и динамическая инициализация 117вторник, 31 июля 12 г.
  • 118. Итого Было — глобальные переменные и модульность — инициализация + деактивация — декларативный подход: связь html и js + проброс параметров — ajax и динамическая инициализация — высокоуровневое API 118вторник, 31 июля 12 г.
  • 119. Итого Не было 119вторник, 31 июля 12 г.
  • 120. Итого Не было — зависимости: подгрузка и сборка 120вторник, 31 июля 12 г.
  • 121. Итого Не было — зависимости: подгрузка и сборка — сложные связи между компонентами 121вторник, 31 июля 12 г.
  • 122. Итого Не было — зависимости: подгрузка и сборка — сложные связи между компонентами — дата биндинги 122вторник, 31 июля 12 г.
  • 123. Итого Не было — зависимости: подгрузка и сборка — сложные связи между компонентами — дата биндинги — … 123вторник, 31 июля 12 г.
  • 124. вторник, 31 июля 12 г.
  • 125. Сергей Бережной руководитель отдела разработки поисковых интерфейсов veged@yandex-team.ru github.com/veged @veged 125вторник, 31 июля 12 г.
  • 126. Сложные связи между компонентами 126вторник, 31 июля 12 г.