-
Notifications
You must be signed in to change notification settings - Fork 3
/
creational.html
188 lines (179 loc) · 8.37 KB
/
creational.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
<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 class="active"><a href="creational.html">Creational</a></li>
<li><a href="structural.html">Structural</a></li>
<li><a href="behavioral.html">Behavioral</a></li>
<li><a href="miscellaneous.html">Miscellaneous</a></li>
</ul>
</div>
</nav>
</section>
<section id="prototype" 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/httpatomoreillycomsourceoreillyimages1547807.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Prototype/Class Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s07.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Prototype/Class Pattern<i
class="material-icons right">close</i></span>
<p>
Allows us to define a blueprint for a specific type of item and then reuse it by creating a new object from
that class.
Alternative: specify the kinds of objects to create using a prototypical instance,
and create new objects from the 'skeleton' of an existing object,
thus boosting performance and keeping memory footprints to a minimum.
</p>
</div>
</div>
</section>
<section id="constructor" 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/httpatomoreillycomsourceoreillyimages1547797.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Constructor/Builder Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s01.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Prototype/Class Pattern<i
class="material-icons right">close</i></span>
<p>
The constructor pattern is one step further from the class pattern,
where we leverage a class created to initiate a new extended class from it.
Alternative: Object constructors are used to create specific types of objects —
both preparing the object for use and accepting arguments which a constructor can use to set the values of
member
properties
and methods when the object is first created.
</p>
</div>
</div>
</section>
<section id="singleton" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator"
src="http://3.bp.blogspot.com/-TRnuklh5yBc/Ubsvv_WHVpI/AAAAAAAAAhE/ygM-RCG03ro/s1600/Singleton.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Singleton Pattern<i class="material-icons right">more_vert</i>
</span>
<p>
<a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s04.html">
Addy Osmani's Explanation
</a>
</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Singleton Pattern<i class="material-icons right">close</i>
</span>
<p>
Singleton pattern simply prevents our class from creating more than one instance of the blueprint we defined.
Alternative: The Singleton pattern is thus known because it restricts instantiation of a class to a single
object.
Classically, the Singleton pattern can be implemented by creating a class with a method
that creates a new instance of the class if one doesn’t exist.
In the event of an instance already existing, it simply returns a reference to that object.
</p>
</div>
</div>
</section>
<section id="factory" 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/httpatomoreillycomsourceoreillyimages1547813.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Factory Pattern<i class="material-icons right">more_vert</i>
</span>
<p>
<a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s10.html">
Addy Osmani's Explanation
</a>
</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Factory Pattern<i class="material-icons right">close</i>
</span>
<p>
Factory pattern is great when you want to create a mechanism to create other objects.
This can be useful when you want a factory to handle most of your classes
and then simply use this factory method to create new objects.
Alternative: The Factory pattern is another creational pattern concerned with the notion of creating objects.
Where it differs from the other patterns in its category is that it doesn’t explicitly require the use of a
constructor.
Instead, a Factory can provide a generic interface for creating objects,
where we can specify the type of factory object we wish to be created.
</p>
</div>
</div>
</section>
<section id="abstract-factory" style="width: 30%; margin: 20px; float: left;">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://kamalmeet.com/wp-content/uploads/2013/08/AbstractFactory.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Abstract Factory Pattern<i class="material-icons right">more_vert</i>
</span>
<p>
<a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s10.html">
Addy Osmani's Explanation
</a>
</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Abstract Factory Pattern<i class="material-icons right">close</i>
</span>
<p>
The Abstract Factory pattern allows you abstract factories themselves
and enables you to create multiple factories, classes etc.
Alternative: Abstract Factory pattern aims to
encapsulate a group of individual factories with a common goal.
It separates the details of implementation of a set of objects
from their general usage.
</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="creational/prototype-class.js"></script>
<script src="creational/constructor-builder.js"></script>
<script src="creational/singleton.js"></script>
<script src="creational/factory.js"></script>
<script src="creational/abstract-factory.js"></script>
</body>
</html>