Santhosh Kumar
Github.com/santhotech
An Introduction to Design Patterns
What are Design Patterns
• Design Patterns provide the roadmap to implement solutions for various issues
in software devel...
Advantages
• Provides the ability to reuse code that can save a lot of time
• It is a standard that developers are aware o...
Design Pattern Categories
• Creational Design Patterns
– Deals with the way a class and object instances are created
• Str...
Creational Patterns
• Deals with Object creation mechanism and class creation
mechanism
• Provides a way for object creati...
Structural Design Pattern
• Provides a set of protocols on structuring the components of
the system
• Helps in reducing/de...
Behavioural Design Pattern
• Focuses on streamlining the communication between the
objects in the system
• Helps in establ...
Design Patterns in OO Javascript
• JavaScript is a Pseudo class based language – Functions are
manipulated to simulate a c...
Constructor pattern
• Creational Design Pattern
• Javascript objects can be created by
• var obj = {};
• var obj = Object....
Cont…
function Animal(name, class) {
this.name = name;
this.class = class;
this.getName = function() {
return “Name :”+thi...
Cont…
• All common methods can be grouped in a single wrapper
• “this” refers to the current object inside the constructor...
• JS consists of a prototype property that is available for all
functions
• Any number of methods and properties can be at...
function Animal(name, class) {
this.name = name;
this.class = class;
}
Animal.prototype.getName = function() {
return “Nam...
Usage/Merits/Demerits
• Ideal for wrapping up related and group able properties within
an object container
• Can be used w...
Object Literal Pattern
• Another Creational Design Pattern
• Not the usual means to “instantiate” an object
• Provides a w...
Var gridComponent = {
settings: {
gridColor: “#ff0000”,
gridTitle: “My Title”
},
init: function{
if (settings && settings(...
Usage/Merits/Demerits
• Can be used especially when dealing with third party libraries
like Jquery to group common behavio...
Modular Pattern
• Provides the ability to effect namespacing
• Allows creation of private members
• Expose only certain lo...
Var Chart = (function(){
var chartWidth = 100;
var chartHeight = 100;
getAxis = function(param) {
return Math.round(rand(p...
Usage/Merits/Demerits
• Can be used where private members are required to keep the
namespace clean and avoid naming confli...
Revealing Module Pattern
• A Slight variation of the modular pattern
• In module pattern public methods need to address on...
var Chart = (function(){
var chartX = 0;
var chartY = 0;
function manipulate() {
}
function manipulateXY() {
return manipu...
Usage/Merits/Demerits
• Syntax is much cleaner as the return object clearly specifies
what are returned hence establishing...
Singleton Pattern
• Restricts the instantiation of a class to just once such that it
returns the same instance whenever an...
Var Helper = (function(){
var helperInstance;
function init() {
function domHelperPvt() {
}
var domHelperPvtProp = 0;
retu...
Usage/Merits/Demerits
• Used to create static instance like behaviour for accessing
methods that are common across a wide ...
Factory Pattern
• Provides a platform to provide objects that may be required
frequently from time to time and also used b...
Function DomFactory {
this.createNewDom = function(domtype,param) {
var newDom;
if(domType===“chart”) {
newDom = new Chart...
Usage/Merits/Demerits
• Useful when the calling client may need different objects
depending on the scenario and such clien...
Proto Patterns
• Patterns can be created within a team depending on what the
team feels is efficient while maintaining the...
Thank You
Próxima SlideShare
Cargando en…5
×

Introduction to Design Patterns in Javascript

1.149 visualizaciones

Publicado el

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

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Introduction to Design Patterns in Javascript

  1. 1. Santhosh Kumar Github.com/santhotech An Introduction to Design Patterns
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 31. Thank You

×