This is a very basic introduction to implementing in design patterns in JS in order to properly organize and structure the code.

1. Santhosh Kumar
Github.com/santhotech
An Introduction to Design Patterns

2. What are Design Patterns
• Design Patterns provide the roadmap to implement solutions for various issues
in software development
• A ready made solution that can be customized and reused
• A design pattern will make the code look self expressive by providing structure
and semantics to the code
• They are not the final solution but a means to achieve the solution in an elegant
manner
• Provides a common platform and reduces time required for transition

3. Advantages
• Provides the ability to reuse code that can save a lot of time
• It is a standard that developers are aware of hence improves
the understanding of code base new/old within a team
• If used efficiently can help in reducing the overall footprint
• Provides multiple platforms that doesn’t constraint the usage
or dictate the behaviour while maintaining the sanity of the
system
• Helps in faster testing and implementation

4. Design Pattern Categories
• Creational Design Patterns
– Deals with the way a class and object instances are created
• Structural Design Patterns
– Deals with maintaining structural integrity of the system by enforcing sane
relationships
• Behavioural Design Patterns
– Helps in establishing communication between distinct parts of the system (or)
Object communication

5. Creational Patterns
• Deals with Object creation mechanism and class creation
mechanism
• Provides a way for object creation depending on the changing
scenarios
• Reduces duplication in terms of instantiation
• Reduces memory over head in dealing with multiple objects of
the same type
• Ex: Constructor, Factory, Abstract, Prototype, Singleton, Builder
etc

6. Structural Design Pattern
• Provides a set of protocols on structuring the components of
the system
• Helps in reducing/decoupling the structural dependencies with
in a system
• Provides a means to create independent structures that can
maintain their own state
• Helps in restructuring the components of the system which
doesn’t have a common purpose
• Ex: Decorator, Façade, Adapter, Proxy etc

7. Behavioural Design Pattern
• Focuses on streamlining the communication between the
objects in the system
• Helps in establishing a common set of protocols to pass data
and keep objects in sync
• Provides a means to ensure reactive implementation of objects
irrespective of their state
• Ensures that communication happens through as less channels
as possible to ensure maintainability
• Ex: Iterator, Mediator, Chain of Command, Observer, Visitor etc

8. Design Patterns in OO Javascript
• JavaScript is a Pseudo class based language – Functions are
manipulated to simulate a class based environment
• All JS objects are inherited from “Object” using a base
constructor
• All constructors gets a prototype object
• All default properties of an object is assigned in the prototype
• Each individual object consists of its own prototype which
inherits from the parent

9. Constructor pattern
• Creational Design Pattern
• Javascript objects can be created by
• var obj = {};
• var obj = Object.create(Object.prototype);
• Var obj = new Object();
• Any call to a function is actually a call to a constructor method of the
same function since functions behaves like classes in javascripts
• Adding a “new” to a constructor makes it return a empty instance (if
passed without parameters) of the object the constructor points to

