MOCKSTACKS
EN
Questions And Answers

More Tutorials









Javascript Design Patterns

Design patterns are a good way to keep your code readable and DRY. DRY stands for don't repeat yourself. Below you could find more examples about the most important design patterns.


Factory Functions

A factory function is simply a function that returns an object. Factory functions do not require the use of the new keyword, but can still be used to initialize an object, like a constructor. Often, factory functions are used as API wrappers, like in the cases of jQuery and moment.js, so users do not need to use new. The following is the simplest form of factory function; taking arguments and using them to craft a new object with the object literal:


function cowFactory(name) {
 return {
 name: name,
 talk: function () {
 console.log('Moo, my name is ' + this.name);
 },
 };
}
var daisy = cowFactory('Daisy'); // create a cow named Daisy
daisy.talk(); // "Moo, my name is Daisy"

It is easy to define private properties and methods in a factory, by including them outside of the returned object.This keeps your implementation details encapsulated, so you can only expose the public interface to your object.


function cowFactory(name) {
 function formalName() {
 return name + ' the cow';
 }
 return {
 talk: function () {
 console.log('Moo, my name is ' + formalName());
 },
 };
}
var daisy = cowFactory('Daisy');
daisy.talk(); // "Moo, my name is Daisy the cow"
daisy.formalName(); // ERROR: daisy.formalName is not a function

The last line will give an error because the function formalName is closed inside the cowFactory function. This is a closure. Factories are also a great way of applying functional programming practices in JavaScript, because they are functions.


Factory with Composition

'Prefer composition over inheritance' is an important and popular programming principle, used to assign behaviors to objects, as opposed to inheriting many often unneeded behaviors.


Behaviour factories


var speaker = function (state) {
 var noise = state.noise || 'grunt';
 return {
 speak: function () {
 console.log(state.name + ' says ' + noise);
 }
 };
};
var mover = function (state) {
 return {
 moveSlowly: function () {
 console.log(state.name + ' is moving slowly');
 },
 moveQuickly: function () {
 console.log(state.name + ' is moving quickly');
 }
 };
};

Object factories


var person = function (name, age) {
 var state = {
 name: name,
 age: age,
 noise: 'Hello'
 };
 return Object.assign( // Merge our 'behaviour' objects
 {},
 speaker(state),
 mover(state)
 );
};
var rabbit = function (name, colour) {
 var state = {
 name: name,
 colour: colour
 };
 return Object.assign(
 {},
 mover(state)
 );
};

Usage


var fred = person('Fred', 42);
fred.speak(); // outputs: Fred says Hello
fred.moveSlowly(); // outputs: Fred is moving slowly
var snowy = rabbit('Snowy', 'white');
snowy.moveSlowly(); // outputs: Snowy is moving slowly
snowy.moveQuickly(); // outputs: Snowy is moving quickly
snowy.speak(); // ERROR: snowy.speak is not a function


Conclusion

In this page (written and validated by ) you learned about Javascript Design Patterns . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript Symbols.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.