Upload
andrew-dupont
View
3.354
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Tired of writing code that breaks in IE? This session explores strategies that Prototype users can employ to write code that works in the real world.
Citation preview
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
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
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