Patterns in JavaScript
@debug_mode
Agenda

Start with Object
Functions
Constructor Pattern

Prototype Pattern
Invocation Patterns
Revealing Prototype Pattern...
Your Presenter
 Dhananjay Kumar
– Evangelist , Telerik
– Microsoft MVP
– Mindcracker MVP
– @debug_mode
– http://debugmode...
JavaScript
Objects

Using Literals

Using New
Operator

Using
Object.create()
Object as Literal

Object literal is an expression

It creates new object each time it
appears in the code
A single obj...
Object using new operator
new operator creates a new
object
new operator initialize created
object also
new operator in...
Object.create()

It is a static function
It always has two
parameters
• Prototype
• Properties
JavaScript Functions

Anonymous functions should
be assigned to a variable
Nested Functions
 Nested function can access variable
of parent function
 Parent function cannot access
variable of nest...
Passing Variables in Functions
Invocations Patterns

Function
Invocation
Pattern

Method
Invocation
Pattern

Constructor
Invocation
Pattern

InDirect
Inv...
Function Invocation Pattern
 When you call a function as an
expression then it is known as
Function Invocation Pattern
 ...
Method Invocation Pattern
 Function which is part of an
object is known as Method
 Invocation of method is known as
Meth...
Indirect Invocation Pattern

Call()
method

Apply ()
method

Direct
method
Revealing Prototype Pattern
This is normally we implement it ,
 It is hard to maintain when
functionality grows
 It is h...
Revealing Prototype Pattern
 Code is reusable
 Functions can be overridden by
prototyping
 There are no variables or fu...
Revealing Prototype Pattern : Overriding
Revealing Module Pattern
 To Achieve Private/Public
 To Achieve Singleton
 To remove singleton , remove selfexecutable ...
Questions?
Upcoming SlideShare
Loading in …5
×

Patterns in JavaScript

2,183 views

Published on

This is slides for Patterns in JavaScript

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,183
On SlideShare
0
From Embeds
0
Number of Embeds
1,503
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Patterns in JavaScript

  1. 1. Patterns in JavaScript @debug_mode
  2. 2. Agenda Start with Object Functions Constructor Pattern Prototype Pattern Invocation Patterns Revealing Prototype Pattern Revealing Module Pattern
  3. 3. Your Presenter  Dhananjay Kumar – Evangelist , Telerik – Microsoft MVP – Mindcracker MVP – @debug_mode – http://debugmode.net – http://telerikhelper.net – Dhananjay.kumar@telerik.com
  4. 4. JavaScript Objects Using Literals Using New Operator Using Object.create()
  5. 5. Object as Literal Object literal is an expression It creates new object each time it appears in the code A single object literal can create many objects in loop
  6. 6. Object using new operator new operator creates a new object new operator initialize created object also new operator invokes a function as give in above code snippet. Function invoked after new operator is Constructor
  7. 7. Object.create() It is a static function It always has two parameters • Prototype • Properties
  8. 8. JavaScript Functions Anonymous functions should be assigned to a variable
  9. 9. Nested Functions  Nested function can access variable of parent function  Parent function cannot access variable of nested function  You cannot call nestedfunction from anywhere but the function it is nested within.
  10. 10. Passing Variables in Functions
  11. 11. Invocations Patterns Function Invocation Pattern Method Invocation Pattern Constructor Invocation Pattern InDirect Invocation Pattern
  12. 12. Function Invocation Pattern  When you call a function as an expression then it is known as Function Invocation Pattern  First each parameter gets evaluated and then being passed as argument to function  Function return either value or undefined to LHS variable .If called function does not have any return value then it returns undefined
  13. 13. Method Invocation Pattern  Function which is part of an object is known as Method  Invocation of method is known as Method Invocation Pattern  A method can access its parent object with this operator  Binding of method to object happens on execution of method
  14. 14. Indirect Invocation Pattern Call() method Apply () method Direct method
  15. 15. Revealing Prototype Pattern This is normally we implement it ,  It is hard to maintain when functionality grows  It is hard to debug  It is hard to test
  16. 16. Revealing Prototype Pattern  Code is reusable  Functions can be overridden by prototyping  There are no variables or functions in global namespace  Functions are loaded into memory only once
  17. 17. Revealing Prototype Pattern : Overriding
  18. 18. Revealing Module Pattern  To Achieve Private/Public  To Achieve Singleton  To remove singleton , remove selfexecutable code
  19. 19. Questions?

×