![Example : 1 var addMyEvent = function( el,ev,fn ){ if( el.addEventListener ){ el.addEventListener( ev,fn, false ); }else if(el.attachEvent){ el.attachEvent( "on" + ev, fn ); } else{ el["on" + ev] = fn; } };](https://image.slidesharecdn.com/designpatterninanexpressivelanguage-javascript-140628052201-phpapp01/75/Design-pattern-in-an-expressive-language-java-script-19-2048.jpg)
Uploaded byAmit Thakkar
Design pattern in an expressive language java script
This document outlines a presentation on JavaScript design patterns, including the constructor, module, revealing module, facade, promise/deferred, and decorator patterns. The presentation provides examples and demos of each pattern to show how they can be implemented in JavaScript to write organized, reusable code. The target audience is professional developers looking to improve their knowledge of design patterns and apply them with JavaScript.
Design pattern in an expressive language java script
- 1. Design Pattern inan Expressive Language JavaScript Design Pattern
- 2. Agenda ★ JavaScript Summary ★What? Why? How? ★ Anti Pattern ★ Constructor Pattern ★ Module Pattern ★ Revealing Module Pattern ★ Facade Pattern ★ Promise Deferred Pattern ★ Decorator Pattern
- 3. About Me Amit Thakkar TechBlogger @ CodeChutney.in JavaScript Lover Working on MEAN Stack Twitter: @amit_thakkar01 LinkedIn: linkedin.com/in/amitthakkar01 Facebook: facebook.com/amit.thakkar01
- 4. This session istargeted at professional developers wishing to improve their knowledge of design patterns and want to learn how to write beautiful, structured and organized code with JavaScript Programming Language. Target Audience
- 5. JavaScript Summary 1. Everythingis an Object 2. Loose Typing 3. Decent DOM API 4. Asynchronicity
- 6. What? They are reusablesolutions to commonly occurring problems in software design. Or we can say they are as templates for how we solve problems.
- 7. They help usbuild upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we’re attempting to solve. Why?
- 8. How? 1. They areproven solutions. 2. They are like component so can be easily reused. 3. They are common for all languages
- 9. Anti Patterns 1. Pollutingthe global object. 2. Passing strings rather than function to either setTimeout or setInterval. 3. Modifying the Object class prototype. 4. Using JavaScript in an inline form as this is inflexible.
- 10. Constructor Patterns JavaScript doesn'tsupport the concept of classes but it does support special constructor functions that work with objects. By simply prefixing a call to a constructor function with the keyword "new", we can tell JavaScript we would like the function to behave like a constructor and instantiate a new object with the members defined by that function. Inside a constructor, the keyword this references the new object that's being created.
- 11. You can checkoutDemo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 12. Module Patterns The Modulepattern was originally defined as a way to provide both private and public encapsulation for classes. Modules are an integral piece of any robust application's architecture.
- 13. You can checkoutDemo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 14. Exercise Time You canexercise form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 15. Revealing Module Patterns InModule Pattern, we have to move function into object hash which we wished to make public. This pattern is improved version of Module pattern. In this pattern, we define all of our functions and variables in the private scope and return an anonymous object with pointers to the private functionality we wished to reveal as public.
- 16. You can checkoutDemo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 17. Facade Patterns This patternprovides a convenient higher-level interface to a larger body of code or may support methods with a wide range of behaviors, hiding its true underlying complexity.
- 18. You can checkoutDemo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 19. Example : 1 varaddMyEvent = function( el,ev,fn ){ if( el.addEventListener ){ el.addEventListener( ev,fn, false ); }else if(el.attachEvent){ el.attachEvent( "on" + ev, fn ); } else{ el["on" + ev] = fn; } };
- 20. Example : 2 bindReady:function() { if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used } else if ( document.attachEvent ) { document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready );
- 21. Promise Deferred Patterns In thenot too distant past the primary tool available to JavaScript programmers for handling asynchronous events was the callback.
- 22. You can checkoutDemo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 23. Exercise Time You canexercise form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 24. Decorator/Wrapper Patterns It allows behaviorto be added to an individual object, either statically or dynamically.
- 25. You can checkoutDemo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 26.
- 27.
Editor's Notes
- #9 They provide solid approaches to solving issues in software development using proven techniques that reflect the experience and insights the developers that helped define them bring to the pattern.