JAVASCRIPT

Design Patterns

Design patterns are reusable solutions to commonly occurring problems in software design.

– Addy Osmani

Constructor Pattern

All methods and properties of the object are added in the constructor.

function Track(artist, title, year) {
    this.artist = artist;
    this.title = title;
    this.year = year;

    this.trackInfo = function() {
        return this.title + ", by " + this.artist + ", Year released: " + this.year;
    };
}

var theFixer = new Track("Pearl Jam", "The Fixer", 2009);
var lazaretto =  new Track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Constructor Pattern with Prototype

function Track(artist, title, year) {
    this.artist = artist;
    this.title = title;
    this.year = year;
}

Track.prototype.trackInfo = function() {
    return this.title + ", by " + this.artist + ", Year released: " + this.year;
};

var theFixer = new Track("Pearl Jam", "The Fixer", 2009);
var lazaretto =  new Track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Prototype Pattern

var trackPrototype = {
    init: function(artist, title, year) {
        this.artist = artist;
        this.title = title;
        this.year = year;
    },
    trackInfo: function() {
        return this.title + ", by " + this.artist + ", Year released: " + this.year;
    }
};

function track(artist, title, year) {
    
    function F() {}
    F.prototype = trackPrototype;
    
    var f = new F();
    
    f.init(artist, title, year);
    return f;
}
    
var theFixer = track("Pearl Jam", "The Fixer", 2009);
var lazaretto = track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Object Literal Module Pattern

var playlist = {
    
    tracksCollection: [],
    
    lastTrack: function() {
        return tracksCollection[tracksCollection.length -1];
    },
    
    addTrack: function(track) {
        tracksCollection.push(track);
    },
    
    init: function(tracks) {
        tracks.forEach( function(track) {
            this.addTrack(track); 
        });
    }
}

playlist.init([new Track("Pearl Jam", "The Fixer", 2009)]);
playlist.lastTrack().trackInfo(); // The Fixer, by Pearl Jam, Year released: 2009
playlist.addTrack(new Track("Jack White", "Lazaretto", 2014));
playlist.lastTrack().trackInfo(); // Lazaretto, by Jack White, Year released: 2014

IIFE Module Pattern

var playlist = (function() {

    var tracksCollection = [];

    return {

        lastTrack: function() {
            return tracksCollection[tracksCollection.length -1];
        },

        addTrack: function(track) {
            tracksCollection.push(track);
        },

        init: function(tracks) {
            tracks.forEach( function(track) {
            this.addTrack(track);
            });
        }
    }

})();

playlist.init([new Track("Pearl Jam", "The Fixer", 2009)]);
playlist.lastTrack().trackInfo(); // The Fixer, by Pearl Jam, Year released: 2009
playlist.addTrack(new Track("Jack White", "Lazaretto", 2014));
playlist.lastTrack().trackInfo(); // Lazaretto, by Jack White, Year released: 2014

Resource

Learning JavaScript Design Patterns
A book by Addy Osmani

comments powered by Disqus