Defensive, Cross-Browser Coding with Prototype

Defsi, cro-brows codg

.prototype

.wh

ialm

aly

yr co

MSIE

T fi ag JavaScript grief

#1:“My co wks Fifox, but

fails eryw else…”(peciay IE)

Fifox s Fibug, crse

Safi sWeb Inspecr

& Drosa

Opa sDragfly

hp://w.opa.com/products/dragfly/

Inet Expl s…★ Vual Stud★ Microst Script Ed★ Microst Script Debu

Ty a...★ Suck

Debug regi IE 6–7:

a. Do “fmal” bug if

’s yr g

b.Use a JavaScript s get tac prompt

Jhhp://w.biyg.com/jh/

c.Use MS Script Debu/Ed get ack trac

d.Do old-fhn“a” bug

#2:“OK, my co wks IE now,

but slow counicg by tegraph.”

Plu: Use Fibug prir

Pr-m’s prilg: msu elaps me betwn

y two co pots

var Timer = Class.create({ initialize: function() { this.startTime = new Date().valueOf(); }, end: function() { var endTime = new Date().valueOf(); return (this.startTime - endTime).toString(); } });

function doSomethingCostly() { var timer1 = new Timer(); // do something that takes forever... alert(timer1.end());}

Ce udy:zebra-ripg a tab

Two tts:1 rows 10 rows

var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); this.element.select("tbody > tr:nth-child(even)") .invoke("addClassName", "row-even"); this.element.select("tbody > tr:nth-child(odd)") .invoke("addClassName", "row-odd");

alert(timer.end() + "ms"); }});

Revn 1

1 Rows 10 Rows

Safi

Fifox

IE

14ms 603ms

26ms 367ms

341ms 5268ms

:-(

var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); // Why use two selectors? Use one and loop instead var trs = this.element.select("tbody > tr"); trs.each( function(tr, i) { tr.addClassName(i % 2 == 0 ? "row-odd" : "row-even"); });

alert(timer.end() + "ms"); }});

Revn 2

1 Rows 10 Rows

Safi

Fifox

IE

12ms 123ms

14ms 130ms

160ms 3245ms

:-(

var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); // Eschew CSS selector syntax altogether var tbodies = this.element.getElementsByTagName("tbody"); for (var i = 0, tbody, trs; i < tbodies.length; i++) { tbody = tbodies[i]; trs = tbody.getElementsByTagName("tr"); for (var j = 0, tr; j < trs.length; j++) { tr = trs[j]; // filter out anything that isn't a direct child of the TBODY if (tr.parentNode !== tbody) continue; $(tr).addClassName(j % 2 == 0 ? "row-odd" : "row-even"); } } alert(timer.end() + "ms"); }});

Revn 3

1 Rows 10 Rows

Safi

Fifox

IE

5ms 53ms

13ms 143ms

160ms 31ms

:-(

Revn 4var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); var tbodies = this.element.getElementsByTagName("tbody"); for (var i = 0, tbody, trs; i < tbodies.length; i++) { tbody = tbodies[i]; trs = tbody.rows; // there's a pre-defined collection for this for (var j = 0, tr; j < trs.length; j++) { tr = trs[j]; // OK, we'll stop "extending" elements now tr.className += j % 2 == 0 ? " row-odd" : " row-even"; } } alert(timer.end() + "ms"); }});

1 Rows 10 Rows

Safi

Fifox

IE

1ms 8ms

6ms 64ms

20ms 141ms

HOLY CRAP

So wt did we n?

Ls 1:Secr/$$ e opmiz, but

wh gh nos page, y’ brg s kns

Ls 2:“Extdg” emts slow,

do not sca lge no sult sets

$ Emt.extd e shrk-wrap f syacc sug

In morn browss, Emt.extd do nog; IE 6–7 s copy ce

meods muay

A Protype DOM lps use

Emt.extd tnay

Wa — sayg“D’t use Protype?”

We, y:Rch tsi

yr abrac wn ’s o coly

Ls #3:A lt b opmizn

go a lg way

A few l n-Protype co, wrt

ce, c mn hugepfmce gas

As always,opmizn si

lps pays f big

Ls 4:Once “fls” ft… op!

#3:“Now ’s py ft IE, but

if I a my page op wn I go lunch, IE’s froz by me

I get back.”

Memy aks

Not ju IE 6.0;IE 7.0 claims fix m, but ’s a li

Y c’t be su yr co ak-fe uil y try

al wld

Framewks c lpa lt, but ’s i

yr probm sol

Driphp://fnwe.com/ieak/

Load yr page; wch memy usage ce

(’s nmal)

Now load page; if memy usage c

aga, ’s bad

A y seg expo no prop

fce n-primis?( “circul fce” ak)

A y signg es tsi Protype’s

e APIs?(e.g., emt.click)

(Protype’s e syem wi c up aft self, but if y

d’t use , y’ yr own)

A y cag Emt.place Emt.upde ctt

wh tacd lts?

If so, tach lts fir

foo.stopObserving("click", respondToFoo);// (detaches the respondToFoo listener)

foo.stopObserving("click");// (detaches all click listeners on foo)

foo.stopObserving();// (detaches _all_ listeners on foo)

Protype 1.6.[next]wi lp y t wh

FAL TT:L IE rug

ornight

#4:“My a pfms wrfuy

now, but my co lks likehum suffg.”

In or wds:“How do I kp my co mataab if s

a f a esespecial c?”

Wt if we cld kpa ugly cks

e place?

Func#wrap

Origal func

function getOffsetTop(element) { return element.offsetTop;}

Modifi func

getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element "layout" if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1;

return proceed(element); });

Only IE nds s modifi rsn

Y c kp “wra” funcs

e place

<script src="js/prototype.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <!--[if IE]> <script src="js/ie-only.js" type="text/javascript"></script> <![endif]-->

BUT: L a lpful cot

// NOTE: Redefined in ie-only.jsfunction getOffsetTop(element) { return element.offsetTop;}

ALSO:Expla why y nd

wk

getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element "layout" if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1;

return proceed(element); });

In or wds,co d...

…n wre co adapts/dgs do quid msagg

#5:“G! My co lks gd I fl. How do I avoid er

vg do aga?”

EAT YR GETABS(wre un tts &funcal tts)

“Oh, I’d lo , but I wk UI lay, y c’t ay un-tt

tface… , yway, we e way o rapidly do tt-drin

lopmt… but y’ right, I’ tay wre a ful tts sn I get

some me…”

SPE ME YR EXCUS

Wre un tts f eryg c be

aum

Protype do ; script.aculo.us do ;

y c do , o

Wre funcal tts make si f

hums tt

QA wi buy y a py

Wre “diy” tts(row curbas

yr co)

Wt abt Senium?WIR?

(cd play hum put)

meh.

Qus?

hp://wdupt.nethp://protypejs.g