JavaScript Patterns - I

Intro to Design Patterns and some of common JavaScript Patterns

Transcript

1. Praveen Vignesh P Technical Consultant, Spritle Software @praveenvignesh | @PraveenVignesh JavaScript Patterns - I
2. ©2014 • What Is Design Patterns • History • Why we need Design Patterns • What are all Patterns • General Patterns • Function Patterns • Object Creation Patterns • Anti-patterns • References & Code Agenda 29/01/2015
3. ©2014 • Solution to Common Problem • Proven Techniques to Solve efficiently • Simply, Best Practices What is Design Patterns 29/01/2015
4. ©2014 History 29/01/2015
5. ©2014 • Requirement • unpredictable • Reusable, • Extendable, • Well organised code. Why we need Design Patterns 29/01/2015
6. ©2014 • Patterns extracted from BaseCamp code base is “Rails” • Libraries - JQuery • Organization Libraries - KnockoutJS • Framework - EmberJS What are all Patterns 29/01/2015
7. ©2014 • Time Complexity • Space Complexity General Patterns 29/01/2015 if(name == “foo” || name == “bar”) { //statement } if(/^(foo|bar)$/.test(name)) { //statement }
8. ©2014 General Patterns 29/01/2015 for(i = 0; i < myArr.length; i++) { //statements } for(i = 0, max = myArr.length; i < max; i++) { //statements } for(i = myArr.length; i--;) { //statements }
9. ©2014 • Single-Thread, • Asynchronous I/O, • Event driven, • Example: ajax Callback Pattern 29/01/2015 function asyn_call() { $.get(“/api/end_point”, function(data) { result = data }) console.log(result) }
10. ©2014 • Initial Script that need to run one time. • Avoid problem with Global variables. • Grouping JavaScript files made easy. • Used in Compiled CoffeeScript, Jquery... Immediate Function Pattern 29/01/2015 (function() { alert(“Init Script”) })() (function(message, global) { alert(“Init Script”) })(“hi”, this)
11. ©2014 • No “class” in JavaScript. • “blueprint” of Object can be archived through constructor patterns. Constructor Pattern 29/01/2015 function constr(value1, value2) { this.pro1 = value1 this.pro2 = value2 } var obj1 = new constr(“foo”, “bar”) // {pro1: “foo”, pro2: “bar”} var obj2 = new constr(“bar”, “foo”) // {pro1: “bar”, pro2: “foo”}
12. Click to edit Master title style ©2014 Constructor Pattern 29/01/2015 • Magic is done by “new” • The execution will be like, function constr(value1, value2) { // var this = {}; this.pro1 = value1; this.pro2 = value2; // return this; } var obj1 = new constr(“foo”, “bar”) // {pro1: “foo”, pro2: “bar”} var obj2 = new constr(“bar”, “foo”) // {pro1: “bar”, pro2: “foo”}
13. ©2014 • Piece of code that causes more problem than it solves. Anti-patterns 29/01/2015
14. ©2014 References & Code 29/01/2015 • JavaScript Pattern - stoyan stefanov • https://github.com/shichuan/javascript- patterns
15. ©2014 WE BUILD APPS THAT PEOPLE LOVE TO USE Enterprise Web Applications Development Cross-Platform Business Mobile Apps Development Social Media Integrated Applications Development Product Development Services 29/01/2015