[4Developers 2014] Wprowadzanie porządku w chaosie – Wzorce i JavaScript

Wzorce to uniwersalne, sprawdzone w praktyce rozwiązania często pojawiających się, powtarzalnych problemów. Ułatwiają one tworzenie, modyfikację oraz pielęgnację kodu źródłowego.

Ta prezentacja skupi się na wzorcach w kontekście języka JavaScript. W pierwszej kolejności pokazane zostaną najczęściej spotykane anty-wzorce oraz ich prawidłowe odpowiedniki. Oprócz tego przedstawione zostaną wzorce rozwiązujące najczęstsze wyzwania stojące przed deweloperami.

Transcript

1. Wprowadzanie porządku w chaosie – Wzorce i JavaScript Tomasz Pęczek | @tpeczek http://tpeczek.blogspot.com
2. Poglądy i stwierdzenia zawarte w tej prezentacji są moje własne i nie muszą odzwierciedlać poglądów mojego pracodawcy.
3. Rodzaje wzorców General Patterns Function Patterns Object Creation Patterns Code Reuse Patterns jQuery Patterns Design Patterns
4. General Patterns
5. Deklarowanie funkcji f u n c t i o n s o m e F u n c t i o n ( ) { . . . } v a r s o m e F u n c t i o n = f u n c t i o n ( ) { . . . } ; v a r s o m e F u n c t i o n = f u n c t i o n s o m e F u n c t i o n F ( ) { . . . } ;
6. Pętle "for ... in" v a r f i g u r e s = { s q u a r e s : 2 , t r i a n g l e s : 2 , c i r c l e s : 1 } ; f o r ( v a r f i g u r e i n f i g u r e s ) { c o n s o l e . l o g ( f i g u r e , ' : ' , f i g u r e s [ f i g u r e ] ) ; } v a r f i g u r e s = { s q u a r e s : 2 , t r i a n g l e s : 2 , c i r c l e s : 1 } ; f o r ( v a r f i g u r e i n f i g u r e s ) { i f ( f i g u r e s . h a s O w n P r o p e r t y ( f i g u r e ) ) { c o n s o l e . l o g ( f i g u r e , ' : ' , f i g u r e s [ f i g u r e ] ) ; } }
7. Ukryte rzutowanie v a r v a l u e = ' ' ; i f ( v a l u e = = 0 ) { . . . } v a r v a l u e = ' ' ; i f ( v a l u e = = = 0 ) { . . . }
8. Używanie funkcji eval s e t T i m e o u t ( " s o m e F u n c t i o n ( ) " , 1 0 0 0 ) ; s e t T i m e o u t ( " s o m e F u n c t i o n ( 1 , 2 , 3 ) " , 1 0 0 0 ) ; s e t T i m e o u t ( s o m e F u n c t i o n , 1 0 0 0 ) ; s e t T i m e o u t ( f u n c t i o n ( ) { s o m e F u n c t i o n ( 1 , 2 , 3 ) ; } , 1 0 0 0 ) ;
9. Używanie funkcji parseInt v a r v a l u e = " 0 1 0 " ; v a r p a r s e d V a l u e = p a r s e I n t ( v a l u e ) ; v a r v a l u e = " 0 1 0 " ; v a r p a r s e d V a l u e = p a r s e I n t ( v a l u e , 1 0 ) ;
10. Deklarowanie prywatnych zmiennych v a r s o m e F u n c t i o n = f u n c t i o n ( ) { v a r s o m e V a r i a b l e = s o m e O t h e r V a r i a b l e = 0 ; . . . } ; v a r s o m e F u n c t i o n = f u n c t i o n ( ) { v a r s o m e V a r i a b l e , s o m e O t h e r V a r i a b l e ; s o m e V a r i a b l e = s o m e O t h e r V a r i a b l e = 0 ; . . . } ;
11. Function Patterns
12. Rozgałęzianie kodu v a r r e g i s t e r E v e n t = f u n c t i o n ( t a r g e t E l e m e n t , e v e n t T y p e , e v e n t C a l l b a c k ) { i f ( w i n d o w . a d d E v e n t L i s t e n e r ) { t a r g e t E l e m e n t . a d d E v e n t L i s t e n e r ( e v e n t T y p e , e v e n t C a l l b a c k , f a l s e ) ; } e l s e i f ( w i n d o w . a t t a c h E v e n t ) { t a r g e t E l e m e n t . a t t a c h E v e n t ( " o n " + e v e n t T y p e , e v e n t C a l l b a c k ) ; } } ; i f ( w i n d o w . a d d E v e n t L i s t e n e r ) { v a r r e g i s t e r E v e n t = f u n c t i o n ( t a r g e t E l e m e n t , e v e n t T y p e , e v e n t C a l l b a c k ) { t a r g e t E l e m e n t . a d d E v e n t L i s t e n e r ( e v e n t T y p e , e v e n t C a l l b a c k , f a l s e ) ; } ; } e l s e i f ( w i n d o w . a t t a c h E v e n t ) { v a r r e g i s t e r E v e n t = f u n c t i o n ( t a r g e t E l e m e n t , e v e n t T y p e , e v e n t C a l l b a c k ) { t a r g e t E l e m e n t . a t t a c h E v e n t ( ' o n ' + e v e n t T y p e , e v e n t C a l l b a c k ) ; } ; }
13. Cachowanie na obiekcie funkcji v a r s o m e F u c t i o n = f u n c t i o n ( p a r a m e t e r V a l u e ) { i f ( ! s o m e F u c t i o n . c a c h e [ p a r a m e t e r V a l u e ] ) { v a r r e s u l t = { } ; . . . s o m e F u c t i o n . c a c h e [ p a r a m e t e r V a l u e ] = r e s u l t ; } r e t u r n s o m e F u c t i o n . c a c h e [ p a r a m e t e r V a l u e ] ; } ; s o m e F u c t i o n . c a c h e = { } ; v a r s o m e F u c t i o n = f u n c t i o n ( p a r a m e t e r V a l u e ) { i f ( ! s o m e F u c t i o n . c a c h e . h a s O w n P r o p e r t y ( p a r a m e t e r V a l u e ) ) { v a r r e s u l t = { } ; . . . s o m e F u c t i o n . c a c h e [ p a r a m e t e r V a l u e ] = r e s u l t ; } r e t u r n s o m e F u c t i o n . c a c h e [ p a r a m e t e r V a l u e ] ; } ; s o m e F u c t i o n . c a c h e = { } ;
14. Samomodyfikująca się funkcja v a r s e l f O v e r w r i t i n g F u n c t i o n = f u n c t i o n ( ) { v a r c u r r e n t C o u n t e r V a l u e = 1 ; s e l f O v e r w r i t i n g F u n c t i o n = f u n c t i o n ( ) { r e t u r n + + c u r r e n t C o u n t e r V a l u e ; } ; r e t u r n c u r r e n t C o u n t e r V a l u e ; } ;
15. "Leniwa" funkcja v a r l a z y F u n c t i o n = f u n c t i o n ( ) { v a r c o m p l i c a t e d O p e r a t i o n R e s u l t = { } ; . . . l a z y F u n c t i o n = f u n c t i o n ( ) { r e t u r n c o m p l i c a t e d O p e r a t i o n R e s u l t ; } ; r e t u r n l a z y F u n c t i o n ( ) ; } ;
16. Object Creation Patterns
17. Bezpośrednie przypisanie v a r s o m e N a m e s p a c e = { } ; s o m e N a m e s p a c e . v a r i a b l e = 0 ; s o m e N a m e s p a c e . n e x t V a l u e = f u n c t i o n ( ) { r e t u r n t h i s . v a r i a b l e + + ; } ; s o m e N a m e s p a c e . r e s e t V a l u e = f u n c t i o n ( ) { t h i s . v a r i a b l e = 0 ; } ;
18. Object Literal Notation v a r s o m e N a m e s p a c e = { v a r i a b l e : 0 , n e x t V a l u e : f u n c t i o n ( ) { r e t u r n t h i s . v a r i a b l e + + ; } , r e s e t V a l u e : f u n c t i o n ( ) { t h i s . v a r i a b l e = 0 ; } } ;
19. Module Pattern v a r s o m e N a m e s p a c e = ( f u n c t i o n ( ) { v a r v a r i a b l e = 0 ; r e t u r n { n e x t V a l u e : f u n c t i o n ( ) { r e t u r n v a r i a b l e + + ; } , r e s e t V a l u e : f u n c t i o n ( ) { v a r i a b l e = 0 ; } } ; } ) ( ) ;
20. Dynamiczny kontekst v a r s o m e N a m e s p a c e = { } ; ( f u n c t i o n ( d y n a m i c N a m e s p a c e ) { v a r v a r i a b l e = 0 ; d y n a m i c N a m e s p a c e . n e x t V a l u e = f u n c t i o n ( ) { r e t u r n v a r i a b l e + + ; } ; d y n a m i c N a m e s p a c e . r e s e t V a l u e = f u n c t i o n ( ) { v a r i a b l e = 0 ; } ; } ) ( s o m e N a m e s p a c e ) ;
21. Chaining Pattern v a r s o m e C h a i n e d O b j e c t = ( f u n c t i o n ( ) { v a r v a r i a b l e = 1 ; r e t u r n { i n c r e m e n t : f u n c t i o n ( ) { v a r i a b l e + + ; r e t u r n t h i s ; } , a d d : f u n c t i o n ( v a l u e ) { v a r i a b l e + = v a l u e ; r e t u r n t h i s ; } , s h o u t : f u n c t i o n ( ) { c o n s o l e . l o g ( v a r i a b l e ) ; } } ; } ) ( ) ; s o m e C h a i n e d O b j e c t . i n c r e m e n t ( ) . a d d ( 9 9 ) . s h o u t ( ) ;
22. Code Reuse Patterns
23. "Pożyczanie" konstruktora f u n c t i o n P a r e n t ( v a l u e ) { t h i s . v a l u e = v a l u e | | ' T e s t V a l u e ' ; } P a r e n t . p r o t o t y p e . g e t V a l u e = f u n c t i o n ( ) { r e t u r n t h i s . v a l u e ; } ; f u n c t i o n C h i l d ( v a l u e ) { P a r e n t . a p p l y ( t h i s , a r g u m e n t s ) ; } v a r s o m e O b j e c t = n e w C h i l d ( ' A n o t h e r V a l u e ' ) ; c o n s o l e . l o g ( s o m e O b j e c t . v a l u e ) ; / / - - > " A n o t h e r V a l u e " c o n s o l e . l o g ( t y p e o f s o m e O b j e c t . g e t V a l u e ) ; / / - - > " u n d e f i n e d "
24. "Wsółdzielenie" prototypu f u n c t i o n P a r e n t ( v a l u e ) { t h i s . v a l u e = v a l u e | | ' T e s t V a l u e ' ; } P a r e n t . p r o t o t y p e . g e t V a l u e = f u n c t i o n ( ) { r e t u r n t h i s . v a l u e ; } ; f u n c t i o n C h i l d ( v a l u e ) { } v a r i n h e r i t = f u n c t i o n ( c h i l d , p a r e n t ) { c h i l d . p r o t o t y p e = p a r e n t . p r o t o t y p e ; } ; i n h e r i t ( C h i l d , P a r e n t ) ; v a r s o m e O b j e c t = n e w C h i l d ( ' A n o t h e r V a l u e ' ) ; c o n s o l e . l o g ( s o m e O b j e c t . v a l u e ) ; / / - - > " u n d e f i n e d " c o n s o l e . l o g ( t y p e o f s o m e O b j e c t . g e t V a l u e ) ; / / - - > " f u n c t i o n "
25. Pożyczanie i współdzielenie jednocześnie f u n c t i o n P a r e n t ( v a l u e ) { t h i s . v a l u e = v a l u e | | ' T e s t V a l u e ' ; } P a r e n t . p r o t o t y p e . g e t V a l u e = f u n c t i o n ( ) { r e t u r n t h i s . v a l u e ; } ; f u n c t i o n C h i l d ( v a l u e ) { P a r e n t . a p p l y ( t h i s , a r g u m e n t s ) ; } C h i l d . p r o t o t y p e = P a r e n t . p r o t o t y p e ; v a r s o m e O b j e c t = n e w C h i l d ( ' A n o t h e r V a l u e ' ) ; c o n s o l e . l o g ( s o m e O b j e c t . v a l u e ) ; / / - - > " A n o t h e r V a l u e " c o n s o l e . l o g ( t y p e o f s o m e O b j e c t . g e t V a l u e ) ; / / - - > " f u n c t i o n "
26. Dziedziczenie z instancji obiektu poprzez prototyp f u n c t i o n P a r e n t ( v a l u e ) { t h i s . v a l u e = v a l u e | | ' T e s t V a l u e ' ; } P a r e n t . p r o t o t y p e . g e t V a l u e = f u n c t i o n ( ) { r e t u r n t h i s . v a l u e ; } ; v a r c r e a t e I n h e r i t e d O b j e c t = f u n c t i o n ( p a r e n t ) { f u n c t i o n C h i l d ( ) { } C h i l d . p r o t o t y p e = p a r e n t ; r e t u r n n e w C h i l d ( ) ; } ; v a r p a r e n t O b j e c t = n e w P a r e n t ( ' A n o t h e r V a l u e ' ) ; v a r c h i l d O b j e c t = c r e a t e I n h e r i t e d O b j e c t ( p a r e n t O b j e c t ) ; c o n s o l e . l o g ( c h i l d O b j e c t . v a l u e ) ; / / - - > " A n o t h e r V a l u e " c o n s o l e . l o g ( t y p e o f c h i l d O b j e c t . g e t V a l u e ) ; / / - - > " f u n c t i o n "
27. Kopiowanie obiektów (1) v a r c r e a t e S h a l l o w C o p y = f u n c t i o n ( o r i g i n a l , c o p y ) { v a r p r o p e r t y ; c o p y = c o p y | | { } ; f o r ( p r o p e r t y i n o r i g i n a l ) { i f ( o r i g i n a l . h a s O w n P r o p e r t y ( p r o p e r t y ) ) { c o p y [ p r o p e r t y ] = o r i g i n a l [ p r o p e r t y ] ; } } r e t u r n c o p y ; } ;
28. Kopiowanie obiektów (2) v a r c r e a t e D e e p C o p y = f u n c t i o n c r e a t e D e e p C o p y F ( o r i g i n a l , c o p y ) { v a r p r o p e r t y ; v a r t o S t r = O b j e c t . p r o t o t y p e . t o S t r i n g ; v a r a r r a y S t r = " [ o b j e c t A r r a y ] " ; c o p y = c o p y | | { } ; f o r ( p r o p e r t y i n o r i g i n a l ) { i f ( o r i g i n a l . h a s O w n P r o p e r t y ( p r o p e r t y ) ) { i f ( t y p e o f p a r e n t [ p r o p e r t y ] = = = ' o b j e c t ' ) { c o p y [ p r o p e r t y ] = ( t o S t r . c a l l ( p a r e n t [ p r o p e r t y ] ) = = = a r r a y S t r ) ? [ ] : { } ; c r e a t e D e e p C o p y F ( o r i g i n a l [ p r o p e r t y ] , c o p y [ p r o p e r t y ] ) ; } e l s e { c o p y [ p r o p e r t y ] = o r i g i n a l [ p r o p e r t y ] ; } } } r e t u r n c o p y ; }
29. Dziękuję QA Session