This document discusses JavaScript design patterns. It begins with background on design patterns and their prerequisites. It then covers different types of patterns like creational, structural and behavioral. Specific patterns like constructor, singleton, module, observer, mediator, prototype and others are explained. The document also discusses MV* patterns, namespacing patterns, lazy initialization and terms like loose coupling. It concludes with an exercise asking the reader to identify pros and cons of patterns and patterns used in jQuery.
2. Note
• PPT prepared for educational purpose
• There may be errors, use your own discretion wherever reqd
https://www.linkedin.com/in/dhbalaji
2
3. Agenda
• Background & Prerequisites
• Discussion
• Applications
• Advanced
• Take home activity
https://www.linkedin.com/in/dhbalaji
3
4. Background
• Design patterns are reusable solutions to commonly occurring
problems.
• They provide common vocabulary to describe solutions.
• Not every solution, algorithm can qualify to be called a pattern.
• Prerequisites
• Proficiency in JavaScript concepts
• Want to write beautiful code
https://www.linkedin.com/in/dhbalaji
4
5. Lets discuss
• Pattern has 2 parts to it
• Process
• Output
• Rule of three.
• Fitness of purpose
• Usefulness
• Applicability
• Anti-patterns – Bad solution to a problem. For example modifying
Object Prototype methods is a anti pattern
https://www.linkedin.com/in/dhbalaji
5
8. JS – Creational patterns
• It deals with how we create new objects
• var a = {}
• Other alternatives
• Object.assign
• Object.create
• Object.defineProperties
https://www.linkedin.com/in/dhbalaji
8
9. JS – Constructor pattern
• Constructors are used to create a specific type of objects
• When you call a Constructor to create a method in JS, the
properties of constructor prototype are copied to new Object
function Car(name) {
this.name = name;
}
var newCar = new Car(‘tata’);
https://www.linkedin.com/in/dhbalaji
9
10. Singleton pattern
• Create a object if no instance found, else reference the existing
instance
• Only one instance per app
• Example: namespaces
https://www.linkedin.com/in/dhbalaji
10
11. Module pattern
• Helps the code in keeping it organized
• Examples:
• Object literals – tie together properties and values
• Can provide public and private variables
• IIFE is also a module pattern
https://www.linkedin.com/in/dhbalaji
11
12. Revealing module pattern
• In module pattern all the properties and methods were exposed
• In Revealing module, the developer chooses to make few
properties and methods available
https://www.linkedin.com/in/dhbalaji
12
13. Observer pattern
• Also known as publish/subscribe pattern
• Watch for other object to change and perform an action
• We establish listen and broadcast relationship
• Client -> subscribes and unsubscribe for watching changes
• Producer notifies the client
• Promotes loose coupling
• One of the best tools out there.
https://www.linkedin.com/in/dhbalaji
13
14. Mediator pattern
• Mediator in real life assists in negotiation and conflict resolution
• Mediator pattern provides a uniform interface to communicate
• In pub/sub the object passed around did not have clear agreement
or contract. In mediator problem, this problem is solved
https://www.linkedin.com/in/dhbalaji
14
15. Prototype pattern
• Creation of a new object based on a template of an existing
object through cloning
• Used in prototypal inheritance
https://www.linkedin.com/in/dhbalaji
15
16. Command pattern
• Encapsulate method invocation, requests into a single object
• Separate the code to execute a method with or without a
parameter
• Classes often have methods like run, execute
https://www.linkedin.com/in/dhbalaji
16
17. Facade pattern
• Façade gives a different version of reality, relates to a pleasing
exterior of a building in construction domain.
• We provide a high level interface for large code
• Provides ease of use and smaller code to use
https://www.linkedin.com/in/dhbalaji
17
18. Factory pattern
• Helps in creating objects
• Developer need not be worried about the class
• Used when the steps to create a new object is complex
• Abstract factory
• Uses a combination of factories to create new objects
https://www.linkedin.com/in/dhbalaji
18
19. Mixin pattern
• Classes which provide functionality to be inherited by other class
• JS does not support multiple inheritance
https://www.linkedin.com/in/dhbalaji
19
20. Decorator pattern
• Introduces new functionality to the code without modifying the
code underneath
• Variants
• Pseudo classical decorator
• Uses interfaces
• Interface is a way of telling the must have properties and methods
in a class
https://www.linkedin.com/in/dhbalaji
20
21. Flyweight
• Useful solution for slow, non performant code
• It’s an approach where common non performant code is taken and
kept in a shared location or single object
• Example: Google maps integration
https://www.linkedin.com/in/dhbalaji
21
22. MV* pattern
• Improves application organization through separation of concerns
• Easy maintanence
• Domain element or date Model
• View and Presentation View
• Handling user interaction and event Controller
• MVVM Data binding between view and the model
https://www.linkedin.com/in/dhbalaji
22
23. Name spacing patterns
• Namespacing is a technique to avoid collision with objects in the
global namespace
• Useful in organizing blocks of functionality
• JavaScript has no built in support for namespaces
• We use closures and objects to achieve namespaces
https://www.linkedin.com/in/dhbalaji
23
24. Types of namespaces
• Single global variables
• Prefix namespacing
• Nested namespacing
• IIFE
• Namespace injection
https://www.linkedin.com/in/dhbalaji
24
25. Lazy initialization
• Allows us to delay expensive process like creating objects etc until
they are needed
• Lazy loading is used when we want to load additional page
resources when needed
https://www.linkedin.com/in/dhbalaji
25
26. Adapter pattern
• Translates the interface of a class into an interface compatible
with the current system.
https://www.linkedin.com/in/dhbalaji
26
27. Façade pattern
• Provides a simpler interface to larger body of code.
https://www.linkedin.com/in/dhbalaji
27
28. Iterator pattern
• Allows us to access the elements of the object without needing to
expose its form.
• We can also iterate a string in JavaScript and read its value
https://www.linkedin.com/in/dhbalaji
28
29. Strategy pattern
• The algorithm to be deployed is decided at runtime.
• The algorithms used are subjective to the client or datatype or
changed environment.
https://www.linkedin.com/in/dhbalaji
29
30. Proxy pattern
• A class which serves as a interface for something else.
• You call one method in a class which in turns calls something else
https://www.linkedin.com/in/dhbalaji
30
31. Builder pattern
• Similar to chaining methods
• The output of a step is used as input to an another and the details
are abstracted to the user.
https://www.linkedin.com/in/dhbalaji
31
32. Other terms
• Loose coupling – easy maintainability by removing dependencies
wherever possible
• AMD – asynchronous modules which are loaded whenever required
with help of script loaded like requires
• Plugin is a software program that adds a missing functionality in a
program
https://www.linkedin.com/in/dhbalaji
32
33. Exercise
• Identify pros & cons of every pattern
• Take any library, identify the patterns used. For this you have to
look at source code. Go with jquery
• Prototypal vs Class based inheritance
https://www.linkedin.com/in/dhbalaji
33