Anything But Typical

Anything But TypicalLearning to Love JavaScript Prototypes

Page 1 © 2010 Razorfish. All rights reserved.

Dan Nichols

March 14, 2010

JavaScript


Object-Oriented Programming


class


Inheritance


prototype(not the library)


The story so far…


<a onclick=“javascript:alert(‘chaos!’)”>



…except it wasn’t all good.






Sound familiar?



prototype (not the library) to the rescue!


Everything is an object


Every object has a prototype


prototypes do good things


Encourage modularityand reusability


Provide a consistent wayto do (different) things


Keep code to a minimum


Make complexity easy

What is a prototype, exactly?



A reference point for other objects

Property lookup chain




instance

Date

Object



instance

Date

Object



instance

Date

Object



instance

Date

Object


JavaScript is different frommost other OOP languages

Anatomy of a prototype


rex

Poodle

Dog

Object



Constructor



Property

Method



Constructor

Inheritance



Instance

Instance Property

this and the lookup chain


fluffy

Cat

Object

socks



socks

Cat

Object



fluffy

Cat

Object

Execution context: this and call()


Execution context: this and call()


Execution context with instances


Same outcome


Inheritance

Working with inherited behavior


LimitedContainer

Container

Object



LimitedContainer

Container

Object



LimitedContainer

Container

Object


JavaScript is the Frankensteinof the OOP world

Borrowing from multiple prototypes



One small problem

The constructor problem


The constructor problem


Fixing the constructor problem


Fixing the constructor problem



prototype isn’t love at first sight


Putting prototypes to work

Requirements

• Four kinds of rules on the form:

Required

Email

Number

Zip Code

• Multiple rules can apply to one field

• Rules need to be inferred from data-rich, standard HTML

• Error messages should be specific

• Flexible enough to be:

Usable for all other forms on the site

Extended for use in other projects


The Plan

• On load:

1. Create validation rules for each field

2. Set up submit handler

• When form is submitted:

1. Cycle through all rules

2. If a field fails a rule

• Mark it invalid

• Create an error message for it

• Don’t check any more rules for that field

3. Show all error messages



ValidatingForm

Object

Validator

NumberValidator

PatternValidator

RequiredValidator

EmailValidator


Libraries are there to make life easier


Think about your approach


Dive in!

Thank YouDan [email protected]

Blog: http://heydanno.com/blogCode demo: http://heydanno.com/sxsw


Anything But Typical

Documents

need11 page

extension does12 page

snippets of code8 page

lot of time series10

thisinstance prototype

datedate prototype

prototype template

js libraries