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