Сергей Бережной "Разные способы создания клиентских js-компонентов"
•
1 gefällt mir•1,451 views
Какие есть варианты для программирования интерактивной функциональности в браузере. Доклад-обзор – от самых простых и древних техник с использованием «чистого» JavaScript до множества современных подходов в разных фреймворках.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Yandex
Mehr von Yandex (20)
Сергей Бережной "Разные способы создания клиентских js-компонентов"
- 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 г.