Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

JavaScript Patterns - I

JavaScript Patterns - I

Intro to Design Patterns and some of common JavaScript Patterns

Avatar for praveenvignesh

praveenvignesh

January 29, 2015
Tweet

Other Decks in Programming

Transcript

  1. ©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
  2. ©2014 • Solution to Common Problem • Proven Techniques to

    Solve efficiently • Simply, Best Practices What is Design Patterns 29/01/2015
  3. ©2014 • Requirement • unpredictable • Reusable, • Extendable, •

    Well organised code. Why we need Design Patterns 29/01/2015
  4. ©2014 • Patterns extracted from BaseCamp code base is “Rails”

    • Libraries - JQuery • Organization Libraries - KnockoutJS • Framework - EmberJS What are all Patterns 29/01/2015
  5. ©2014 • Time Complexity • Space Complexity General Patterns 29/01/2015

    if(name == “foo” || name == “bar”) { //statement } if(/^(foo|bar)$/.test(name)) { //statement }
  6. ©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 }
  7. ©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) }
  8. ©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)
  9. ©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”}
  10. 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”}
  11. ©2014 • Piece of code that causes more problem than

    it solves. Anti-patterns 29/01/2015
  12. ©2014 References & Code 29/01/2015 • JavaScript Pattern - stoyan

    stefanov • https://github.com/shichuan/javascript- patterns
  13. ©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