Why You Shouldn't Write OO
54
{ Evented...
-
Upload
yehuda-katz -
Category
Documents
-
view
1.054 -
download
1
Transcript of Why You Shouldn't Write 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
Widget
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
Tabs
div.ui-tabs
div.ui-tabs
keypressclick
div.ui-tabs
keypressclick
tabactivate
div.ui-tabs
keypressclick
tabactivate
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)
Demo
