Patterns in JavaScript
facebook.com/telerik
@telerik
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 o...
Object using new operator

new operator creates a new
object

new operator initialize created
object also

new ope...
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 ...
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?
of 19

Presenter deck icenium hol

Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Presenter deck icenium hol

  • 1. Patterns in JavaScript facebook.com/telerik @telerik
  • 2. Agenda Start with Object Functions Constructor Pattern Prototype Pattern Invocation Patterns Revealing Prototype Pattern Revealing Module Pattern
  • 3. Your Presenter  Dhananjay Kumar – Evangelist , Telerik – Microsoft MVP – Mindcracker MVP – @debug_mode – http://debugmode.net – http://telerikhelper.net – Dhananjay.kumar@telerik.com
  • 4. JavaScript Objects Using Literals Using New Operator Using Object.create()
  • 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. 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. Object.create()  It is a static function  It always has two parameters • Prototype • Properties
  • 8. JavaScript Functions Anonymous functions should be assigned to a variable
  • 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. Passing Variables in Functions
  • 11. Invocations Patterns Function Invocation Pattern Method Invocation Pattern Constructor Invocation Pattern InDirect Invocation Pattern
  • 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. 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. Indirect Invocation Pattern Call() method Apply () method Direct method
  • 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. 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. Revealing Prototype Pattern : Overriding
  • 18. Revealing Module Pattern  To Achieve Private/Public  To Achieve Singleton  To remove singleton , remove selfexecutable code
  • 19. Questions?

Related Documents