Object Oriented
JavaScript
By Kanakaraj Venkataswamy
28th & 29th November 2013
Who am i
Tech Lead
Hertz ( www.hertz247.com )
email: kanakarajv@techaspect.com
twitter: @rajakvk
Blog: www.vkanakaraj.word...
Who are you?

•
•
•
•

Name
Hobby
A secret about you
Within 2 minutes
Agenda

•
•
•
•
•

What is OO?
Why OOJS?
Important concepts
Design pattern
requirejs
What is OO?

•

Encapsulation

•

Inheritance

•

Polymorphism

•

etc.
Why OOJS?

•
•
•
•
•

Not only for form validation
Complex
Client side intensive
Need better organisation
Reuse
background

•
•
•
•
•
•

Interpreted, prototype based, dynamically
typed, has first-class functions by Brendan
Eich in 10 ...
object
•
•
•
•
•
•
•
•
•
•

key value pair
key is string, value is „any‟ javascript value
var myObj = {}; // empty object
...
Important concepts
•
•
•
•
•
•
•
•
•
•

Data type
Scope
Falsy
IIF / Function as first class object
Hoisting
arguments
Call...
Data Types
•

Primitive types
o
o
o
o

•

o

Everything else is object
o
o
o

•

number
string
boolean
undefined
null

o

...
Scope
Scope in a programing language controls the
visibility and lifetimes of variables and
parameters.

•
•
•

Global sco...
Falsy
The following values are falsy
o
o
o
o
o
o

false
0 (zero)
“” (empty string”)
null
undefined
NaN (not a number)

Eve...
Function - first class
object
Function

•
•
•
•
•
•

is an instance of Object type
can have properties
can have methods
ca...
IFF
anonymous function
function(){
// code
}
Immediately invoked function
function(arg) {
alert(arg)
} (5)
hoisting

•

function declarations and variable
declarations are always moved (hoisted)
invisibly to the top of their cont...
arguments

•
•
•
•
•

an object available within all functions
exists only inside function body
not an Array but similar
h...
call / apply

•
•

call is used when you want to control the
scope that will be used in the function called.
http://jsfidd...
closure
Definition: closure is the local variable for a
function - kept alive after the function has
returned

•
•

Garbag...
name space

•
•
•

Name spacing is a technique employed to
avoid collisions with other objects or
variables in the global ...
prototype

•
•

prototype is an object from which other
objects inherit properties and methods
Every function has a protot...
Great power comes with
great responsibility
Take away
JavaScript is a flexible and expressive
language that should be written clearly and

concisely.
require.js
Asynchronous Module Definition (AMD)
The problem & solution

•
•
•
•
•

Solves dependency management problem
API: define(id, dependencies, factory)
Keep execut...
Design Pattern
Introduction

•

Patterns are proven solutions to software
development problems.

•
•

Patterns are reusable for similar p...
What is covered here?
Singleton - Creational
Module - Structural
Decorator - Structural
Observer - Behavioural
Singleton Pattern

•
•
•
•

The singleton pattern is a design pattern that
is used to restrict instantiation of a class to...
Module Pattern

•
•

Loose definition: a way to provide both
private and public encapsulation for classes.
http://addyosma...
Decorator

•
•

Decorators offered the ability to add
behaviour to existing classes in a system
dynamically.

http://jsfid...
Observer Pattern

•

•

Define a one-to-many dependency between
objects so that when one object changes
state, all its dep...
Upcoming SlideShare
Loading in …5
×

Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)

1,747 views

Published on

