design patterns in javascript
DESCRIPTION
Slides of the 'Design patterns in Javascript' talk in @MadridJS Code from talk can be found in: https://github.com/tcorral/DesignPatterns_code Running examples in: http://tcorral.github.com/Design-Patterns-in-Javascript/ Code of examples in: https://github.com/tcorral/Design-Patterns-in-JavascriptTRANSCRIPT
![Page 1: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/1.jpg)
![Page 2: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/2.jpg)
![Page 3: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/3.jpg)
![Page 4: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/4.jpg)
Someone has already solvedyour problems.
![Page 5: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/5.jpg)
• Abstract those that vary.• Program to an interface not an
implementation.• Favor composition over inheritance.• Strive for loosely coupled designs
between objects that interact.• Classes should be open for extension
but closed for modification.• Depend on abstraction. Do not
depend on concrete classes.
![Page 6: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/6.jpg)
![Page 7: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/7.jpg)
Restricts the instanciation of a class to one object.
![Page 8: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/8.jpg)
![Page 9: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/9.jpg)
![Page 10: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/10.jpg)
![Page 11: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/11.jpg)
Avoids polluting globals.
![Page 12: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/12.jpg)
![Page 13: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/13.jpg)
![Page 14: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/14.jpg)
Allow to use ‘function’ to obtain new objects.
![Page 15: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/15.jpg)
![Page 16: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/16.jpg)
![Page 17: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/17.jpg)
Used to clone objects.
In Javascript is used to create inheritance.
![Page 18: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/18.jpg)
![Page 19: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/19.jpg)
![Page 20: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/20.jpg)
Decouple parts of the code in modules.
Avoid failing your full application for some little error in one module.
![Page 21: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/21.jpg)
![Page 22: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/22.jpg)
![Page 23: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/23.jpg)
Allows to execute more than one method at the same line.
Only one instance of object is needed.
![Page 24: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/24.jpg)
![Page 25: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/25.jpg)
![Page 26: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/26.jpg)
Overwritte the behaviour of one method/functionto reduce time on further executions.
Ideal for updates.
![Page 27: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/27.jpg)
![Page 28: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/28.jpg)
![Page 29: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/29.jpg)
Memoize the executions that have been done.
Reduce time on expensive jobs.
![Page 30: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/30.jpg)
![Page 31: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/31.jpg)
Nullify
![Page 32: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/32.jpg)
Removes all references to local variables to avoid memory leaks.
![Page 33: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/33.jpg)
![Page 34: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/34.jpg)
![Page 35: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/35.jpg)
Removes all references to local variables to avoid memory leaks when the method/function
returns something.
![Page 36: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/36.jpg)
![Page 37: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/37.jpg)
Adapter
![Page 38: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/38.jpg)
Converts the interface of a class into another the clients expect.
Lets classes work together that couldn't otherwise because of incompatible interfaces.
![Page 39: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/39.jpg)
![Page 41: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/41.jpg)
Decorator
![Page 42: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/42.jpg)
Attach additional responsibilities to an object dynamically.
Decorators provide a flexible alternative to subclassing for extending functionality
![Page 43: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/43.jpg)
![Page 45: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/45.jpg)
Factory
![Page 46: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/46.jpg)
Defines an interface for creating an object, but lets subclasses decide which class to instanciate.
Factory Method lets a class defer instanciation to subclasses.
![Page 47: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/47.jpg)
![Page 49: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/49.jpg)
Observer
![Page 50: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/50.jpg)
Defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.
![Page 51: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/51.jpg)
![Page 53: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/53.jpg)
Command
![Page 54: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/54.jpg)
Encapsulates a request as an object, thereby letting you parameterize other objects with different requests, queue or log requests, and support
undoable operations.
![Page 55: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/55.jpg)
![Page 57: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/57.jpg)
Facade
![Page 58: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/58.jpg)
Provides a unified interface to a set of interfaces in a subsystem.
Defines a higher-level interface that makes the subsystem easier to use
![Page 59: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/59.jpg)
![Page 61: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/61.jpg)
Mediator
![Page 62: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/62.jpg)
Defines an object that encapsulates how a set of objects interact.
![Page 63: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/63.jpg)
![Page 64: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/64.jpg)
![Page 65: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/65.jpg)
State
![Page 66: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/66.jpg)
Allows an object to alter its behavior when its internal state changes.
The object will appear to change its class.
![Page 67: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/67.jpg)
![Page 69: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/69.jpg)
Strategy
![Page 70: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/70.jpg)
Defines a family of algorithms, encapsulates eachone, and makes them interchangeable.
![Page 71: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/71.jpg)
![Page 73: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/73.jpg)
![Page 74: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/74.jpg)
Compose objects into tree structures to represent part-whole hierarchies.
Lets clients treat individual objects and compositions of objects uniformly.
![Page 75: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/75.jpg)
![Page 77: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/77.jpg)
![Page 78: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/78.jpg)
Separates elements of the application in layers.
Logic, data and views are separated.
![Page 79: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/79.jpg)
M.V.C
![Page 80: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/80.jpg)
M.V.C
![Page 81: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/81.jpg)
M.V.V.M
![Page 83: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/83.jpg)
![Page 84: Design patterns in Javascript](https://reader035.vdocument.in/reader035/viewer/2022081414/54c4173e4a7959f9278b4578/html5/thumbnails/84.jpg)
http://bit.ly/softhire