JavaScript Patterns Guidebook

JavaScript Patterns

Giordano Scalzo
Wednesday, November 10, 2010

I’m not a guru!


I’m still learning


Why?


JavaScript isn’t this anymore


JavaScript is everywhere!


JavaScript is trendy!

Technology Radar


At the beginning...


Hacked by Brendan Eich in one week...


Former Mocha, renamed to JavaScript by Netscape


after a while...


and...


:-(


and so...


Back to study!


Started a notebook...


Essential
Scope


function sum(x, y){
// implied global
result = x + y;
return result;
}

{antipattern}

Global variables are evil!


Variables clash


Always declare variables with var

function sum(x, y){
var result = x + y;
return result;
}

{pattern}

function foo(){
var a = b = 0;
//...
}

{antipattern}

b become global

function foo(){
var a = (b = 0);
//...
}

{antipattern}

don’t use assign chain in deﬁnition

function foo(){
var a, b;
a = b = 0;
//...
}

{pattern}

Single var pattern

function func(){
var a = 1,
b = 2,
sum = a + b,
myobject = {},
i,
j;
// function body...
}

{pattern}

Don’t forget comma otherwise...


... variables become globals


Hoisting

myname = "global"; // global variable
function func(){
// code...
console.log(myname); // "undefined"

// code...
var myname = "local";
console.log(myname); // "local"
}

func();

{antipattern}

Hoisting

myname = "global"; // global variable
function func(){
var myname = "declared";
// code...
console.log(myname); // "declared"

// code...
myname = "local";
console.log(myname); // "local"
}

func();

{pattern}

Against minimum vertical distance
principle

“Variables should be declared as close to
their usage as possible”
Robert C. Martin - Clean Code


Essential
Literal and Constructor


In JavaScript almost everything is an object


It’s easy...

var person = new Object();
person.name = "Scott";
person.say = function(){
return "I am " + this.name;
};

console.log(person.say());


but wrong! :-(

var person = new Object();
};


{antipattern}

var person = {};
};


{pattern}

What if we need similar objects...

var person = {};
};
console.log(person.say()); // I am Scott

var otherPerson = {};
otherPerson.name = "Tiger";
otherPerson.say = function(){
};

console.log(otherPerson.say()); // I am Tiger


A lot of duplication

var person = {};
};

var otherPerson = {};
otherPerson.name = "Tiger";
otherPerson.say = function(){
};

console.log(otherPerson.say()); // I am Tiger


Duplication is evil!


Custom Constructor Functions

var Person = function(name){
this.name = name;
this.say = function(){
}
}
var person = new Person("Scott");


{pattern}

Behind the scenes...

// var this = {};
this.name = name;
};
// return this;
};

{pattern}

So, at the end...

this.name = name;
};
};

var scott = new Person('Scott');
var tiger = new Person('Tiger');

console.log(scott.say());
console.log(tiger.say());

{pattern}

What if we forget new?


this will point to global object

this.name = name;
};
};

var scott = new Person('Scott')
var adam = Person('Adam')

console.log(typeof scott); //object
console.log(scott.name); // Scott
console.log(typeof adam); //'undefined'
console.log(window.name); // Adam


Enforce new pattern one: naming convention


Drawback: we loose prototype reference :-(

var that = {};
that.name = name;
return "I am " + that.name;
};
return that;
};

Person.prototype.iamhumanbeing = true;


console.log(scott.iamhumanbeing); // undefined
console.log(adam.iamhumanbeing); // undefined


Interm!zo

Prototype property


Deﬁne ancestors chain

var foo = {one: 1, two: 2};
var bar = {three: 3};
foo.__proto__ = bar;
console.log(foo.one);
console.log(foo.three);


bar
three: 3

foo
one: 1
two: 2
__proto__


Behind the scenes...

// this.prototype = {constructor: this}
var that = {};
that.name = name;
};
return that;
};


Self invoking constructor
if (this instanceof Person) {
this.name = name;
}
}
else {
return new Person(name);
}
};
Person.prototype.iamhumanbeing = true;
console.log(adam.name); // Adam
console.log(scott.iamhumanbeing); // true
console.log(adam.iamhumanbeing); // true

{pattern}

Essential
Functions


Functions as ﬁrst class objects


Immediate functions

(function(){
alert('watch out!');
})();


Initialization pattern

(function(){
var days = ['Sun', 'Mon', 'Tue', 'Wed',
'Thu', 'Fri', 'Sat'],
today = new Date(),
msg = 'Today is ' +
days[today.getDay()] +
', ' +
today.getDate();
console.log(msg);
})(); // "Today is Wed, 10"

