Organizing jQuery Projects Without OO

{ Evented...

Why You Shouldn’t Write OO jQuery

Why You Shouldn’t Write OO jQuery Troll

Organization

Organization X

Code Reuse

We’re Used to It

Strategy

Widget

Widget function function function

Widget AjaxWidget

Widget AjaxWidget HistoryAjaxWidget

Widget AjaxWidget super HistoryAjaxWidget

Widget super AjaxWidget super HistoryAjaxWidget

Widget AjaxWidget

Widget Widget AjaxWidget HistoryWidget

Composability

X Composability

OO Code in JS is Crippled Evented Code

Instead of calling a method

{ widget.activate();

User Code Widget

User Code 1:1 Widget

User Code 1:1 Sync Widget

Trigger an Event

} element.trigger("activate")

User Code Listener 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

click keypress div.ui-tabs

click keypress div.ui-tabs tabactivate

a) open pane b) mark tab selected tabactivate default analogy: typing in text box triggers a change event

a) open pane b) mark tab selected tabactivate return false default

Tech in the Example

Arista Theme

Sass and Compass

(try to avoid using JS to set up layouts)

Staticmatic

jQuery BBQ (Ben Alman)

Organizing jQuery Projects Without OO

by Yehuda Katz

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 28

Statistics

Organizing jQuery Projects Without OO Presentation Transcript