Download to read offline
Uploaded byShreyance Jain
Design pattern
This document discusses various JavaScript design patterns. It begins by defining design patterns as recurring solutions to common software design problems. It then covers types of patterns such as creational, structural, and behavioral. Specific patterns like module, revealing module, singleton, prototype, factory, facade, and observer are demonstrated. Benefits include reusability, communication, and encapsulation. Drawbacks include additional complexity and difficulty testing in some cases. Examples are provided to illustrate usage of the patterns.
Design pattern
- 1.
- 2. Agenda ● What ? ● Types ofDesign Patterns ● Some comman Anti-Patterns ● Benefits and Disadvantages ● Various Design Patterns
- 3. ● Design pattern arerecurring solutions to software design problems you find again and again in real-world application development ● Standardized solutions to common problems in software design What ?
- 4. Describes a badsolution to a particular problem which resulted in a bad situation occurring Examples of anti-patterns in JavaScript are the following: Polluting the global namespace by defining a large number of variables in the global context Passing strings rather than functions to either setTimeout or setInterval as this triggers the use of eval() internally. Modifying the Object class prototype (this is a particularly bad anti-pattern) Using JavaScript in an inline form as this is inflexible The use of document.write where native DOM alternatives such as document.createElement are more appropriate. Anti-Patterns
- 5. Benefits & Drawbacks Benefits: Designpatterns enable large-scale reuse of software architectures Patterns explicitly capture expert knowledge and design tradeoffs, and make this expertise more widely available Patterns help improve developer communication Drawbacks: Patterns do not lead to direct code reuse Patterns are deceptively simple Teams may suffer from pattern overload Patterns are validated by experience and discussion rather than by automated testing
- 6.
- 7. Creational Patterns concern theprocess of object creation. Structural Patterns concern with integration and composition of classes and objects. Behavioral Patterns concern with class or object communication.
- 8. CREATIONAL PATTERNS Factory Method Abstract Factory Builder Prototype Singleton STRUCTURAL PATTERNS Adapter Bridge Composite Decorator Façade Flyweight Proxy BEHAVIORAL PATTERNS Chainof Responsibility Command Interpreter Iterator Mediator Memento Observer State Strategy Template Method Visitor
- 9. Modern Day Patterns The Module Pattern The Revealing Module Pattern The Singleton Pattern The Observer Pattern The Mediator Pattern The Prototype Pattern The Facade Pattern The Factory Pattern
- 10. Module Design Pattern Focuseson public and private access to methods & variables.
- 11.
- 12. Advantages Cleaner approach fordevelopers Supports private data Less clutter in the global namespace Localization of functions and variables through closures
- 13. Disadvantages Private methods areunaccessible, some people say that this leads to the inability of unit testing Private methods and functions lose extendability since they are unaccessible (see my comment in the previous bullet point).
- 14. Revealing Module DesignPattern Same as Module Pattern, the only difference is that it was engineered as a way to ensure that all methods and variables are kept private until they are explicitly exposed; usually through an object literal returned by the closure from which it’s defined.
- 15.
- 16. Advantages Cleaner approach fordevelopers Supports private data Less clutter in the global namespace Localization of functions and variables through closures The syntax of our scripts are even more consistent Explicitly defined public methods and variables which lead to increased readability
- 17. Disadvantages Same as ModulePattern
- 18. Singleton Design Pattern Restrictsinstantiation of an object to a single reference
- 19.
- 20. Advantages Reduced memory footprint Singlepoint of access Delayed initialization that prevents instantiation until required
- 21. Disadvantages Once instantiated, they’rehardly ever “reset”. Harder to unit test and sometimes introduces hidden dependencies.
- 22.
- 23. Prototype Design Pattern Theprototype pattern focuses on creating an object that can be used as a blueprint for other objects through prototypal inheritance.
- 24.
- 25. Advantages New objects createdfrom the “skeleton” of an existing object inherit references to existing functions on the prototype chain, thus boosting performance and keeping memory footprints to a minimum. Great for an application where the focus is on object creation
- 26. Disadvantages Overkill for aproject that uses very few objects and/or does not have an underlying emphasis on the extension of prototype chains
- 27. Factory Design Pattern Providesan interface for developers to create new objects through the use of the factory rather than invoking the new operator on an object.
- 28.
- 29. Advantages The Factory patterncan be especially useful when applied to the following situations: When your object's setup requires a high level of complexity When you need to generate different instances depending on the environment When you're working with many small objects that share the same properties or need to create components that require similar instantiation or methods Great for decoupling components.
- 30. Disadvantages Add an unnecessarilyadditional aspect of complexity to code. Unit testing can be difficult as a direct result of the object creation process being hidden by the factory methods.
- 31. Facade Design Pattern Concealthe underlying complexity of the code by using an anonymous function as an extra layer. Extremely interesting and very useful for adding an extra layer of security to your already minified code. Extremely useful when coupled with the revealing module pattern.
- 32.
- 33. Advantages Enhances security foryour web application Works well in combination with other patterns Easy to implement Makes it easy to patch internals Provides a simpler public interface Proven useful for other major libraries such as jQuery
- 34. Disadvantages One possible noteworth mentioning is that a developer must decide whether the implicit cost of implementation is really worth the abstraction (though this is generally a small footprint).
- 35. Observer Design Pattern Thispattern implements a single object (the subject) that maintains a reference to a collection of objects (known as “observers”) and broadcasts notifications when a change to state occurs.
- 36.
- 37. Advantages Requires deeper-level thinkingof the relationship between the various components of an application Helps us pinpoint dependencies Excellent at decoupling objects which often promotes smaller, reusable components Dynamic relationships may exist between publishers and subscribers when using this pattern. This provides a great deal of flexibility which may not be as easy to implement when disparate parts of your application are tightly coupled.
- 38. Disadvantages Checking the integrityof your application can become difficult. Switching a subscriber from one publisher to another can be costly.
- 39.
- 40.