-
Notifications
You must be signed in to change notification settings - Fork 3
/
behavioral.html
270 lines (257 loc) · 13.2 KB
/
behavioral.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Design Patterns</title>
</head>
<body>
<section id="header">
<nav>
<div class="nav-wrapper indigo">
<a href="index.html" class="brand-logo center">Design Patterns</a>
<ul class="left hide-on-med-and-down">
<li><a href="creational.html">Creational</a></li>
<li><a href="structural.html">Structural</a></li>
<li class="active"><a href="behavioral.html">Behavioral</a></li>
<li><a href="miscellaneous.html">Miscellaneous</a></li>
</ul>
</div>
</nav>
</section>
<section id="observer" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator"
src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547801.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Observer Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s05.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Observer Pattern<i
class="material-icons right">close</i></span>
<p>
The Observer is a design pattern in which an object (known as a subject)
maintains a list of objects depending on it (observers),
automatically notifying them of any changes to state.
When a subject needs to notify observers about something interesting happening,
it broadcasts a notification to the observers
(which can include specific data related to the topic of the notification).
When we no longer wish for a particular observer to be notified of changes
by the subject it is registered with,
the subject can remove it from the list of observers.
</p>
</div>
</div>
</section>
<section id="state" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/State_Design_Pattern_UML_Class_Diagram.svg/400px-State_Design_Pattern_UML_Class_Diagram.svg.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
State Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://en.wikipedia.org/wiki/State_pattern">Wikipedia Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">State Pattern<i class="material-icons right">close</i></span>
<p>
It is a behavioural design pattern that allows an object
to alter its behaviour based on changes to its internal state.
The object returned by a state pattern class seems to change its class.
It provides state-specific logic to a limited set of objects
in which each object type represents a particular state.
</p>
</div>
</div>
</section>
<section id="chain" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator"
src="https://www.oreilly.com/library/view/learning-php-design/9781449344900/httpatomoreillycomsourceoreillyimages1529792.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Chain of Responsibility Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-php-design/9781449344900/ch13.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Chain of Responsibility Pattern<i
class="material-icons right">close</i></span>
<p>
The Chain of Responsibility design pattern separates
the sender of a request from the receiver.
This avoids coupling of the requester and receiver.
Further, the pattern allows a request to be passed along a chain
to several different objects that have an opportunity to handle the request.
The sender doesn’t need to know which object handles the request,
and the object doesn’t need to know who sent the request.
There’s no coupling between the two.
</p>
</div>
</div>
</section>
<section id="iterator" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="https://www.dofactory.com/images/diagrams/javascript/javascript-iterator.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Iterator Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch12s05.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Iterator Pattern<i
class="material-icons right">close</i></span>
<p>
The Iterator is a design pattern in which iterators (objects that
allow us to traverse through all the elements of a collection)
access the elements of an aggregate object sequentially
without needing to expose its underlying form.
Iterators encapsulate the internal structure of how
that particular iteration occurs.
</p>
</div>
</div>
</section>
<section id="strategy" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="https://www.dofactory.com/images/diagrams/javascript/javascript-strategy.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Strategy Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.dofactory.com/javascript/strategy-design-pattern">Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Strategy Pattern<i
class="material-icons right">close</i></span>
<p>
The Strategy pattern encapsulates alternative algorithms (or strategies) for a particular task.
It allows a method to be swapped out at runtime by any other
method (strategy) without the client realizing it.
Essentially, Strategy is a group of algorithms that are interchangeable.
Compared to factory pattern as a creational pattern, strategy pattern is an operational pattern.
Put another way, a factory pattern is used to create objects of a specific type.
A strategy pattern is use to perform an operation (or set of operations) in a particular manner.
</p>
</div>
</div>
</section>
<section id="memento" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="https://www.dofactory.com/images/diagrams/javascript/javascript-memento.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Memento Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.dofactory.com/javascript/memento-design-pattern">Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Memento Pattern<i class="material-icons right">close</i></span>
<p>
The Memento pattern provides temporary storage as well as restoration of an object.
The mechanism in which you store the object’s state depends on
the required duration of persistence, which may vary.
You could view a database as an implementation of the Memento design pattern
in which objects are persisted and restored.
However, the most common reason for using this pattern is to capture a snapshot
of an object’s state so that any subsequent changes can be undone easily if necessary.
Essentially, a Memento is a small repository that stores an object’s state.
Scenarios in which you may want to restore an object into a state that existed previously include:
saving and restoring the state of a player in a computer game or
the implementation of an undo operation in a database.
In JavaScript Mementos are easily implemented by serializing and de-serializing objects with JSON.
</p>
</div>
</div>
</section>
<section id="mediator" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator"
src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547805.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Mediator Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s06.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Mediator Pattern<i
class="material-icons right">close</i></span>
<p>
The Mediator is a behavioral design pattern that allows us to expose a unified interface
through which the different parts of a system may communicate.
The Mediator pattern promotes loose coupling by ensuring
that instead of components referring to each other explicitly,
their interaction is handled through this central point.
This can help us decouple systems and improve the potential for component reusability.
A centralized controller is key to the success of this system,
and that’s really the role that the Mediator plays in software design
</p>
</div>
</div>
</section>
<section id="command" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator"
src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547809.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Command Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s08.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Command Pattern<i class="material-icons right">close</i></span>
<p>
The Command pattern aims to encapsulate method invocation, requests, or operations
into a single object and gives us the ability to both parameterize
and pass method calls around that can be executed at our discretion.
In addition, it enables us to decouple objects invoking the action
from the objects that implement them,
giving us a greater degree of overall flexibility in swapping out concrete classes (objects).
The general idea behind the Command pattern is that it provides us
a means to separate the responsibilities of issuing commands from anything executing commands,
delegating this responsibility to different objects instead.
</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="behavioral/observer.js"></script>
<script src="behavioral/state.js"></script>
<script src="behavioral/chain.js"></script>
<script src="behavioral/iterator.js"></script>
<script src="behavioral/strategy.js"></script>
<script src="behavioral/memento.js"></script>
<script src="behavioral/mediator.js"></script>
<script src="behavioral/command.js"></script>
</body>
</html>