-
Notifications
You must be signed in to change notification settings - Fork 3
/
structural.html
184 lines (175 loc) · 9.11 KB
/
structural.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
<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 class="active"><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="module" 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/httpatomoreillycomsourceoreillyimages1547799.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Module Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s02.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Module Pattern<i class="material-icons right">close</i></span>
<p>
The Module pattern is used to further emulate the concept of classes in such a way that we’re able to include
both public/private methods and variables inside a single object, thus shielding particular parts from the
global scope. What this results in is a reduction in the likelihood of our function names conflicting with
other functions defined in additional scripts on the page. The disadvantages of the Module pattern are that,
as
we access both public and private members differently, when we wish to change visibility, we actually have to
make changes to each place the member was used.
We also can’t access private members in methods that are added to the object at a later point.
</p>
</div>
</div>
</section>
<section id="mixin" 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/httpatomoreillycomsourceoreillyimages1547815.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Mixin Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s13.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Mixin Pattern<i class="material-icons right">close</i></span>
<p>
Mixins are a great way to mix functions and instances of a class after they have been created.
We can look at inheriting from Mixins as a means of collecting functionality through extension.
Each new object we define has a prototype from which it can inherit further properties.
Prototypes can inherit from other object prototypes but, even more importantly,
can define properties for any number of object instances.
They can be viewed as objects with attributes and methods that can be easily shared across a number of other
object prototypes.
</p>
</div>
</div>
</section>
<section id="facade" 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/httpatomoreillycomsourceoreillyimages1547811.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Facade Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s09.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Facade Pattern<i class="material-icons right">close</i></span>
<p>
The Facade pattern provides a convenient higher-level interface to a larger body of code,
hiding its true underlying complexity.
Think of it as simplifying the API being presented to other developers,
something that almost always improves usability.
The Facade pattern both simplifies the interface of a class
and decouples the class from the code that uses it.
This gives us the ability to indirectly interact with subsystems in a way
that can sometimes be less prone to error than accessing the subsystem directly.
A Facade’s advantages include ease of use and
often a small-sized footprint in implementing the pattern.
</p>
</div>
</div>
</section>
<section id="flyweight" 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/httpatomoreillycomsourceoreillyimages1547819.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Flyweight Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s18.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Flyweight Pattern<i
class="material-icons right">close</i></span>
<p>
The Flyweight pattern is a classical structural solution for optimizing code
that is repetitive, slow, and inefficiently shares data.
It aims to minimize the use of memory in an application
by sharing as much data as possible with related objects.
Flyweight data sharing can involve taking several similar objects or data constructs
used by a number of objects and placing this data into a single external object.
We can pass through this object through to those depending on this data,
rather than storing identical data across each one.
</p>
</div>
</div>
</section>
<section id="decorator" 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/httpatomoreillycomsourceoreillyimages1547817.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Decorator Pattern<i class="material-icons right">more_vert</i>
</span>
<p><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s14.html">Addy
Osmani's Explanation</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Decorator Pattern<i
class="material-icons right">close</i></span>
<p>
Decorators offered the ability to add behavior to existing classes in a system dynamically.
The idea was that the decoration itself wasn’t essential to the base
functionality of the class; otherwise, it would be baked into the superclass itself.
They can be used to modify existing systems where we wish to add
additional features to objects without the need
to heavily modify the underlying code using them.
A common reason why developers use them is
that their applications may contain features requiring
a large quantity of distinct types of object.
</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="structural/module.js"></script>
<script src="structural/mixin.js"></script>
<script src="structural/facade.js"></script>
<script src="structural/flyweight.js"></script>
<script src="structural/decorator.js"></script>
</body>
</html>