Tweet
Tweet

Slide 1

Slide 1 text

Object oriented program in JavaScript We are JavaScripters #4 | Mar. 27th, 2017 | Mozilla Tech Speaker N.Shimizu (@chikoski)

Slide 2

Slide 2 text

The simplest counter program MFUDPVOUFS7BMVF XJOEPX BEE&WFOU-JTUFOFS DMJDL FDPVOUFS7BMVF  2

Slide 3

Slide 3 text

Function definition to show programmers' intention MFUDPVOUFS7BMVF GVODUJPODPVOUVQ \ DPVOUFS7BMVF  ^ 3

Slide 4

Slide 4 text

Easy understanding MFUDPVOUFS7BMVF DPVOUFS7BMVF  DPVOUFS7BMVF  DPVOUFS7BMVF  4 MFUDPVOUFS7BMVF DPVOUVQ  DPVOUVQ  DPVOUVQ 

Slide 5

Slide 5 text

Functions responsible to counter status management MFUDPVOUFS7BMVF GVODUJPODPVOUVQ \ DPVOUFS7BMVF  ^ GVODUJPOJOJUJBMJ[F \ DPVOUFS7BMVF ^ GVODUJPOUP/VNCFS \ SFUVSODPVOUFS7BMVF ^ 5

Slide 6

Slide 6 text

Typical usage of added functions JOJUJBMJ[F  DPVOUVQ  DPVOUVQ  DPOTUOVNUP/VNCFS  DPOTPMFMPH AWJTJUPST\OVN^A  6

Slide 7

Slide 7 text

7 DPVOUVQ DPVOUVQ DPVOUVQ DPVOUVQ JOJUJBMJ[F

Slide 8

Slide 8 text

8      DPVOUVQ DPVOUVQ DPVOUVQ DPVOUVQ UP/VNCFS UP/VNCFS UP/VNCFS UP/VNCFS UP/VNCFS

Slide 9

Slide 9 text

Showing functions' responsibility by compositing to a object MFUDPVOUFS7BMVF DPOTUDPVOUFS\ JOJUJBMJ[FGVODUJPO \DPVOUFS7BMVF^  DPVOUVQGVODUJPO \DPVOUFS7BMVF ^  UP/VNCFS \SFUVSODPVOUFS7BMVF^ ^ 9

Slide 10

Slide 10 text

A object can contain values as its attributes DPOTUDPVOUFS\ WBMVF  JOJUJBMJ[FGVODUJPO \DPVOUFSWBMVF^  DPVOUVQGVODUJPO \DPVOUFSWBMVF ^  UP/VNCFS \SFUVSODPVOUFSWBMVF^ ^ 10

Slide 11

Slide 11 text

Much easier to understand JOJUJBMJ[F  DPVOUVQ  DPVOUVQ  DPOTUOVNUP/VNCFS  11 DPVOUFSJOJUJBMJ[F  DPVOUFSDPVOUVQ  DPVOUFSDPVOUVQ  DPOTUOVN DPVOUFSUP/VNCFS 

Slide 12

Slide 12 text

this: context of function calls DPOTUDPVOUFS\ WBMVF  JOJUJBMJ[FGVODUJPO \UIJTWBMVF^  DPVOUVQGVODUJPO \UIJTWBMVF ^  UP/VNCFS \SFUVSOUIJTWBMVF^ ^ 12

Slide 13

Slide 13 text

apply: function call with specifying its context DPVOUFSDPVOUVQ  DPVOUFSDPVOUVQ  DPVOUFSUP/VNCFS  DPVOUFSUP/VNCFSBQQMZ DPVOUFS <>  DPVOUFSUP/VNCFSBQQMZ OVMM <>  DPVOUFSUP/VNCFSBQQMZ \WBMVF^ <>  13

Slide 14

Slide 14 text

Return updated object itself DPOTUDPVOUFS\ WBMVF  JOJUJBMJ[FGVODUJPO \ DPVOUFSWBMVFSFUVSOUIJT^  DPVOUVQGVODUJPO \ DPVOUFSWBMVF SFUVSOUIJT^  UP/VNCFS \SFUVSODPVOUFSWBMVFSFUVSOUIJT^ ^ 14

Slide 15

Slide 15 text

Method chain DPVOUFSJOJUJBMJ[F  DPVOUVQ DPVOUVQ DPVOUVQ DPVOUVQ  JOJUJBMJ[F  DPVOUVQ DPVOUVQ  UP/VNCFS  15

Slide 16

Slide 16 text

External view of counter 16 DPVOUFS JOJUJBMJ[F DPVOUVQ UP/VNCFS

Slide 17

Slide 17 text

Encapsulation: hiding objects' status implementation DPOTUDPVOUFS\ WBMVF<>  JOJUJBMJ[FGVODUJPO \ UIJTWBMVF<> ^  DPVOUVQGVODUJPO \ UIJTWBMVFQVTI USVF  ^  UP/VNCFS \ SFUVSO UIJTWBMVFMFOHUI ^ ^ 17 DPOTUDPVOUFS\ WBMVF  JOJUJBMJ[FGVODUJPO \ UIJTWBMVF ^  DPVOUVQGVODUJPO \ UIJTWBMVF  ^  UP/VNCFS \ SFUVSOUIJTWBMVF ^ ^ DPOTUDPVOUFS\ BCDE  JOJUJBMJ[FGVODUJPO \ UIJTBCDE ^  DPVOUVQGVODUJPO \ UIJTBCDE  ^  UP/VNCFS \ SFUVSOUIJTBCDE ^ ^

Slide 18

Slide 18 text

Why Encapsulation: prevention against invalid values' assignment MFUDPVOUFS7BMVF TOJQ DPVOUFS7BMVF\NFTTBHF)FMMP XPSME^ DPVOUVQ 8IBUIBQQFOTIFSF  UP/VNCFS 8IBUIBQQFOTIFSF 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Redux: Facade pattern x Factory pattern 21 IUUQRJJUBDPNLJJUBJUFNTBGCDGC

Slide 22

Slide 22 text

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