{pattern}

Function scope


5 globals...
// constructors
function Parent(){
}

function Child(){
}

// a variable
var some_var = 1;
// some objects
var module1 = {};
module1.data = {
a: 1,
b: 2
};
var module2 = {};

{antipattern}

1 global!
// global object
var MYAPP = (function(){
var my = {};
{pattern}
// constructors
my.Parent = function(){};
my.Child = function(){};
// a variable
my.some_var = 1;
// an object container
my.modules = {};
// nested objects
my.modules.module1 = {};
my.modules.module1.data = {
a: 1,
b: 2
};
my.modules.module2 = {};
return my;
})();

console.log(MYAPP.modules.module1.data.a); // 1


What about encapsulation?


Create private member

function Gadget(){
var name = 'iPod';
this.getName = function(){
return name;
}
};

console.log(toy.getName()); // `iPod`
toy.name = 'Zune'
console.log(toy.getName()); // `iPod`

{pattern}

for methods too
function Gadget() {
var name = 'iPod';
var upgrade = function(){
return 'iPhone';
}

this.getName = function () {
return name;
}
this.pay = function() {
return upgrade();
}
};

console.log(toy.pay()); // `iPhone`
console.log(toy.upgrade()); // `error`

{pattern}

Advanced
Code reuse patterns


Classical vs prototypal inheritance

vs


Classical inheritance
function Parent(name){
this.name = name;
};

Parent.prototype.say = function(){
return 'My name is ' + this.name;
};

function Child(name){
this.name = name;
};

inherit(Child, Parent);

var dad = new Parent('Larry');
var kid = new Child('Scott');

console.log(dad.say()); // 'My name is Larry'
console.log(kid.say()); // 'My name is Scott'


function(){
};
Parent.prototype
say()

new Parent()
name: Larry
__proto__

console.log(dad.say());


Default Classical Inheritance pattern

function inherit(C, P) {
C.prototype = new P();
};


function(){
};
Parent.prototype
say()

new Parent()
new Child() name: Larry
name: Scott __proto__
__proto__

console.log(kid.say());

Drawback: it doesn’t call parent constructor
this.name = name;
};

};

this.name = name;
};





Drawback: it doesn’t call parent constructor
this.name = name;
};

};

function Child(name){ };

};



console.log(kid.say()); // 'My name is undefined'


Pattern Extension: rent a constructor

Parent.apply(this, arguments);
};


Pattern Extension: rent a constructor
this.name = name;
};
};

};

function inherit(C, P){
};


Drawback: parent constructor is called twice
this.name = name;
};
};

};

};


mmmm let’s try with the same prototype


Share the same prototype

C.prototype = P.prototype;
};


Parent.prototype
say()

new Child() new Parent()
name: Scott name: Larry
__proto__ __proto__



Inheritance works as expected
Constructor called only once
Low memory footprint



Child objects can affect other objects


Enhance the pattern: temporary constructor

var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
};


Parent.prototype
say()
new Parent() new F()
name: Larry __proto__
__proto__

new Child()
name: Scott
__proto__

The Holy Grail Pattern of classical inheritance

var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
C.uber = P.prototype;
C.prototype.constructor = C;
};


We got it!


What about Prototypal Inheritance?


No more classes, only objects


What we want in prototypal inheritance

var parent = {
name: "Larry",
say: function(){
return "My name is " + this.name;
}
};

var child = object(parent);
child.name = 'Scott'

console.log(child.say()); // "Scott"


Prototypal inheritance function

function object(o) {
function F() {}
F.prototype = o;
return new F();
};


parent
name: Scott
say()

child = new F()
name: Larry
__proto__


With constructor function

var Parent = function(name){
this.name = name;
return "My name is " + this.name;
}
};

var child = object(new Parent("Larry"));
child.name = 'Scott'

console.log(child.say()); // "Scott"


better classical or prototypal?


It depends


Goals of inheritance is reuse and reduce duplication


isA relationship...
Liskov principle...
difﬁcult to tame inheritance...


A modern and better approach is to use

Mix-In


A beahviour...

var Serializer = function () {};
Serializer.prototype = {
serialize: function () {
var output = [];
for (key in this) {
// append this[key] to output
// ...
}
return output.join(', ');
}
};


another beahviour...

var XmlBuilder = function () {};
XmlBuilder.prototype = {
toXml: function () {
var output = '';
for (key in this) {
// append xml of this[key] to output
// ...
}
return output;
}
};


