Download - Organizing jQuery Projects Without OO

{ Evented...

Why You Shouldn’t Write

OO jQuery

Why You Shouldn’t Write

OO jQueryTroll

Organization

Organization

X

Code Reuse

We’re Used to It

Strategy

Widget

Widgetfunction function function

Widget

AjaxWidget

Widget

AjaxWidget

HistoryAjaxWidget

Widget

AjaxWidget

HistoryAjaxWidget

super

Widget

AjaxWidget

HistoryAjaxWidget

super

super

Widget

AjaxWidget

Widget

AjaxWidget HistoryWidget

Widget

Composability

ComposabilityX

OO Code in JS is Crippled

Evented Code

Instead of calling a method

{widget.activate();

Widget

User Code

Widget

User Code

1:1

Widget

User Code

1:1 Sync

Trigger an Event

}element.trigger("activate")

Listener

User Code

Listener Listener

Advantages

Familiar Model

{$("div").click(function() { // do stuff})

Evented Code Fits More

Cleanly with Requirements

“When the user picks an item

from the autocompleter”

Real Example

Caveat: Simple Technique

I’ve Used This Technique on Large Projects

div.ui-tabs

div.ui-tabs

keypressclick

div.ui-tabs

keypressclick

tabactivate

tabactivate

default

a) open paneb) mark tab selected

analogy: typing in text box triggers a change event

tabactivate

default

a) open paneb) mark tab selected

return false

Tech in the Example

Arista Theme

Sass and Compass

(try to avoid using JS to set

up layouts)

Staticmatic

jQuery BBQ(Ben Alman)