Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 993 views

Data type

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

Statistics

Views

Total Views
993
Views on SlideShare
993
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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.wordpress.com
  • Who are you? • • • • Name Hobby A secret about you Within 2 minutes View slide
  • Agenda • • • • • What is OO? Why OOJS? Important concepts Design pattern requirejs View slide
  • 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 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
  • 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
  • Important concepts • • • • • • • • • • Data type Scope Falsy IIF / Function as first class object Hoisting arguments Call / Apply Closure Name spacing Prototype
  • 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
  • Scope Scope in a programing language controls the visibility and lifetimes of variables and parameters. • • • Global scope Function scope this
  • 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
  • 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
  • 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 containing scope by the javascript interpreter. • one var statement per scope at the top
  • 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
  • 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/
  • closure Definition: closure is the local variable for a function - kept alive after the function has returned • • Garbage collection Memory leak
  • 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(){};
  • prototype • • prototype is an object from which other objects inherit properties and methods Every function has a prototype by default
  • 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 execution order Loads text, CoffeeScript, template, etc. Minify & Build capability (optimization)
  • Design Pattern
  • Introduction • Patterns are proven solutions to software development problems. • • Patterns are reusable for similar problems. Creational, Structural, Behavioural
  • 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 one object. Namespacing, Grouping related methods and attributes together. Tightly coupled, Unit testing is difficult http://jsfiddle.net/rajakvk/gv644/
  • Module Pattern • • Loose definition: a way to provide both private and public encapsulation for classes. http://addyosmani.com/resources/essentialjs designpatterns/book/#modulepatternjavascri pt
  • Decorator • • Decorators offered the ability to add behaviour to existing classes in a system dynamically. http://jsfiddle.net/rajakvk/69EdP/
  • 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