Skip to content

Instantly share code, notes, and snippets.

@pbroschwitz

pbroschwitz/factory-pattern.html

Last active May 19, 2016 12:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pbroschwitz/c4bb987e7ce88be276cfdd9283bebf36 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pbroschwitz/c4bb987e7ce88be276cfdd9283bebf36 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
factory-pattern.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Factory Pattern</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<style type="text/css">
.reveal pre {
width: 100%;
}
.reveal td small {
vertical-align: middle;
}
.slides > section:not(.full-width) {
width: 960px;
padding-left: 50%;
margin-left: -480px;
}
</style>
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Factory Pattern</h1>
</section>
<section class="full-width">
<section>
<h2>Factory Pattern</h2>
<ul>
<li class="fragment">Ist ein `creational pattern`: es geht darum, Objekte zu erzeugen</li>
<li class="fragment">Ein `constructor` Aufruf wird nicht benötigt (`new`)</li>
</ul>
<pre class="fragment"><code class="hljs" data-trim contenteditable>
var productTeaser = Teaser.factory('Product');
</code></pre>
</section>
<section>
<h2>`new` Keyword</h2>
<iframe src="https://pbroschwitz.jsbin.com/yuwavi/1/edit?js,console" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
</section>
</section>
<section>
<h2>Wann Factory Pattern benutzen?</h2>
<ul>
<li class="fragment">Wenn man auf eine einfache Art Instanzen eines Objekts erzeugen will</li>
<li class="fragment">Wenn das Setup für Objekte oder Komponenten komplex ist</li>
<li class="fragment">Z.B. weil man viele kleine Objekte / Komponenten hat, die die gleichen Properties teilen</li>
</ul>
<p class="fragment" style="text-align:left"><small>nach <a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript">Addy Osmani</a></small></p>
</section>
<section class="full-width">
<h6>Aufbau (Osmani)</h6>
<table>
<tbody>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
function Car(options) {this.doors = options.doors; }
function Truck(options) {wheelSize = options.wheelSize; }
</code></pre>
</td>
<td><small>// Constructor / Parent</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
function VehicleFactory() {}
</code></pre>
</td>
<td><small>// Skeleton</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
VehicleFactory.prototype.vehicleClass = Car
</code></pre>
</td>
<td><small>// Prototype and default vehicle class</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
VehicleFactory.prototype.createVehicle = function(options) {
switch(options.vehicleType) {
case "car": this.vehicleClass = Car;
}
return new this.vehicleClass(options)
}
</code></pre>
</td>
<td><small>
// Factory method for creating new instances
</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
var carFactory = new VehicleFactory();
</code></pre>
</td>
<td><small>
// Instanciate
</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
var car = carFactory.createVehicle({
vehicleType: "car",
color: "yellow",
doors: 6
});
</code></pre>
</td>
<td><small>
// Creating a vehicle with the type `car`
</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
</code></pre>
</td>
<td><small>
</small></td>
</tr>
</tbody>
</table>
</section>
<section class="full-width">
<section>
<h3>Beispiel Osmani</h3>
<iframe src="https://pbroschwitz.jsbin.com/libuwu/10/edit?js,console" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
</section>
<section>
<h4>Links</h4>
<ul>
<li>Bin - <a href="https://pbroschwitz.jsbin.com/libuwu/10/edit?js,console" target="_blank">https://pbroschwitz.jsbin.com/libuwu/10/edit?js,console</a></li>
<li>Debug - <a href="https://output.jsbin.com/libuwu/10/" target="_blank">https://pbroschwitz.jsbin.com/libuwu/</a></li>
<li>Approach #1 - <a href="https://jsbin.com/xehumu/3/edit?js,console" target="_blank">https://jsbin.com/xehumu/3/edit?js,console</a></li>
<li>Approach #2 - <a href="https://jsbin.com/nucoje/2/edit?js,console" target="_blank">https://jsbin.com/nucoje/2/edit?js,console</a></li>
</ul>
</section>
</section>
<section class="full-width">
<section>
<h3>Beispiel Stefanov</h3>
<iframe src="https://pbroschwitz.jsbin.com/lawipa/7/edit?js,console" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
</section>
<section>
<h4>Links</h4>
<ul>
<li>Bin - <a href="https://pbroschwitz.jsbin.com/lawipa/7/edit?js,console" target="_blank">https://pbroschwitz.jsbin.com/lawipa/7/edit?js,console</a></li>
<li>Debug - <a href="https://output.jsbin.com/lawipa/" target="_blank">https://pbroschwitz.jsbin.com/lawipa/</a></li>
</ul>
</section>
<section class="full-width">
<h3>Aufbau (Stefanov)</h3>
<table>
<tbody>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
function CarMaker()
</code></pre>
</td>
<td><small>
// Skeleton, parent constructor
</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
CarMaker.prototype.drive = function () { return 'Doors' + this.doors; }
</code></pre>
</td>
<td><small>
// Prototype, Parent drive method
</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
CarMaker.factory = function(type) {
//....
CarMaker[type].prototype = new CarMaker();
newcar = new CarMaker[type]();
}
</code></pre>
</td>
<td><small>
// Factory method for creating new instances
</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
CarMaker.SUV = function () {
this.doors = 17;
};
</code></pre>
</td>
<td><small>
// Specific car types, see Constructors/Osmani
</small></td>
</tr>
<tr>
<td>
<pre><code class="hljs" data-trim contenteditable>
var cherokee = CarMaker.factory('SUV');
cherokee.drive();
</code></pre>
</td>
<td><small>
// Invoke factory
</small></td>
</tr>
</tbody>
</table>
</section>
</section>
<section>
<h2>Wann Factory Pattern NICHT benutzen?</h2>
<ul>
<li class="fragment">Das Factory Pattern ist eher ein überflüssiger Overload.</li>
<li class="fragment">Ausnahmen sind, wenn man Interfaces für Libraries oder Frameworks schreibt.</li>
<li class="fragment">Sonst bei Constructor Aufrufen bleiben. <span class="fragment">Sagt Osmani.</span></li>
<li class="fragment">Die Nachteile sind einfach die erhöhte Komplexität dieses Patterns</li>
<li class="fragment">Z.B. Unit Tests werden aufwendiger</li>
</ul>
<p class="fragment" style="text-align:left"><small>nach <a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript">Addy Osmani</a></small></p>
</section>
<section>
<a href="https://gist.github.com/pbroschwitz/c4bb987e7ce88be276cfdd9283bebf36" target="_blank">Gist with these slides</a>
<a href="https://gist.github.com/pbroschwitz/c4bb987e7ce88be276cfdd9283bebf36" target="_blank">https://gist.github.com/pbroschwitz/c4bb987e7ce88be276cfdd9283bebf36</a>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
width: '100%',
height: '100%',
transition: 'fade', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment