20170327-wejs

Brief introduction of object oriented programming, especially encapsulation.

Transcript

1. Object oriented program in JavaScript We are JavaScripters #4 | Mar. 27th, 2017 | Mozilla Tech Speaker N.Shimizu (@chikoski)
2. The simplest counter program MFU
   DPVOUFS7BMVF
   
   
   XJOEPX
   
   
   BEE&WFOU-JTUFOFS DMJDL
   F
   
   DPVOUFS7BMVF  2
3. Function definition to show programmers' intention MFU
   DPVOUFS7BMVF
   
   
   GVODUJPO
   DPVOUVQ \
   
   
   DPVOUFS7BMVF 
   ^ 3
4. Easy understanding MFU
   DPVOUFS7BMVF
   
   
   DPVOUFS7BMVF 
   DPVOUFS7BMVF 
   DPVOUFS7BMVF  4 MFU
   DPVOUFS7BMVF
   
   
   DPVOUVQ 
   DPVOUVQ 
   DPVOUVQ 
5. Functions responsible to counter status management MFU
   DPVOUFS7BMVF
   
   
   GVODUJPO
   DPVOUVQ \
   
   
   DPVOUFS7BMVF 
   ^
   GVODUJPO
   JOJUJBMJ[F \
   
   
   DPVOUFS7BMVF
   
   
   ^
   GVODUJPO
   UP/VNCFS \
   
   
   SFUVSO
   DPVOUFS7BMVF
   ^ 5
6. Typical usage of added functions JOJUJBMJ[F 
   DPVOUVQ 
   DPVOUVQ 
   DPOTU
   OVN
   
   UP/VNCFS 
   DPOTPMFMPH AWJTJUPST
   
   \OVN^A  6
7. 7 DPVOUVQ DPVOUVQ DPVOUVQ DPVOUVQ JOJUJBMJ[F
8. 8      DPVOUVQ DPVOUVQ DPVOUVQ DPVOUVQ UP/VNCFS UP/VNCFS UP/VNCFS UP/VNCFS UP/VNCFS
9. Showing functions' responsibility by compositing to a object MFU
   DPVOUFS7BMVF
   
   
   DPOTU
   DPVOUFS
   
   \
   
   
   JOJUJBMJ[F
   GVODUJPO \DPVOUFS7BMVF
   
   ^
   
   
   DPVOUVQ
   GVODUJPO \DPVOUFS7BMVF ^
   
   
   UP/VNCFS \SFUVSO
   DPVOUFS7BMVF^
   ^ 9
10. A object can contain values as its attributes DPOTU
    DPVOUFS
    
    \
    
    
    WBMVF
    
    
    
    JOJUJBMJ[F
    GVODUJPO \
    DPVOUFSWBMVF
    
    
    ^
    
    
    DPVOUVQ
    GVODUJPO \
    DPVOUFSWBMVF 
    ^
    
    
    UP/VNCFS \
    SFUVSO
    DPVOUFSWBMVF^
    ^ 10
11. Much easier to understand JOJUJBMJ[F 
    DPVOUVQ 
    DPVOUVQ 
    DPOTU
    OVN
    
    UP/VNCFS 
    11 DPVOUFSJOJUJBMJ[F 
    DPVOUFSDPVOUVQ 
    DPVOUFSDPVOUVQ 
    DPOTU
    OVN
    
    
    
    DPVOUFSUP/VNCFS 
    
12. this: context of function calls DPOTU
    DPVOUFS
    
    \
    
    
    WBMVF
    
    
    
    JOJUJBMJ[F
    GVODUJPO \
    UIJTWBMVF
    
    
    ^
    
    
    DPVOUVQ
    GVODUJPO \
    UIJTWBMVF 
    ^
    
    
    UP/VNCFS \
    SFUVSO
    UIJTWBMVF
    ^
    ^ 12
13. apply: function call with specifying its context DPVOUFSDPVOUVQ 
    DPVOUFSDPVOUVQ 
    DPVOUFSUP/VNCFS 
    
    
    DPVOUFSUP/VNCFSBQQMZ DPVOUFS
    <> 
    
    
    DPVOUFSUP/VNCFSBQQMZ OVMM
    <> 
    
    
    
    
    DPVOUFSUP/VNCFSBQQMZ \WBMVF
    ^
    <> 
    
     13
14. Return updated object itself DPOTU
    DPVOUFS
    
    \
    
    
    WBMVF
    
    
    
    JOJUJBMJ[F
    GVODUJPO \
    
    
    
    
    
    DPVOUFSWBMVF
    
    
    SFUVSO
    UIJT^
    
    
    DPVOUVQ
    GVODUJPO \
    
    
    
    
    
    DPVOUFSWBMVF 
    SFUVSO
    UIJT^
    
    
    UP/VNCFS \
    SFUVSO
    DPVOUFSWBMVF
    SFUVSO
    UIJT^
    ^ 14
15. Method chain DPVOUFSJOJUJBMJ[F
    
    
    
    DPVOUVQ DPVOUVQ DPVOUVQ DPVOUVQ
    
    
    
    JOJUJBMJ[F
    
    
    
    DPVOUVQ DPVOUVQ
    
    
    
    UP/VNCFS 
    
     15
16. External view of counter 16 DPVOUFS JOJUJBMJ[F
    DPVOUVQ
    UP/VNCFS
17. Encapsulation: hiding objects' status implementation DPOTU
    DPVOUFS
    
    \
    
    
    WBMVF<>
    
    
    JOJUJBMJ[F
    GVODUJPO \
    
    
    
    
    UIJTWBMVF
    
    <>
    
    
    ^
    
    
    DPVOUVQ
    GVODUJPO \
    
    
    
    
    UIJTWBMVFQVTI USVF 
    
    
    ^
    
    
    UP/VNCFS \
    
    
    
    
    SFUVSO
    UIJTWBMVFMFOHUI
    
    
    ^
    ^ 17 DPOTU
    DPVOUFS
    
    \
    
    
    WBMVF
    
    
    
    JOJUJBMJ[F
    GVODUJPO \
    
    
    
    
    UIJTWBMVF
    
    
    
    
    ^
    
    
    DPVOUVQ
    GVODUJPO \
    
    
    
    
    UIJTWBMVF 
    
    
    ^
    
    
    UP/VNCFS \
    
    
    
    
    SFUVSO
    UIJTWBMVF
    
    
    ^
    ^ DPOTU
    DPVOUFS
    
    \
    
    
    BCDE
    
    
    
    JOJUJBMJ[F
    GVODUJPO \
    
    
    
    
    UIJTBCDE
    
    
    
    
    ^
    
    
    DPVOUVQ
    GVODUJPO \
    
    
    
    
    UIJTBCDE 
    
    
    ^
    
    
    UP/VNCFS \
    
    
    
    
    SFUVSO
    UIJTBCDE
    
    
    ^
    ^
18. Why Encapsulation: prevention against invalid values' assignment MFU
    DPVOUFS7BMVF
    
    
    
    TOJQ
    DPVOUFS7BMVF
    
    \NFTTBHF
    )FMMP
    XPSME^
    DPVOUVQ 
    
    8IBU
    IBQQFOT
    IFSF
    UP/VNCFS 
    
    8IBU
    IBQQFOT
    IFSF 18
19. How do we design API ➔ Factors ◆ Responsibility ◆ Number of objects ◆ Life time ◆ Relationship against other objects (has-a / has-many) ➔ Design pattern give you huge help 19
20. Design pattern: best practices in designing objects ➔ Command pattern ➔ Factory pattern / Factory method pattern ➔ Observer-Observable pattern ➔ Decorator pattern ➔ Composite pattern ➔ Adapter pattern ➔ Singleton pattern 20
21. Redux: Facade pattern x Factory pattern 21 IUUQRJJUBDPNLJJUBJUFNTBGCDGC
22. Wrap up: encapsulation is key idea for OOP ➔ Encapsulation allow us to ◆ Hide actual implementation of state management ◆ Provide API for others ➔ Design pattern is super helpful for ◆ Universal language of object design ◆ Understanding libraries' / someones' design ➔ this: a reference to context of function call 22