Java scriptpatterns

Giordano Scalzo

JavaScript Patterns

Wednesday, November 10, 2010

I’m not a guru!


I’m still learning


Why?


JavaScript isn’t this anymore


JavaScript is everywhere!


Technology Radar

JavaScript is trendy!


Technology Radar

JavaScript is trendy!


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}Wednesday, November 10, 2010

Global variables are evil!


Variables clash


Always declare variables with var

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

{pattern}Wednesday, November 10, 2010

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


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

{antipattern}

b become global


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

don’t use assign chain in definition


function func(){ var a = 1,

b = 2, sum = a + b, myobject = {}, i, j;

// function body...}

{pattern}

Single var 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();


Hoisting

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

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

func();


“Variables should be declared as close to their usage as possible”

Robert C. Martin - Clean Code

Against minimum vertical distance principle


EssentialLiteral and Constructor


In JavaScript almost everything is an object


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

console.log(person.say());

It’s easy...


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


{antipattern}

but wrong! :-(


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



What if we need similar objects...

var person = {};person.name = "Scott";person.say = function(){ return "I am " + this.name;};console.log(person.say()); // I am Scott

var otherPerson = {};otherPerson.name = "Tiger";otherPerson.say = function(){ return "I am " + this.name;};

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


A lot of duplication

var person = {};person.name = "Scott";person.say = function(){ return "I am " + this.name;};console.log(person.say()); // I am Scott

var otherPerson = {};otherPerson.name = "Tiger";otherPerson.say = function(){ return "I am " + this.name;};

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


Duplication is evil!


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

console.log(person.say()); // I am Scott

Custom Constructor Functions


Behind the scenes...

var Person = function(name){ // var this = {}; this.name = name; this.say = function(){ return "I am " + this.name; }; // return this;};


var Person = function(name){ this.name = name; this.say = function(){ return "I am " + this.name; };};

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

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

So, at the end...


What if we forget new?


var Person = function(name){ this.name = name; this.say = function(){ return "I am " + this.name; };};

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

console.log(typeof scott); //objectconsole.log(scott.name); // Scottconsole.log(typeof adam); //'undefined'console.log(window.name); // Adam

this will point to global object


Enforce new pattern one: naming convention


var Person = function(name){ var that = {}; that.name = name; that.say = function(){ return "I am " + that.name;}; return that;};


console.log(typeof scott); //Objectconsole.log(scott.name); // Scott

console.log(typeof adam); //Objectconsole.log(adam.name); // Adam


Drawback: we loose prototype reference :-(

var Person = function(name){ var that = {}; that.name = name; that.say = function(){ return "I am " + that.name; }; return that;};

Person.prototype.iamhumanbeing = true;


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


Interm!zoPrototype property


Define ancestors chain

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


foo

one: 1

__proto__

bar

three: 3

two: 2


var Person = function(name){ // this.prototype = {constructor: this} var that = {}; that.name = name; that.say = function(){ return "I am " + that.name; }; return that;};

Behind the scenes...


var Person = function(name){ if (this instanceof Person) { this.name = name; this.say = function(){ return "I am " + that.name; } } else { return new Person(name); }};Person.prototype.iamhumanbeing = true;var scott = new Person('Scott')var adam = Person('Adam')console.log(scott.name); // Scottconsole.log(adam.name); // Adamconsole.log(scott.iamhumanbeing); // trueconsole.log(adam.iamhumanbeing); // true

Self invoking constructor


EssentialFunctions


Functions as first 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"


Function scope


// constructors function Parent(){}

function Child(){}

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

{antipattern}

5 globals...


// global object var MYAPP = (function(){ var my = {}; // 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

{pattern}1 global!


What about encapsulation?


function Gadget(){ this.name = 'iPod'; this.stretch = function(){ return 'iPad'; }};

var toy = new Gadget();console.log(toy.name); // ìPod` toy.name = 'Zune'console.log(toy.name); // `Zune` is public console.log(toy.stretch()); // stretch() is public


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

var toy = new Gadget();console.log(toy.getName()); // ìPod`toy.name = 'Zune'console.log(toy.getName()); // ìPod`

Create private member


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

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

var toy = new Gadget(); console.log(toy.pay()); // ìPhone`console.log(toy.upgrade()); // èrror`

{pattern}

for methods too


AdvancedCode reuse patterns


vs

Classical vs prototypal inheritance


Classical inheritancefunction 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'


new Parent()

name: Larry__proto__

Parent.prototypesay()

console.log(dad.say());

function(){ return 'My name is ' + this.name;};


Default Classical Inheritance pattern

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


new Parent()



new Child()

name: Scott__proto__

console.log(kid.say());

function(){ return 'My name is ' + this.name;};


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


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


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'

Drawback: it doesn’t call parent constructor


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


function Child(name){ };

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


var kid = new Child('Scott');

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

Drawback: it doesn’t call parent constructor


function Child(name){ Parent.apply(this, arguments); };

Pattern Extension: rent a constructor


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

function Child(name){ Parent.apply(this, arguments);};

function inherit(C, P){ C.prototype = new P();};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'

Pattern Extension: rent a constructor





Drawback: parent constructor is called twice












mmmm let’s try with the same prototype


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

Share the same prototype


new Parent()



new Child()




Inheritance works as expectedConstructor called only onceLow memory footprint



Child objects can affect other objects


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

Enhance the pattern: temporary constructor


new Parent()



new Child()


new F()

__proto__


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

The Holy Grail Pattern of classical inheritance


We got it!


What about Prototypal Inheritance?


No more classes, only objects


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

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

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

What we want in prototypal inheritance


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

Prototypal inheritance function


child = new F()


parent

name: Scottsay()


With constructor function

var Parent = function(name){ this.name = name; this.say = function(){ 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...

difficult to tame inheritance...


A modern and better approach is to use

Mix-In


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

A beahviour...


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

another beahviour...


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

and an object...


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 Foucaultvar xmlString = author.toXml();console.log(xmlString); //<name>Umberto Eco</name> // <book>Il nome della rosa</book> // <book>Il Pendolo di Focault</book>

result!


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

givingClass.prototype[methodName]; } }}

The recipe


AdvancedDesign Patterns



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


JavaScript is not J@#*!


creation of objectssubclasses decide which class to instantiate

Factory pattern


var BicycleFactory = { createBicycle: function(model){ var bicycle; switch (model) { case 'The Speedster': bicycle = new Speedster(); break; case 'The Lowrider': bicycle = new Lowrider(); break; case 'The Comfort Cruiser': default: bicycle = new ComfortCruiser(); } Interface.ensureImplements(bicycle, Bicycle); bicycle.assemble(); bicycle.wash(); return bicycle; }};var californiaCruisers = new BicycleFactory();var yourNewBike = californiaCruisers.createBicycle('The Speedster');


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();

A more concrete example...


It seems lightly broken....


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();


Chain of Responsibility pattern


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

this.xhr = function(){ return XMLHttpRequest(); } };

Extract condition and action....


var XhrIe = function(){ this.canHandle = function(){ return typeof ActiveXObject !== "undefined"; } this.xhr = function(){ return ActiveXObject("MSXML2.XMLHttp"); } };

another condition and action....


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

and last one condition and action....


var XMLHttpFactory = function(){ //... ChainLinks...

var creators = [new XhrStandard(), new XhrIe(), new XhrError()];

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

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

and the engine!


Or following the book...


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

Refactored an action...


var XhrIe = function(){ this.canHandle = function(){ return typeof ActiveXObject !== "undefined"; } this.xhr = function(){ if (this.canHandle()) { return ActiveXObject("MSXML2.XMLHttp"); } return this.successor.xhr(); } this.addSuccessor = function(successor){ this.successor = successor; return this.successor; } };

other action...


var XhrError = function(){ this.canHandle = function(){ return true; } this.xhr = function(){ throw ("XHR Object not in production"); } this.addSuccessor = function(successor){ this.successor = successor; return this.successor; } };

last action...


var XMLHttpFactory = function(){ //... ChainLinks... var creator = (function(){ var head = new XhrIe(); head.addSuccessor(new XhrStandard()) .addSuccessor(new XhrError()); return head; })(); this.createXMLHttp = function(){ return creator.xhr(); }};


and the engine!


mmm duplication...



Same for all...



Similar for all..


Template Method pattern


... and a little bit of Mix-In

Template Method pattern


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

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

Extracted same and similar behaviours....


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

Augment an action...


var XhrIe = augment(function(){ this.canHandle = function(){ return typeof ActiveXObject !== "undefined"; } this.doIt = function(){ return this.doIt(); }; }, ChainLink);

another action...


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

this.doIt = function(){ throw("XHR Object not in production"); } },ChainLink);

and last one.


var XMLHttpFactory = function(){ //... ChainLinks... var creator = (function(){ var head = new XhrIe(); head.addSuccessor(new XhrStandard()) .addSuccessor(new XhrError()); return head; })(); this.createXMLHttp = function(){ return creator.xhr(); }};


and the engine is the same!


It’s just a beginning...


peep codepeep code


Study




“Save it for a rainy day!”


Check your code with jslint.com



@giordanoscalzo

www.slideshare.net/giordano

github.com/gscalzo

[email protected]


mailto:[email protected]

mailto:[email protected]

Documents

Java scriptpatterns