Add source for decorator, iterator and observer

robdodson · robdodson · commit 4d6294aadca5 · 2012-08-29T09:03:28.000-07:00
Update README
diff --git a/README.md b/README.md
@@ -7,14 +7,14 @@
 - Factory Method
 - Object Pool
 - Prototype
-- Singleton
+- [Singleton](http://robdodson.me/blog/2012/08/08/javascript-design-patterns-singleton/)
 
 ## Structural
 
 - Adapter
 - Bridge
 - Composite
-- Decorator
+- [Decorator](http://robdodson.me/blog/2012/08/27/javascript-design-patterns-decorator/)
 - Facade
 - Flyweight
 - Private Class Data
@@ -25,15 +25,21 @@
 - Chain of Responsibility
 - Command
 - Interpreter
-- Iterator
+- [Iterator](http://robdodson.me/blog/2012/08/10/javascript-design-patterns-iterator/)
 - Mediator
 - Memento
 - Null Object
-- Observer
+- [Observer](http://robdodson.me/blog/2012/08/16/javascript-design-patterns-observer/)
 - State
-- Strategy
+- [Strategy](http://robdodson.me/blog/2012/08/03/javascript-design-patterns-strategy/)
 - Template Method
 - Visitor
 - Monad Pattern / Promises
 
+It occurred to me that I’ve always wanted to go through the Gang of Four book and just write my own interpretation of each pattern. Since I’m currently working primarily in JavaScript I thought it might be an interesting challenge to convert their examples, often in strongly typed languages, to something as dynamic and loosey-goosey as JS.
+
+I know there are a lot of people out there who aren’t too keen on design patterns but that’s not to say that they shouldn’t be used or studied. There’s a lot of code out there that starts with jQuery.click() or addEventListener or .on() and all of them are implementations of the Observer pattern. Finding this reusable approach is the main point of patterns and along with it comes a shared vocabulary that can be passed on to other developers. Rather than saying “Let’s defer the methods of our object that are subject to change to well encapsulated algorithms.” We can just say “A Strategy pattern might be nice here.”
+
+Patterns should be used with caution as not everything fits so neatly into their paradigms. It’s often said that a beginner never met a pattern he didn’t like. In my experiences I’ve been burned by pattern overuse and at other times they have legitimately saved my ass. It’s also true that many patterns don’t really work or aren’t appropriate for particular languages. For instance, the GoF book was written primarily for languages which shared features of C++ and SmallTalk. I totally agree with this sentiment but I feel like along the way we’ll discover what does and doesn’t make sense in a dynamic language like JS and hopefully we can toss in some new patterns of our own. Already to the list I’ve added Promises which I use quite frequently and find to be a wonderful alternative to JavaScript’s oft seen pyramid of callbacks. Again, this is all about learning and experimenting. In my opinion a good understanding of design patterns is a threshold that needs to be crossed at some point in your career. I’m committed to doing this twice a week for the next several weeks so hopefully by the end of it we’ll have a useful resource that others can benefit from. Stay tuned!
+
 [http://robdodson.me/blog/2012/08/03/javascript-design-patterns/](http://robdodson.me/blog/2012/08/03/javascript-design-patterns/)
diff --git a/decorator/sale/index.html b/decorator/sale/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Decorators: The Hard Way</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+  </head>
+  <body>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/decorator/sale/main.js b/decorator/sale/main.js
@@ -0,0 +1,70 @@
+// Full credit for this example goes to Stoyan Stefanov and his
+// amazing book JavaScript Patterns
+// http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752
+
+"use strict";
+
+function Sale(price) {
+	this.price = price || 100;
+}
+
+Sale.prototype.getPrice = function() {
+	return this.price;
+};
+
+Sale.decorators = {};
+
+Sale.decorators.fedtax = {
+	getPrice: function() {
+		var price = this._super.getPrice();
+		price += price * 5 / 100;
+		return price;
+	}
+};
+
+Sale.decorators.quebec = {
+	getPrice: function() {
+		var price = this._super.getPrice();
+		price += price * 7.5 / 100;
+		return price;
+	}
+};
+
+Sale.decorators.money = {
+	getPrice: function() {
+		return "$" + this._super.getPrice().toFixed(2);
+	}
+};
+
+Sale.decorators.cdn = {
+	getPrice: function() {
+		return "CDN$" + this._super.getPrice().toFixed(2);
+	}
+};
+
+Sale.prototype.decorate = function (decorator) {
+	var F = function () {},
+	overrides = this.constructor.decorators[decorator],
+	i,
+	newobj;
+
+	// Create prototype chain
+	F.prototype = this;
+	newobj = new F();
+	newobj._super = F.prototype;
+
+	// Mixin properties/methods of our decorator
+	// Overriding the ones from our prototype
+	for (i in overrides) {
+		if (overrides.hasOwnProperty(i)) {
+			newobj[i] = overrides[i];
+		}
+	}
+
+	return newobj;
+};
+
+var sale = new Sale(50);
+sale = sale.decorate('fedtax');
+sale = sale.decorate('cdn');
+console.log(sale.getPrice());
diff --git a/decorator/validator/index.html b/decorator/validator/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Decorators: The Easy Way</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+  </head>
+  <body>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/decorator/validator/main.js b/decorator/validator/main.js
@@ -0,0 +1,65 @@
+"use strict";
+
+function Validator () {
+	this.errors = [];
+	this.decoratorsList = [];
+}
+
+Validator.prototype.decorate = function(name, args) {
+	this.decoratorsList.push({ name: name, args: args });
+};
+
+Validator.decorators = {};
+
+Validator.decorators.hasName = {
+	validate: function(form, args) {
+		// Code to verify presence of name...
+
+		this.errors.push('no name!');
+	}
+};
+
+Validator.decorators.hasAge = {
+	validate: function(form, args) {
+		// Code to verify presence of age...
+
+		this.errors.push('no age!');
+	}
+};
+
+Validator.decorators.hasZipCode = {
+	validate: function(form, args) {
+		// Code to verify presence of zip code...
+
+		this.errors.push('no zip!');
+	}
+};
+
+Validator.prototype.validate = function(form) {
+	var i,
+		max,
+		temp,
+		name,
+		args;
+
+	this.form = form;
+
+	max = this.decoratorsList.length;
+	for (i = 0; i < max; i++) {
+		temp = this.decoratorsList[i];
+		name = temp.name;
+		args = temp.args;
+		Validator.decorators[name].validate.call(this, form, args);
+	}
+};
+
+// Try it out!
+var validator = new Validator();
+validator.decorate('hasName', { length: 5 });
+validator.decorate('hasAge', { minimum: 21 });
+validator.decorate('hasZipCode');
+validator.validate({}); // some form data. in this case just an anonymous object
+console.log(validator.errors);
+
+
+
diff --git a/iterator/arrays/index.html b/iterator/arrays/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Iterator: Arrays</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+  </head>
+  <body>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/iterator/arrays/main.js b/iterator/arrays/main.js
@@ -0,0 +1,35 @@
+// Examples inspired by Stoyan Stefanov and his
+// amazing book JavaScript Patterns
+// http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752
+
+"use strict";
+
+var iterator = (function() {
+
+  var index = 0,
+      data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      length = data.length;
+
+  return {
+      next: function() {
+          var element;
+          if (!this.hasNext()) {
+              return null;
+          }
+          element = data[index];
+          index += 3;
+          return element;
+      },
+      hasNext: function() {
+          return index < length;
+      },
+      rewind: function() {
+          index = 0;
+          return data[index];
+      },
+      current: function() {
+          return data[index];
+      }
+  };
+
+}());
diff --git a/iterator/objects/index.html b/iterator/objects/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Iterator: Objects</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+  </head>
+  <body>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/iterator/objects/main.js b/iterator/objects/main.js
@@ -0,0 +1,35 @@
+// Examples inspired by Stoyan Stefanov and his
+// amazing book JavaScript Patterns
+// http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752
+
+"use strict";
+
+var iterator = (function() {
+  var data = { foo: 'foo', bar: 'bar', baz: 'baz' },
+      keys = Object.keys(data),
+      index = 0,
+      length = keys.length;
+
+  return {
+      next: function() {
+          var element;
+          if (!this.hasNext()) {
+              return null;
+          }
+          element = data[keys[index]];
+          index++;
+          return element;
+      },
+      hasNext: function() {
+          return index < length;
+      },
+      rewind: function() {
+          index = 0;
+          return data[keys[index]];
+      },
+      current: function() {
+          return data[keys[index]];
+      }
+  };
+  
+}());
diff --git a/observer/publisher/index.html b/observer/publisher/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Observer: Publisher</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+  </head>
+  <body>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/observer/publisher/main.js b/observer/publisher/main.js
@@ -0,0 +1,42 @@
+// Full credit for this example goes to Stoyan Stefanov and his
+// amazing book JavaScript Patterns
+// http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752
+
+"use strict";
+
+var publisher = {
+	subscribers: {
+		any: [] // event type: subscribers
+	},
+	on: function(type, fn, context) {
+		type = type || 'any';
+		fn = typeof fn === 'function' ? fn : context[fn];
+		if (typeof this.subscribers[type] === "undefined") {
+			this.subscribers[type] = [];
+		}
+		this.subscribers[type].push({ fn: fn, context: context || this });
+	},
+	remove: function(type, fn, context) {
+		this.visitSubscribers('unsubscribe', type, fn, context);
+	},
+	fire: function(type, publication) {
+		this.visitSubscribers('publish', type, publication);
+	},
+	visitSubscribers: function(action, type, arg, context) {
+		var pubtype = type || 'any',
+			subscribers = this.subscribers[pubtype],
+			i,
+			max = subscribers ? subscribers.length : 0;
+
+		for (i = 0; i < max; i += 1) {
+			if (action === 'publish') {
+				// Call our observers, passing along arguments
+				 subscribers[i].fn.call(subscribers[i].context, arg);
+			} else {
+				if (subscribers[i].fn === arg && subscribers[i].context === context) {
+					subscribers.splice(i, 1);
+				}
+			}
+		}
+	}
+};
diff --git a/strategy/painter/index.html b/strategy/painter/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Painter</title>
+    <title>Strategy: Painter</title>
     <meta name="description" content="Strategy pattern in JavaScript with pretty pictures!">
     <meta name="author" content="Rob Dodson">
     <style type="text/css">
