Skip to content

Instantly share code, notes, and snippets.

@pbroschwitz

pbroschwitz/index.html

Last active February 10, 2016 09:33
Show Gist options
  • Save pbroschwitz/5f24eb9eb3d3d9ac8ca6 to your computer and use it in GitHub Desktop.
Save pbroschwitz/5f24eb9eb3d3d9ac8ca6 to your computer and use it in GitHub Desktop.
Download ZIP
Classical Reuse Patterns / JavaScript
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Classical Pattern - Code Reuse 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">
<!-- 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>Code Reuse Pattern</h1>
<h3>Classical Pattern / Constructor Pattern</h3>
<ol>
<li class="fragment">Code Reuse is about reusing code. :)</li>
<li class="fragment">One important thing concerning Code Reuse is <strong class="fragment">inheritance.</strong>
<span class="fragment">We deal here </span><strong class="fragment">classical inheritance,</strong>
<span class="fragment">a better name is <strong class="fragment grow">constructor inheritance</strong></span>
</li>
</ol>
</section>
<section>
<p>Classical !== reliable / proven / trusted</p>
</section>
<section>
<section>
<p>JavaScript has not really classes</p>
<p class="fragment">but constructors.</p>
</section>
<section>
<h3>Classical vs. constructur</h3>
<iframe src="https://docs.google.com/document/d/1JecHV-xr4KBBfYW6SEJZIlu5Uf-AtJgEjIswyJTsE3w/edit?usp=sharing" width="600" 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>
<blockquote>The goal of constructor pattern is to have objects created by one constructor function <code class="hljs" style="display:inline">Child()</code> that come from another constructor <code class="hljs" style="display:inline">Parent()</code>.</blockquote>
</section>
<section>
<h3>In code</h3>
<a class="jsbin-embed" href="https://jsbin.com/tahequ/4/embed?js&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>Spoiling</h3>
<div style="height: 650px; overflow-y: scroll">
<table style="font-size:60%">
<thead>
<th style="width:150px">Pattern</th>
<th style="width:650px">Code</th>
</thead>
<tbody>
<tr>
<td>#1 Default</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
function inherit(C, P) {
C.prototype = new P();
}
</code></pre>
</td>
</tr>
<tr>
<td>#2 Rent-a-Constructor</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
function Child(name) {
Parent.apply(this, arguments);
}
</code></pre>
</td>
</tr>
<tr>
<td>#3</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
function Child(name) {
Parent.apply(this, arguments);
}
Child.prototype = new Parent();
</code></pre>
</td>
</tr>
<tr>
<td>#4 Share-the-Prototype</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
function inherit(C, P) {
C.prototype = P.prototype;
}
</code></pre>
</td>
</tr>
<tr>
<td>#5-1 Temporary / Default</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
}
</code></pre>
</td>
</tr>
<tr>
<td>#5-2 Temporary / Superclass</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
C.uber = P.prototype;
}
</code></pre>
</td>
</tr>
<tr>
<td>#5-3 Temporary / Holy Grail I</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
C.uber = P.prototype;
C.prototype.constructor = C;
}
</code></pre>
</td>
</tr>
<tr>
<td>#5-4 Temporary / Holy Grail IIFE</td>
<td>
<pre><code class="hljs" data-trim contenteditable>
var inherit = (function () {
var F = function () {};
return function (C, P) {
F.prototype = P.prototype;
C.prototype = new F();
C.uber = P.prototype;
C.prototype.constructor = C;
};
}());
</code></pre>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section>
<section>
<h3>Patterns - What to know else</h3>
<p></p>
</section>
<section>
<h3>JavaScript Weird Parts: `new` operator</h3>
<a class="jsbin-embed" href="https://jsbin.com/kemasi/7/edit?js,console&height=600px">JS Bin on jsbin.com</a>
<script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>own property vs. prototype property</h3>
<iframe src="https://docs.google.com/document/d/1976unlaH-NyDSF90RPT0rgRaI5q4BtKXFjo2Br6G7do/edit#heading=h.o1bca3q024jk" width="600" 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>
<h3>Function constructors</h3>
<ol>
<li>A normal function that is used to construct objects</li>
<li>The `this` variable points a new object</li>
<li>This new object is returned automatically</li>
<li><pre><code>var john = new Person('John', 'Doe');</code></pre>
</ol>
</section>
</section>
<section>
<h3>#1 Default Pattern</h3>
<a class="jsbin-embed" href="https://jsbin.com/somuhud/10/embed?js,console&height=600px">JS Bin on jsbin.com</a>
<script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>#2 Rent-a-constructor Pattern</h3>
<a class="jsbin-embed" href="https://jsbin.com/xahaca/1/embed?js,console&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>#3 Rent-and-Set-Prototype Pattern</h3>
<a class="jsbin-embed" href="https://jsbin.com/mokoxe/2/embed?js,console&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>#4 Share-the-Prototype Pattern</h3>
<a class="jsbin-embed" href="https://jsbin.com/tevuqu/10/embed?js,console&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>#5-1 Temporary Constructor - Default</h3>
<a class="jsbin-embed" href="https://jsbin.com/teruwi/9/embed?js,console&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>#5-2 Temporary Constructor - Superclass</h3>
<a class="jsbin-embed" href="https://jsbin.com/xijaqo/4/embed?js,console&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>#5-3 Resetting the Constructor Pointer / Holy Grail I</h3>
<a class="jsbin-embed" href="https://jsbin.com/yiwogo/3/embed?js,console&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</section>
<section>
<h3>#5-4 Resetting the Constructor Pointer / Holy Grail I</h3>
<a class="jsbin-embed" href="https://jsbin.com/zeheqi/6/embed?js,console&height=600px">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.9"></script>
</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,
transition: 'slide', // 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