Data type
Scope
Falsy
IIF / Function as first class object
Hoisting
arguments
Call / Apply
Closure
Name spacing
Prototype

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,747
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)

  1. 1. Object Oriented JavaScript By Kanakaraj Venkataswamy 28th & 29th November 2013
  2. 2. Who am i Tech Lead Hertz ( www.hertz247.com ) email: kanakarajv@techaspect.com twitter: @rajakvk Blog: www.vkanakaraj.wordpress.com
  3. 3. Who are you? • • • • Name Hobby A secret about you Within 2 minutes
  4. 4. Agenda • • • • • What is OO? Why OOJS? Important concepts Design pattern requirejs
  5. 5. What is OO? • Encapsulation • Inheritance • Polymorphism • etc.
  6. 6. Why OOJS? • • • • • Not only for form validation Complex Client side intensive Need better organisation Reuse
  7. 7. background • • • • • • Interpreted, prototype based, dynamically typed, has first-class functions by Brendan Eich in 10 days for NetScape (now Mozilla) on Sep „1995. ECMA-262 (1-Jun„97, 2-Jun‟98, 3-Dec‟99, 4-x, 5-Dec‟09) Mocha, LiveScript, JavaScript V8, Chakra, Rhino, Carakan, Nitro, etc. Hosts: Browser, Acrobat Reader, Tools in Creative suit, etc Core, DOM, BOM
  8. 8. object • • • • • • • • • • key value pair key is string, value is „any‟ javascript value var myObj = {}; // empty object var myObj = new Object(); // empty object var myObj = new Human(); // will be explained myObj = { fname: „raja‟, lname: „kvk‟ }; console.log(myObj.fname); // raja myObj.project = „hertz‟; console.log( myObj[„project‟] ); // hertz delete myObj.name
  9. 9. Important concepts • • • • • • • • • • Data type Scope Falsy IIF / Function as first class object Hoisting arguments Call / Apply Closure Name spacing Prototype
  10. 10. Data Types • Primitive types o o o o • o Everything else is object o o o • number string boolean undefined null o function array date regex, etc. Object is nothing but key/value pair
  11. 11. Scope Scope in a programing language controls the visibility and lifetimes of variables and parameters. • • • Global scope Function scope this
  12. 12. Falsy The following values are falsy o o o o o o false 0 (zero) “” (empty string”) null undefined NaN (not a number) Everything else is truthy
  13. 13. Function - first class object Function • • • • • • is an instance of Object type can have properties can have methods can be stored in a variable can be passed as parameter can be returned from a function
  14. 14. IFF anonymous function function(){ // code } Immediately invoked function function(arg) { alert(arg) } (5)
  15. 15. hoisting • function declarations and variable declarations are always moved (hoisted) invisibly to the top of their containing scope by the javascript interpreter. • one var statement per scope at the top
  16. 16. arguments • • • • • an object available within all functions exists only inside function body not an Array but similar have length property does not have Array methods like pop
  17. 17. call / apply • • call is used when you want to control the scope that will be used in the function called. http://jsfiddle.net/rajakvk/3Yp6D/
  18. 18. closure Definition: closure is the local variable for a function - kept alive after the function has returned • • Garbage collection Memory leak
  19. 19. name space • • • Name spacing is a technique employed to avoid collisions with other objects or variables in the global scope. No built in support. var AppSpace = AppSpace || {}; AppSpace.Mail = function(){}; AppSpace.Video = function(){};
  20. 20. prototype • • prototype is an object from which other objects inherit properties and methods Every function has a prototype by default
  21. 21. Great power comes with great responsibility
  22. 22. Take away JavaScript is a flexible and expressive language that should be written clearly and concisely.
  23. 23. require.js Asynchronous Module Definition (AMD)
  24. 24. The problem & solution • • • • • Solves dependency management problem API: define(id, dependencies, factory) Keep execution order Loads text, CoffeeScript, template, etc. Minify & Build capability (optimization)
  25. 25. Design Pattern
  26. 26. Introduction • Patterns are proven solutions to software development problems. • • Patterns are reusable for similar problems. Creational, Structural, Behavioural
  27. 27. What is covered here? Singleton - Creational Module - Structural Decorator - Structural Observer - Behavioural
  28. 28. Singleton Pattern • • • • The singleton pattern is a design pattern that is used to restrict instantiation of a class to one object. Namespacing, Grouping related methods and attributes together. Tightly coupled, Unit testing is difficult http://jsfiddle.net/rajakvk/gv644/
  29. 29. Module Pattern • • Loose definition: a way to provide both private and public encapsulation for classes. http://addyosmani.com/resources/essentialjs designpatterns/book/#modulepatternjavascri pt
  30. 30. Decorator • • Decorators offered the ability to add behaviour to existing classes in a system dynamically. http://jsfiddle.net/rajakvk/69EdP/
  31. 31. Observer Pattern • • Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. http://www.dofactory.com/javascriptobserver-pattern.aspx

×