-
Notifications
You must be signed in to change notification settings - Fork 1
/
structural.html
107 lines (81 loc) · 4.77 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
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title>IS 217 - structural js design patterns</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/cover.css" rel="stylesheet">
<!-- Javascript Design Pattern-->
<script type="text/javascript" src="js/facade_mediator.js"> </script>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">.js design patterns</h3>
<ul class="nav masthead-nav">
<li><a href="index.html"><span class="glyphicon glyphicon-home"> </span> home</a></li>
<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>
</ul>
</div>
</div>
<div class="inner cover" style="background-color:black;filter:alpha(opacity=70); opacity:0.58;">
<h1 class="cover-heading">Structural Design Patterns.</h1>
<p class="lead">
Structural patterns are concerned with object composition and typically identify simple ways
to realize relationships between different objects.
</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-success">Learn more</a>
</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Facade Design Pattern</h4>
<p>Just like the word "Facade", the design pattern purpose is to conceal a lower level line of code. This gives the user access to code but not able to change it. An example would be any JavaScript library framework. JQuery is a facade that provides the user with the ability to interact with different areas by making it more accessibile.</p>
<h4>Facade/Mediator Design Pattern Implementation</h4>
<p>The purpose of the implementations shows how a Facade and Mediator design patterns can work together. The first function creates an Superhero object that has characteristics
of any superhero. It contains the super heros name, power, weakness, and life points. The Facade is a function called AssignHeroDamage. AssignHeroDamage function lets the user handle the damage/life points the hero has taken.
This purpose for this Facade is so the user does not have to mess around of the low level details of the superhero object. There is also another Facade called HeroDetailStatus, the entire purpose is to fetch information about the superhero . The Mediator function is called ManageHero.
The mediator in this case brings the two facade function and validates the arguments passed to them. This prevents any failures when calling the functions.</p>
</div>
<div class="col-lg-6">
<h4>Mediator Design Pattern</h4>
<p>Just like a mediator, the design pattern purpose is to be the middle functionality that brings 2 or more functionality and controls the work flow.</p>
<h4>Link to code</h4>
<a href="js/facade_mediator.js">Link to JS</a>
</div>
</div>
</div> <!-- /container -->
<div class="mastfoot">
<div class="inner">
<p><a href="https://github.com/dg253" target="blank">David Garcia</a>, <a href="https://github.com/abartolo2" target="blank">Alex Bartolo.</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
</body>
</html>