- 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
