Design pattern in an expressive language java script
2 likes1,112 views
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.
![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/85/Design-pattern-in-an-expressive-language-java-script-19-320.jpg)
More Related Content
What's hot (9)
Viewers also liked (6)
Similar to Design pattern in an expressive language java script (20)
More from Amit Thakkar (10)
Recently uploaded (20)
Design pattern in an expressive language java script
- 1. Design Pattern in an 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 Tech Blogger @ CodeChutney.in JavaScript Lover Working on MEAN Stack Twitter: @amit_thakkar01 LinkedIn: linkedin.com/in/amitthakkar01 Facebook: facebook.com/amit.thakkar01
- 4. This session is targeted 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. Everything is an Object 2. Loose Typing 3. Decent DOM API 4. Asynchronicity
- 6. What? They are reusable solutions to commonly occurring problems in software design. Or we can say they are as templates for how we solve problems.
- 7. They help us build 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 are proven solutions. 2. They are like component so can be easily reused. 3. They are common for all languages
- 9. Anti Patterns 1. Polluting the 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't support 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 checkout Demo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 12. Module Patterns The Module pattern 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 checkout Demo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 14. Exercise Time You can exercise form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 15. Revealing Module Patterns In Module 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 checkout Demo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 17. Facade Patterns This pattern provides 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 checkout Demo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 19. 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; } };
- 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 the not too distant past the primary tool available to JavaScript programmers for handling asynchronous events was the callback.
- 22. You can checkout Demo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 23. Exercise Time You can exercise form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 24. Decorator/Wrapper Patterns It allows behavior to be added to an individual object, either statically or dynamically.
- 25. You can checkout Demo form: https://github.com/AmitThakkar/JavaScriptDesignPattern
- 26. Questions??
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.