Javascript in a fishbowl

Transcript

1. JSĒINĒŃĒFISHBOWL HOWĒTOĒFEEDĒYOURĒFISHESĒWITHOUTĒPOLLUTINGĒTHEĒWŃTER © 2013 Matteo Carella
2. “Everything starts with bad water...”
3. BEFORE v a r s i z e W i d t h = $ ( ' # s i z e H e a d e r ' ) . o u t e r W i d t h ( ) ; v a r s i z e W i d t h N o P a d d i n g = $ ( ' # s i z e H e a d e r ' ) . w i d t h ( ) ; v a r s i z e T e x t W i d t h = $ ( ' . s i z e T e x t ' ) . w i d t h ( ) ; $ ( ' u l # s i z e s U l , u l # s i z e s U l l i ' ) . w i d t h ( s i z e W i d t h ) ; $ ( ' # s i z e H e a d e r ' ) . w i d t h ( s i z e W i d t h N o P a d d i n g ) ; $ ( ' . s i z e T e x t , u l # s i z e s U l l i s p a n ' ) . w i d t h ( s i z e T e x t W i d t h ) ; $ ( ' u l # s i z e s U l l i s p a n ' ) . o n ( ' c l i c k ' , f u n c t i o n ( ) { v a r s i z e T e x t = $ ( t h i s ) . h t m l ( ) ; $ ( ' . s i z e T e x t ' ) . h t m l ( s i z e T e x t ) ; } ) ;
4. OMGÂ
5. ŃFTER v a r $ s i z e H e a d e r = $ ( ' # s i z e H e a d e r ' ) , $ s i z e T e x t = $ ( ' . s i z e T e x t ' ) , $ s i z e s U l = $ ( ' # s i z e s U l ' ) , $ s i z e s U l L i = $ s i z e s U l . f i n d ( ' l i ' ) , $ s i z e s U l L i S p a n = $ s i z e s U l L i . f i n d ( ' s p a n ' ) , s i z e H e a d e r W i d t h = $ s i z e H e a d e r . w i d t h ( ) , s i z e H e a d e r O u t e r W i d t h = $ s i z e H e a d e r . o u t e r W i d t h ( ) , s i z e T e x t W i d t h = $ s i z e T e x t . w i d t h ( ) ; $ s i z e H e a d e r . w i d t h ( s i z e H e a d e r W i d t h ) ; $ s i z e s U l . a d d ( $ s i z e s U l L i ) . w i d t h ( s i z e H e a d e r O u t e r W i d t h ) ; $ s i z e T e x t . a d d ( $ s i z e s U l L i S p a n ) . w i d t h ( s i z e T e x t W i d t h ) ; $ s i z e H e a d e r . o n ( ' c l i c k ' , f u n c t i o n ( ) { $ s i z e s U l . s l i d e T o g g l e ( ) ; } ) ; $ s i z e s U l L i S p a n . o n ( ' c l i c k ' , f u n c t i o n ( ) { $ s i z e T e x t . h t m l ( $ ( t h i s ) . h t m l ( ) ) ; $ s i z e s U l L i . r e m o v e C l a s s ( ' h i d d e n ' ) ; $ ( t h i s ) . p a r e n t ( ) . a d d C l a s s ( ' h i d d e n ' ) ; } ) ;
8. Don't be a fish. Be a shark.
9. / / V A R C A C H I N G f i r s t = $ ( ' # f i r s t ' ) ; s e c o n d = $ ( ' # s e c o n d ' ) ; / / U S E A C O D I N G C O N V E N T I O N ( H U N G A R I A N N O T A T I O N ) v a r $ f i r s t = $ ( ' # f i r s t ' ) ; v a r $ s e c o n d = $ ( ' # s e c o n d ' ) , v a r v a l u e = $ f i r s t . v a l ( ) ;
10. / / S I N G L E V A R P A T T E R N ( p u t t i n g a t t h e e n d u n a s s i g n e d v a r s ) v a r $ f i r s t = $ ( ' # f i r s t ' ) , $ s e c o n d = $ ( ' # s e c o n d ' ) , v a l u e = $ f i r s t . v a l ( ) , k = 3 , c o o k i e s t r i n g = ' I M U S T U S E P R O M O T I O N E Q U A L S T R U E B E C A U S E T H E Y W O N T F I X A P I ' , i , j , m y A r r a y = { } ;
11. / / D O N ' T U S E D E P R E C A T E D M E T H O D S $ f i r s t . o n ( ' c l i c k ' , f u n c t i o n ( ) { $ f i r s t . c s s ( ' b o r d e r ' , ' 1 p x s o l i d r e d ' ) ; $ f i r s t . c s s ( ' c o l o r ' , ' b l u e ' ) ; } ) ; / / C O N D E N S J A V A S C R I P T $ f i r s t . o n ( ' c l i c k ' , f u n c t i o n ( ) { $ f i r s t . c s s ( { ' b o r d e r ' : ' 1 p x s o l i d r e d ' , ' c o l o r ' : ' b l u e ' } ) ; } ) ;
12. / / U S E C H A I N I N G $ s e c o n d . h t m l ( v a l u e ) ; $ s e c o n d . o n ( ' c l i c k ' , f u n c t i o n ( ) { a l e r t ( ' h e l l o e v e r y b o d y ' ) ; } ) . f a d e I n ( ' s l o w ' ) . a n i m a t e ( { h e i g h t : ' 1 2 0 p x ' } , 5 0 0 ) ; / / K E E P T H E C O D E R E A D A B L E $ s e c o n d . h t m l ( v a l u e ) ; $ s e c o n d . o n ( ' c l i c k ' , f u n c t i o n ( ) { a l e r t ( ' h e l l o e v e r y b o d y ' ) ; } ) . f a d e I n ( ' s l o w ' ) . a n i m a t e ( { h e i g h t : ' 1 2 0 p x ' } , 5 0 0 ) ;
14. SHORTCIRCUITING / / b a d f u n c t i o n i n i t V a r ( $ m y V a r ) { i f ( ! $ m y V a r ) { $ m y V a r = $ ( ' # s e l e c t o r ' ) ; } } / / b e t t e r f u n c t i o n i n i t V a r ( $ m y V a r ) { $ m y V a r = $ m y V a r | | $ ( ' # s e l e c t o r ' ) ; }
15. SHORTCUTS / / b a d i f ( c o l l e c t i o n . l e n g t h > 0 ) { . . } / / b e t t e r i f ( c o l l e c t i o n . l e n g t h ) { . . }
16. DETŃCHĒELEMENTSĒWHENĒDOINGĒMŃNIPULŃTIONS / / b a d v a r $ c o n t a i n e r = $ ( " # c o n t a i n e r " ) , $ c o n t a i n e r L i = $ ( " # c o n t a i n e r l i " ) , $ e l e m e n t = n u l l ; $ e l e m e n t = $ c o n t a i n e r L i . f i r s t ( ) ; / / . . . d o a l o t o f c o m p l i c a t e d t h i n g s / / b e t t e r v a r $ c o n t a i n e r = $ ( " # c o n t a i n e r " ) , $ c o n t a i n e r L i = $ c o n t a i n e r . f i n d ( " l i " ) , $ e l e m e n t = n u l l ; $ e l e m e n t = $ c o n t a i n e r L i . f i r s t ( ) . d e t a c h ( ) ; / / . . . d o a l o t o f c o m p l i c a t e d t h i n g s $ c o n t a i n e r . a p p e n d ( $ e l e m e n t ) ;
17. DŃTŃĒŃTTRIBUTES / / b a d $ ( ' # i d ' ) . d a t a ( k e y , v a l u e ) ; / / b e t t e r ( f a s t e r ) $ . d a t a ( ' # i d ' , k e y , v a l u e ) ;
18. BEĒSMŃRT / / b a d v a r $ s i z e s U l = $ ( ' # s i z e s U l ' ) , $ s i z e s U l L i = $ ( ' # s i z e s U l l i ' ) , $ s i z e s U l L i S p a n = $ ( ' # s i z e s U l l i s p a n ' ) ; / / b e t t e r ( f a s t e r ) v a r $ s i z e s U l = $ ( ' # s i z e s U l ' ) , $ s i z e s U l L i = $ s i z e s U l . f i n d ( ' l i ' ) , $ s i z e s U l L i S p a n = $ s i z e s U l L i . f i n d ( ' s p a n ' ) ;
19. Let's talk now about global pollution.
20. GOLDENĒRULES Don't introduce global variables. Don't introduce global functions (unless necessary). Make sure your code doesn't break the outside code.
21. Global vars. Global functions. Global pollution. WTF global means?
22. MEŃNSĒTHIS f u n c t i o n o r i g i n a l ( ) { c o n s o l e . l o g ( ' o r i g i n a l ' ) ; } f u n c t i o n f a k e ( ) { o r i g i n a l = f u n c t i o n ( ) { c o n s o l e . l o g ( ' f a k e ' ) ; } } $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { o r i g i n a l ( ) ; / / l o g s o r i g i n a l f a k e ( ) ; / / o v e r r i d e s o r i g i n a l o r i g i n a l ( ) ; / / l o g s f a k e } ) ;
23. FIRSTĀJS SECONDĀJS f u n c t i o n h e l l o ( ) { c o n s o l e . l o g ( " f i r s t " ) ; } $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { h e l l o ( ) ; } ) ; f u n c t i o n h e l l o ( ) { c o n s o l e . l o g ( " s e c o n d " ) ; } $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { h e l l o ( ) ; } ) ;
24. OURĒWEBPŃGE > s e c o n d , s e c o n d > f i r s t , f i r s t < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t >
25. WHŃTBSĒTHEĒDIFFERENCEĒBETWEENÅ f i s h = " n e m o " ; v a r f i s h = " n e m o " ;
26. EXŃMPLEĀJS v a r f i s h = " n e m o " ; / / g l o b a l $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { c o n s o l e . l o g ( " I a m r r r e a d y . " ) ; } ) ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { c o n s o l e . l o g ( " I a m r r r e a d y . " ) ; v a r f i s h = " n e m o " ; / / l o c a l } ) ;
27. Everything is attached to the global object. In the case of the web browser, that is the window object. In JavaScript, functions and variables are attributes of the global object, which we typically refer to as properties.
28. FIRSTĀJS SECONDĀJS v a r h e l l o = f u n c t i o n ( ) { c o n s o l e . l o g ( " f i r s t " ) ; } $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { h e l l o ( ) ; } ) ; v a r h e l l o = f u n c t i o n ( ) { c o n s o l e . l o g ( " s e c o n d " ) ; } $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { h e l l o ( ) ; } ) ;
29. OURĒWEBPŃGE > s e c o n d , s e c o n d > f i r s t , f i r s t < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t >
30. SŃMEĒOUTPUTĒŃSĒBEFORE HOLY FISH!
31. FIRSTĀJS SECONDĀJS $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { v a r h e l l o = f u n c t i o n ( ) { c o n s o l e . l o g ( " f i r s t " ) ; } h e l l o ( ) ; } ) ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { v a r h e l l o = f u n c t i o n ( ) { c o n s o l e . l o g ( " s e c o n d " ) ; } h e l l o ( ) ; } ) ;
32. OURĒWEBPŃGE > f i r s t , s e c o n d > s e c o n d , f i r s t < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t >
33. ŃŃŃŃHĀ Finally.
34. One useful technique to ensure that your variables and functions are self contained is to use an IIFE.
35. / / I I F E : i m m e d i a t e l y i n v o k e d f u n c e x p r e s s i o n ( f u n c t i o n ( ) { / / s t i l l m a n t a i n a c c e s s t o g l o b a l s / / p r i v a t e m e m b e r s r e t u r n { / / p u b l i c m e m b e r s } } ) ( ) ;
36. ( f u n c t i o n ( ) { / / v a r s d e c l a r a t i o n v a r d o S t u f f = f u n c t i o n ( a r g s ) { / / s o m e c o d e } r e t u r n { d o T h i n g s : f u n c t i o n ( a r g a , a r g b , a r g c ) { . . } , o t h e r F u n c t i o n : f u n c t i o n ( a r g s ) { v a r o u t p u t = d o S t u f f ( a r g s ) ; / / o t h e r c o d e } } } ) ( ) ;
37. It keeps code to a minimum. It provides a closure which prevents naming conflicts. It’s good for encapsulation. It’s good for garbage collection.
38. So... What about this?
39. FIRSTĀJS ( f u n c t i o n ( ) { v a r i n i t = f u n c t i o n ( ) { c o n s o l e . l o g ( ' f i r s t ' ) ; } ; i f ( t y p e o f $ M = = = ' u n d e f i n e d ' ) { $ M = { } ; } $ M . m o d u l e = i n i t ; } ) ( ) ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { $ M . m o d u l e ( ) ; } ) ;
40. SECONDĀJS ( f u n c t i o n ( ) { v a r i n i t = f u n c t i o n ( ) { c o n s o l e . l o g ( ' s e c o n d ' ) ; } ; i f ( t y p e o f $ M = = = ' u n d e f i n e d ' ) { $ M = { } ; } $ M . m o d u l e = i n i t ; } ) ( ) ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { $ M . m o d u l e ( ) ; } ) ;
41. OURĒWEBPŃGE > s e c o n d , s e c o n d > f i r s t , f i r s t < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / l i b . j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " j s / s e c o n d . j s " > < / s c r i p t > < s c r i p t s r c = " j s / f i r s t . j s " > < / s c r i p t >
42. OMGÂÂĒSTILLĒYOUÂÅ Yes, same namespace.
43. ŃĒQUICKĒRECŃP
44. / / G L O B A L S f u n c t i o n d o T h i n g s ( ) { c o n s o l e . l o g ( " d o t h i n g s " ) ; } v a r t h i n g s = " t h i n g s " ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { / / L O C A L S f u n c t i o n d o S t u f f ( ) { c o n s o l e . l o g ( " d o s t u f f " ) ; } v a r s t u f f = " s t u f f " ; } ) ;
45. So, again... What about this?
46. ( f u n c t i o n ( ) { t h i n g s = " t h i n g s " ; f u n c t i o n d o T h i n g s ( ) { c o n s o l e . l o g ( " d o t h i n g s " ) ; } } ) ( ) ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { c o n s o l e . l o g ( " l o a d e d " ) ; } ) ;
47. PLEŃSE Always put var before any declaration.
48. HOISTING undefined != not defined
49. $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { c o n s o l e . l o g ( $ e l ) ; / / u n d e f i n e d ( d e c l a r e d b u t u n a s s i g n e d ) c o n s o l e . l o g ( $ s o m e ) / / r e f e r e n c e e r r o r ( n o t d e f i n e d ) i f ( N a v i g a t i o n . S U B S E C T I O N = = " i n d e x " ) { v a r $ e l = $ ( ' # e l e m e n t ' ) ; } i f ( N a v i g a t i o n . S U B S E C T I O N = = " o r d e r s " ) { v a r $ n o d e = $ ( ' # n o d e ' ) ; } } ) ;
50. $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { v a r $ e l , $ n o d e ; / / d e c l a r a t i o n i f ( N a v i g a t i o n . S U B S E C T I O N = = " i n d e x " ) { $ e l = $ ( ' # e l e m e n t ' ) ; / / a s s i g n m e n t } i f ( N a v i g a t i o n . S U B S E C T I O N = = " o r d e r s " ) { $ n o d e = $ ( ' # n o d e ' ) ; / / a s s i g n m e n t } } ) ;
51. Functions are affected by hoisting too. But that is another story...
52. Questions? Ask Google :)
53. THŃNKĒYOUĀ Please, don't be an . Ask me before reusing these slides. Matteo Carella © 2013 ass