10. Cont…
function Animal(name, class) {
this.name = name;
this.class = class;
this.getName = function() {
return “Name :”+this.name;
}
Var a1 = new Animal(“lion”, “predator”);
Var a2 = new Animal(“Tiger”, “predator”);

11. Cont…
• All common methods can be grouped in a single wrapper
• “this” refers to the current object inside the constructor
function
• Not ideal as inheritance cannot be implemented directly –
scope of “this” referring to the methods will result in a conflict
• Methods referenced with this gets redefined for every instance
that is created – end up with 100 “getName” definitions if there
are 100 animals

12. • JS consists of a prototype property that is available for all
functions
• Any number of methods and properties can be attached to the
prototype property of the function
• When constructor is called to create new object the properties
attached to prototype of the constructor is automatically
available to the new object
• The “this” keyword inside a property attached to prototype will
still refer to the current object

13. function Animal(name, class) {
this.name = name;
this.class = class;
}
Animal.prototype.getName = function() {
return “Name :”+this.name;
}
Var a1 = new Animal(“lion”, “predator”);
Var a2 = new Animal(“Tiger”, “predator”);

14. Usage/Merits/Demerits
• Ideal for wrapping up related and group able properties within
an object container
• Can be used where ever a fundamental level of abstraction is
required
• Provides a very easy implementation of inheritance and
prototypal inheritance
• Doesn’t provide a direct mechanism to contain private
members

15. Object Literal Pattern
• Another Creational Design Pattern
• Not the usual means to “instantiate” an object
• Provides a way to group related behaviour usually in terms of a
page/UI component

16. Var gridComponent = {
settings: {
gridColor: “#ff0000”,
gridTitle: “My Title”
},
init: function{
if (settings && settings(settings) == 'object') {
$.extend(gridComponent.settings, settings);
}
gridComponent.bindEvents();
}
bindEvents: function() {
$(“#btn”).on(“click”, function() { gridComponent.onButtonClick(); });
$(“#drp”).on(“change”, function() { gridComponent.onDrpChange(); });
}
}

17. Usage/Merits/Demerits
• Can be used especially when dealing with third party libraries
like Jquery to group common behaviour
• Instead of spaghetti calling methods of same component just a
online initiation replaces all other calls
• Code may be longer than other forms of implementation
• But the grouping helps in maintainability
• Doesn’t provide private members

18. Modular Pattern
• Provides the ability to effect namespacing
• Allows creation of private members
• Expose only certain logic that needs to be used by other parts
of the system
• Helps to keep the global namespace clean and free of pollution
from the method variables

19. Var Chart = (function(){
var chartWidth = 100;
var chartHeight = 100;
getAxis = function(param) {
return Math.round(rand(param,2));
}
return {
generateChart: function(chartParam) {
return getAxis(chartParam);
}
}
})();

20. Usage/Merits/Demerits
• Can be used where private members are required to keep the
namespace clean and avoid naming conflicts which is also the
advantage of using this pattern
• The private methods cannot be extended since their visibility is
shielded
• Objects added later to the chain does not have access to the
private members
• Private members cannot be unit tested

21. Revealing Module Pattern
• A Slight variation of the modular pattern
• In module pattern public methods need to address one another
along with the name of module
• Revealing module pattern addresses this by returning an object
with references to the methods that are public and keeping all
methods private by default

22. var Chart = (function(){
var chartX = 0;
var chartY = 0;
function manipulate() {
}
function manipulateXY() {
return manipulate();
}
function generateChart(param) {
return manipulateXY();
}
return {
getChart: generateChart
};
})();
Chart.getChart(param);

23. Usage/Merits/Demerits
• Syntax is much cleaner as the return object clearly specifies
what are returned hence establishing what are public
• Pattern is flexible enough only for public methods and not for
public members
• Does not play well with inheritance as the public methods
returned cannot be overridden since only reference is returned

24. Singleton Pattern
• Restricts the instantiation of a class to just once such that it
returns the same instance whenever and wherever it is
requested from
• Singletons in JS returns a structure rather than returning an
object or more precisely a reference to an object

25. Var Helper = (function(){
var helperInstance;
function init() {
function domHelperPvt() {
}
var domHelperPvtProp = 0;
return {
domHelperPub: function () {
},
domHelperPubProp: 1
};
};
return {
getHelperInstance: function () {
if ( !helperInstance) {
helperInstance = init();
}
return helperInstance;
}
};
})();
Var helper = Helper.getHelperInstance();
Helper.domHelperPub();

26. Usage/Merits/Demerits
• Used to create static instance like behaviour for accessing
methods that are common across a wide range of components
in a system
• Reduces memory overhead and helps in sane garbage
collection
• Too many singletons will result in application being tightly
coupled, hence reduce the performance and also
maintainability

27. Factory Pattern
• Provides a platform to provide objects that may be required
frequently from time to time and also used by multiple
components
• Not restricted to one instance but may not necessarily create
new instance if the existing one can be reused
• Also a creational pattern

28. Function DomFactory {
this.createNewDom = function(domtype,param) {
var newDom;
if(domType===“chart”) {
newDom = new Chart(param);
}
if(domType===“grid”) {
newDom = new Grid(param);
}
return newDom;
}
}
DomFactory.createNewDom(“chart”,param);

29. Usage/Merits/Demerits
• Useful when the calling client may need different objects
depending on the scenario and such clients exist across the
system
• Reduces the logical overhead in the client requesting for the
object and moves common logic to a common wrapper that can
be reused as necessary
• Cannot be used when there is no common behaviour between
the objects returned

30. Proto Patterns
• Patterns can be created within a team depending on what the
team feels is efficient while maintaining the common rules that
a pattern should adhere to
• A Pattern created within a team which can evolve over a period
of time to represent something that is achieved through it
• Proto Patterns will evolve to be design patterns when it is
widely accepted by the community
• Ex: Revealing Module Pattern

31. Thank You