1. Паттерны
проектирования
На Яндеск.Диске yadi.sk/d/ZIiCysb5CAmHo

2. Что такое паттерны?

3. 0 .v r p r e = { r c : f n t o t a e ) { }
1 a
asr
tae u c i n rc(
,
0. y:{,
2
y }
0. smos:{e r r :,r o "3" r g a "4" O "5" i p e n e s "6"
3
ybl_ " r o "2" o t :,p o r m :,E F :,s m l I v r e :,s
0. trias:{:e r r ,:E F ,4" O T N "1:C M E T ,6" P N B O
4
emnl_ 2" r o "5" O "1:C N E T ,5" O M N "1:O E _ L C
0. poutos:[,32,42,43,42,41,41,40,71,72,8
5
rdcin_ 0[,][,][,][,][,][,][,][,][,][,
0. promcin f n t o aoyosytx,yegylnn,yysae$,$
6
efrAto: u c i n nnmu(yetyln,yieoy,ytt,$_
0.
7
v r$ =$.egh-1
a 0
$lnt
;
0.
8
s i c (ytt){
w t h ysae
0.
9
c s 1 r t r $[01;b e k
a e : e u n $$-] r a ;
1.
0
c s 2 t i . =n wy.rgaNd(] $[0) b e k
ae : hs$
e yPormoe[, $$]; r a ;
1.
1
c s 3 t i . =n wy.rgaNd($$-] $[0) b e k
ae : hs$
e yPormoe$[02, $$]; r a ;
1.
2
c s 4 t i . =n wy.rgaNd($$-] [) b e k
ae : hs$
e yPormoe$[01, ]; r a ;
1.
3
c s 5 t i . =n wy.rgaNd($$];b e k
ae : hs$
e yPormoe$[0) r a ;
1.
4
c s 6 t i . =n wy.rgaNd(] [) b e k
ae : hs$
e yPormoe[, ]; r a ;
1.
5
…
1.
6
c s 4:t i . =[$$];b e k
ae 7 hs$
$[0] r a ;

4. Паттерны с нами уже
на протяжении 25 лет

10. Наследование

11. 11
Где-то в параллельной вселенной
0 .c a s P r n {
1 ls aet
0.
2
cntutrnm){
osrco(ae
0.
3
t i .ae=nm | " d m ;
h snm
ae | A a "
0.
4
}
0.
5
sy){
a(
0.
6
0.
7
0 .}
8
r t r t i .ae
e u n h snm;
}

12. 12
Где-то в параллельной вселенной
0 .c a s C i d e t n s P r n {
1 ls hl xed aet
0.
2
cntutrnm){
osrco(ae
0.
3
sprcntutrnm)
ue.osrco(ae;
0.
4
t i .adm=Mt.adm)
h srno
ahrno(;
0.
5
}
0.
6
sy){
a(
0.
7
0.
8
r t r sprsy)+" ( +t i .adm+" "
e u n ue.a(
"
h srno
);
}

13. Так будет в ECMAScript 6, но
это синтаксический сахар
clck.ru/8t2bL

14. 14
Всё можно свести к одной строчке
0 .f n t o i h r t C P {
1 u c i n nei(, )
0.
2
0 .}
3
Cpooye=n wP)
.rttp
e (;

15. 15
Тогда наши классы будут такими
0 .f n t o P r n ( a e {
1 u c i n aetnm)
0.
2
t i .ae=nm | " d m ;
h snm
ae | A a "
0 .}
3
0 .P r n . r t t p . a = f n t o ( {
4 aetpooyesy
ucin )
0.
5
r t r t i .ae
e u n h snm;
0 .}
6 ;
0 .f n t o C i d n m ) {
7 u c i n hl(ae }
0 .i h r t C i d P r n )
8 nei(hl, aet;

16. Цепочка прототипов после установления
наследования

17. 17
Никогда не делайте так!
0 .f n t o i h r t C P {
1 u c i n nei(, )
0.
2
0 .}
3
Cpooye=Ppooye
.rttp
.rttp;

18. Взаимоотношения при совместном
использовании одного прототипа

19. 19
Почти «серебряная пуля»
0 .v r i h r t = ( u c i n ( {
1 a nei
fnto )
0.
2
v rF=f n t o ( {;
a
ucin ) }
0.
3
r t r f n t o (,P {
eun ucin C )
0.
4
Fpooye=Ppooye
.rttp
.rttp;
0.
5
Cpooye=n wF)
.rttp
e (;
0.
6
C_bs =Ppooye
._ae
.rttp;
0.
7
Cpooyecntutr=C
.rttp.osrco
;
0.
8
}

20. 20
Тогда наши классы будут такими
0 .f n t o P r n ( a e {
1 u c i n aetnm)
0.
2
t i ._osrco.pl(h s agmns;
h s_cntutrapyt i , ruet)
0 .}
3
0 .P r n . r t t p . _ o s r c o = f n t o ( a e {
4 aetpooye_cntutr
u c i n nm)
0.
5
t i .ae=nm | " d m ;
h snm
ae | A a "
0 .}
6 ;
0 .P r n . r t t p . a = f n t o ( {
7 aetpooyesy
ucin )
0.
8
r t r t i .ae
e u n h snm;

21. 21
Тогда наши классы будут такими
0 .f n t o C i d n m ) {
1 u c i n hl(ae
0.
2
t i ._osrco.pl(h s agmns;
h s_cntutrapyt i , ruet)
0 .}
3
0 .C i d p o o y e _ c n t u t r = f n t o ( a e {
4 hl.rttp._osrco
u c i n nm)
0.
5
t i ._ae_cntutrapyt i ,agmns;
h s_bs._osrco.pl(h s ruet)
0 .}
6 ;

22. 22
А инстанции такими
0 .i h r t C i d P r n )
1 nei(hl, aet;
0 .v r c = n w C i d " v " ;
2 a
e hl(E a )
0 .c s y )
3 .a(
/ "v"
/ Ea
0 .c i s a c o C i d
4
n t n e f hl
/ tu
/ re
0 .c i s a c o P r n
5
n t n e f aet
/ tu
/ re
0 .c i s a c o O j c
6
n t n e f bet
/ tu
/ re

23. Цепочка прототипов после установления
наследования

24. Не изобретайте велосипедов
— используйте jQuery.inherit
clck.ru/8tj85

25. Модуль

26. 26
Действительно ли глобальные
переменные это плохо?
v ra=$" b d ".et" e l ";
a
(. o y )tx(H l o )

27. 27
Действительно ли глобальные
переменные это плохо?
0 .f n t o $ c u t r {
1 u c i n (one)
0.
2
cutr+
one+;
0.
3
i (one ==10 r t r t u ;
f cutr = 0) e u n r e
0.
4
r t r $cutr;
e u n (one)
0 .}
5 ;

28. 28
Действительно ли глобальные
переменные это плохо?
0 .( u c i n $ c u t r {
1 f n t o (one)
0.
2
cutr+
one+;
0.
3
i (one ==10 r t r t u ;
f cutr = 0) e u n r e
0.
4
r t r $cutr;
e u n (one)
0 .} ( )
5 )0;
0 .t p o $
6 yef ;
/ "neie" н н вI 68:
/ udfnd, о е
E - (

29. 29
Цели паттерна
— Минимизация числа глобальных переменных и функций
— Изолирование внутренних переменных
— Возможность изменения внутренней логики без изменния API
— Быстрый доступ до локальных переменных

30. 30
Является комбинацией нескольких
паттернов
— Пространство имен
— Немедленно вызываемая функция
— Частные и привилегированные члены

31. 31
0 .$ f . s o d r = ( u c i n ( , w n o ) {
1 .njlae
f n t o $ idw
0.
2
v rulapn ={;
a rMpig
}
0.
3
f n t o cetSrp(r){;
u c i n raecitsc }
0.
4
wno.nro =f n t o (s,ul ln){;
idwoerr
u c i nmg r, ie }
0.
5
r t r f n t o (r){
e u n u c i nsc
0.
6
ulapn[r]=sc
rMpigsc
r;
0.
7
cetSrp(r)
raecitsc;
0.
8
}
;
0 .} ( , t i )
9 )$ h s;
1 .$ f . s o d r " / a d x s / h r / n . h r . s )
0 .njlae(/ y n e . t s a e c t s a e j ";

32. Одиночка (Singleton)
clck.ru/8tByw

33. 33
0 .v r S n l t n = ( u c i n ( {
1 a igeo
fnto )
0.
2
v risac;
a ntne
0.
3
f n t o ii( {r t r {fo " a "} }
u c i n nt)
eun
o: b r ; ;
0.
4
rtr {
eun
0.
5
gtntne f n t o ( {
eIsac: u c i n )
0.
6
i (isac){isac =ii(;}
f !ntne
ntne
nt)
0.
7
r t r isac;
e u n ntne
0.
8
0.
9
}
}
;
1 .} ( ;
0 ))

34. 34
0 .v r s n l = S n l t n g t n t n e )
1 a ige
igeo.eIsac(;
0 .v r s n l 2 = S n l t n g t n t n e )
2 a ige
igeo.eIsac(;
0 .s n l = = s n l 2
3 ige = ige;
/ tu
/ re

35. Все модули в Node.js —
«Модули Одиночки»

36. Внедрение зависимостей
(Dependency injection)
clck.ru/8t8VE

37. 37
Цели паттерна
— Создание иерархии модулей и их зависимостей
— Возможность динамической загрузки модулей
— Разделение кода на слобосвязанные компоненты

38. 38
Используется
— RequireJS
— bem-core
— AngularJS
— COCAINE

39. 39
0 .m d l s d f n ( l g ' [ j u r ' ' n e s o e ]
1 oue.eie' o o , ' q e y , u d r c r ',
0.
2
f n t o (rvd,$ _ {
u c i npoie , )
0.
3
0.
4
$' l g '.nmt( oaiy 02 };
(. o o )aiae{ pct: .5 )
}
0 .)
5 ;
0 .t p o $
6 yef ;
/ "neie"
/ udfnd
0 .t p o _
7 yef ;
/ "neie"
/ udfnd

40. 40
0 .c c i e g t e v c s [ g o a e , u t a t ' ' o g n ' ,
1 oan.eSrie(' e b s '' a r i s ,l g i g ]
0 .f n t o ( e , a l g {
2 u c i ngou,o)
0.
3
v rsre =n wht.evrf n t o (e,rs{
a evr
e tpSre(u c i nrq e)
0.
4
rqo(e d ,f n t o ({
e.n' n ' u c i n)
0.
5
gorgo_drqhaes' - e l i ')
e.eini(e.edr[x r a - p ]
0.
6
.hnf n t o (eind{
te(u c i nrgoI)
0.
7
r t r gonmsrgoI)
e u n e.ae(eind
0.
8
0.
9
1.
0
}
)
}
)
}
)

41. Декоратор
clck.ru/8tC5t

47. 47
0 ./ r q r g o I — О р д л е i р г о а
1 / e.eind
пееям d еин
0 .a p u e r q i e ' / i d e a e e p e s r g o I ' ( o f g g o
2 p.s(eur(. m d l w r / x r s - e i n d )cni.e
0 ./ r q u t a t - О р д л л н е у т о с в
3 / e.aris
пееяеи срйта
0 .a p u e r q i e ' x r s - a r i s ) c n i . a r i s )
4 p.s(eur(e p e s u t a t '(ofgutat);
0 ./ r q l n d t c - О р д л н е я ы а
5 / e.ageet
пеееи зк
0 .a p u e r q i e ' x r s - a g e e t ) c n i . a g e e t )
6 p.s(eur(e p e s l n d t c '(ofglndtc);

48. jQuery мог бы быть
декоратором и очень на него
похож

49. Наблюдатель (Observer,
Publisher-Subscriber)

52. Все пользовательские события
в jQuery — Наблюдатели

53. 53
Резюме
— Существует множество различных паттернов
— Одни и теже задачи можно решать по-разному
— Всегда выбирайте решение наиболее подходящее вам

54. Используйте паттерны с умом

55. Спасибо
dench@yandex-team.ru
twitter.com/denchistyakov