JavaScript Code Organizations, Patterns Slides - Zach Dennis
Patterns in JavaScript
-
Upload
dhananjay-kumar -
Category
Education
-
view
1.416 -
download
0
description
Transcript of Patterns in JavaScript
![Page 1: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/1.jpg)
Patterns in JavaScript @debug_mode
![Page 2: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/2.jpg)
Agenda
Start with Object
Functions
Constructor Pattern
Prototype Pattern
Invocation Patterns
Revealing Prototype Pattern
Revealing Module Pattern
![Page 3: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/3.jpg)
Dhananjay Kumar– Evangelist , Telerik– Microsoft MVP – Mindcracker MVP– @debug_mode – http://debugmode.net– http://telerikhelper.net – [email protected]
Your Presenter
![Page 4: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/4.jpg)
JavaScript Objects
Using Literals Using New Operator
Using Object.create()
![Page 5: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/5.jpg)
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
![Page 6: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/6.jpg)
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
![Page 7: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/7.jpg)
Object.create()
It is a static function
It always has two parameters
• Prototype• Properties
![Page 8: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/8.jpg)
JavaScript Functions
Anonymous functions should be assigned to a variable
![Page 9: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/9.jpg)
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.
![Page 10: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/10.jpg)
Passing Variables in Functions
![Page 11: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/11.jpg)
Invocations Patterns
Function Invocation
Pattern
Method Invocation
Pattern
Constructor Invocation
Pattern
InDirect Invocation
Pattern
![Page 12: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/12.jpg)
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
![Page 13: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/13.jpg)
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
![Page 14: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/14.jpg)
Indirect Invocation Pattern
Call() method
Apply () method
Direct method
![Page 15: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/15.jpg)
Revealing Prototype Pattern
It is hard to maintain when functionality grows
It is hard to debug
It is hard to test
This is normally we implement it ,
![Page 16: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/16.jpg)
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
![Page 17: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/17.jpg)
Revealing Prototype Pattern : Overriding
![Page 18: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/18.jpg)
Revealing Module Pattern
To Achieve Private/Public
To Achieve Singleton
To remove singleton , remove self-executable code
![Page 19: Patterns in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022061201/5478e767b4af9fa0158b469b/html5/thumbnails/19.jpg)
Questions?