javascript patterns

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!


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


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...


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); // `iPod` 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()); // `iPod`toy.name = 'Zune'console.log(toy.getName()); // `iPod`

Create private member


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 Child(name){ Parent.apply(this, arguments); };

Pattern Extension: rent a constructor


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 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


It seems lightly broken....


Chain of Responsibility pattern


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

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

Extract 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....


Or following the book...


mmm duplication...



Same for all...



Similar for all..


Template Method pattern


... and a little bit of Mix-In

Template Method pattern


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.


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]

javascript patterns

Technology

pattern extension

scottconsole

code

umberto eco

typeof xmlhttprequest

called twicewednesday

prototypal

2010technology