Object Oriented JavaScript

By Kanakaraj Venkataswamy

28th & 29th November 2013

Who am iTech 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

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 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 numbero stringo booleano undefinedo null

• Everything else is objecto functiono arrayo date o regex, etc.

• Object is nothing but key/value pair

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

• Global scope

• Function scope

• this

FalsyThe following values are falsy

o falseo 0 (zero)o “” (empty string”)o nullo undefinedo 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

IFFanonymous 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/

Definition: closure is the local variable for a function - kept alive after the function has returned

• Garbage collection

• Memory leak

closure

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.jsAsynchronous 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/essentialjsdesignpatterns/book/#modulepatternjavascript

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/javascript-observer-pattern.aspx