and an object...

var Author = function (name, books) {
this.name = name || "";
this.books = books || [];
}


result!
augment(Author, Serializer);
augment(Author, XmlBuilder);

var author = new Author('Umberto Eco',
['Il nome della rosa',
'Il Pendolo di Foucault']);
var serializedString = author.serialize();
console.log(serializedString); // name: Umberto Eco,
// books: Il nome della rosa,
// Il Pendolo di Foucault
var xmlString = author.toXml();
console.log(xmlString); //<name>Umberto Eco</name>
// <book>Il nome della rosa</book>
// <book>Il Pendolo di Focault</book>


The recipe

function augment(receivingClass, givingClass) {
for (methodName in givingClass.prototype) {
if (!receivingClass.prototype[methodName]) {
receivingClass.prototype[methodName] =
givingClass.prototype[methodName];
}
}
}


Advanced
Design Patterns


“A design pattern is a
general reusable solution to
a commonly occurring
problem”


JavaScript is not J@#*!


Factory pattern
creation of objects
subclasses decide which class to instantiate


A more concrete example...

var XMLHttpFactory = function(){
this.createXMLHttp = function(){
if (typeof XMLHttpRequest !== "undefined") {
return XMLHttpRequest();
}
else
if (typeof window.ActiveXObject !== "undefined") {
return ActiveXObject("MSXML2.XMLHttp");
}
else {
alert("XHR Object not in production");
}
}
};

var xhr = new XMLHttpFactory().createXMLHttp();


It seems lightly broken....


if (typeof XMLHttpRequest !== "undefined") {
}
else
if (typeof window.ActiveXObject !== "undefined") {
}
else {
alert("XHR Object not in production");
}
}
};



Chain of Responsibility pattern


Extract condition and action....

var XhrStandard = function(){
this.canHandle = function(){
return typeof XMLHttpRequest !== "undefined";
}

this.xhr = function(){
}
};


another condition and action....

var XhrIe = function(){
return typeof ActiveXObject !== "undefined";
}
}
};


and last one condition and action....

var XhrError = function(){
return true;
}
throw("XHR Object not in production");
}
};


and the engine!
//... ChainLinks...
var creators = [new XhrStandard(),
new XhrIe(),
new XhrError()];

var creator;
for(var i = 0; i < creators.length; ++i){
creator = creators[i];
if(creator.canHandle()) {
return creator.xhr();
}
}
}
};

console.log(xhr);


Or following the book...


Refactored an action...
var XhrStandard = function(){
}

if (this.canHandle()) {
}
return this.successor.xhr();
}

this.addSuccessor = function(successor){
this.successor = successor;
return this.successor;
}
};


other action...
}
}
}

}
};


last action...

var XhrError = function(){
return true;
}
throw ("XHR Object not in production");
}
}
};


and the engine!
//... ChainLinks...

var creator = (function(){
var head = new XhrIe();
head.addSuccessor(new XhrStandard())
.addSuccessor(new XhrError());
return head;
})();

}
};

console.log(xhr);


mmm duplication...


Same for all...
}
}
}

}
};


Similar for all..
}
}
}

}
};


Template Method pattern


Template Method pattern

... and a little bit of Mix-In


Extracted same and similar behaviours....

var ChainLink = function() {};
ChainLink.prototype.exec = function(){
if(this.canHandle()) {
return this.doIt();
}
return this.successor.exec();
};

ChainLink.prototype.addSuccessor = function(successor){
}


Augment an action...

var XhrStandard = augment(function(){
}
this.doIt = function(){
};
}, ChainLink);


another action...

var XhrIe = augment(function(){
}
return this.doIt();
};
}, ChainLink);


and last one.

var XhrError = augment(function(){
return true;
}

throw("XHR Object not in production");
}
},ChainLink);


and the engine is the same!
//... ChainLinks...

var creator = (function(){
var head = new XhrIe();
head.addSuccessor(new XhrStandard())
.addSuccessor(new XhrError());
return head;
})();

}
};

console.log(xhr);


It’s just a beginning...


peep code


Study


“Save it for a rainy day!”


Check your code with jslint.com


giordano.scalzo@cleancode.it
@giordanoscalzo
www.slideshare.net/giordano
github.com/gscalzo

JavaScript Patterns Guidebook

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to JavaScript Patterns Guidebook

Similar to JavaScript Patterns Guidebook (18)

More from Giordano Scalzo

More from Giordano Scalzo (12)

Recently uploaded

Recently uploaded (20)

JavaScript Patterns Guidebook