JavaScript-Design-Patterns/index.html at master · Dmitry-White/JavaScript-Design-Patterns · GitHub

History

150 lines (141 loc) · 7.2 KB

Raw

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

<head>

<title>Design Patterns</title>

</head>

<body>

<nav>

<a href="index.html" class="brand-logo center">Design Patterns</a>

<li><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>

<h2 class="center">Creational Patterns</h2>

<img alt="Prototype/Class Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547807.png">

</a>

<img alt="Constructor/Builder Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547797.png">

</a>

<img alt="Singleton Pattern"

src="http://3.bp.blogspot.com/-TRnuklh5yBc/Ubsvv_WHVpI/AAAAAAAAAhE/ygM-RCG03ro/s1600/Singleton.png">

</a>

<img alt="Factory Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547813.png">

</a>

</a>

</div>

</section>

<h2 class="center">Structural Patterns</h2>

<img alt="Module Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547799.png">

</a>

<img alt="Mixin Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547815.png">

</a>

<img alt="Facade Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547811.png">

</a>

<img alt="Flyweight Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547819.png">

</a>

<img alt="Decorator Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547817.png">

</a>

</div>

</section>

<h2 class="center">Behavioral Patterns</h2>

<img alt="Observer Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547801.png">

</a>

<img alt="State Pattern"

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">

</a>

<img alt="Chain of Responsibility Pattern"

src="https://www.oreilly.com/library/view/learning-php-design/9781449344900/httpatomoreillycomsourceoreillyimages1529792.png">

</a>

</a>

</a>

</a>

<img alt="Mediator Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547805.png">

</a>

<img alt="Command Pattern"

src="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1547809.png">

</a>

</div>

</section>

<h2 class="center">Miscellaneous Patterns</h2>

<img alt="Nested Ternaries"

src="https://i.ytimg.com/vi/oAEfKLI8iKk/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLByKxlMvpATANL249V__Lc6R_KpHQ">

</a>

<img alt="Router Pattern"

src="https://i.ytimg.com/vi/wjzl3M7-Wpw/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAq9dvfDnfAspQUpjTxcGGXEjLiuA">

</a>

<img alt="Enforcer Pattern"

src="https://i.ytimg.com/vi/H-L6BMD4hN8/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAJi31wouto08kJkmtrHBb0YtzZ5Q">

</a>

<img alt="Error Handling Pattern"

src="https://i.ytimg.com/vi/d5eyTy0QOgg/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCcpeGUXwOgKBh4KDgxBCZzY-Di5g">

</a>

<img alt="Null Object Pattern"

src="https://i.ytimg.com/vi/N23mqZBP0kQ/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLBTDeswRFlZfQCUL6JOZmQT34a3cQ">

</a>

</div>

</section>

const carouselHandler = () => {

const elems = document.querySelectorAll('.carousel');

M.Carousel.init(elems);

};

document.addEventListener('DOMContentLoaded', carouselHandler);

</script>

</body>

</html>

JavaScript-Design-Patterns/index.html at master · Dmitry-White/JavaScript-Design-Patterns · GitHub

Expand file tree

Breadcrumbs

index.html

Latest commit

History

Breadcrumbs

index.html

File metadata and controls