Defensive, Cross-Browser Coding with Prototype

3,647 views
3,540 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,647
On SlideShare
0
From Embeds
0
Number of Embeds
801
Actions
Shares
0
Downloads
45
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Defensive, Cross-Browser Coding with Prototype

  1. 1. Defsi, cro-brows codg wh . prototype .
  2. 2. ialm aly
  3. 3. yr co MSIE
  4. 4. T fi ag  JavaScript grief
  5. 5. #1: “My co wks  Fifox, but fails eryw else…” (peciay  IE)
  6. 6. Fifox s Fibug,  crse
  7. 7. Safi s Web Inspecr & Drosa
  8. 8. Opa s Dragfly hp://w.opa.com/products/dragfly/
  9. 9. Inet Expl s… ★ Vual Stud ★ Microst Script Ed ★ Microst Script Debu
  10. 10. Ty a... ★ Suck
  11. 11. Debug regi  IE 6–7:
  12. 12. a. Do “fmal” bug if ’s yr g
  13. 13. b. Use a JavaScript s  get  tac prompt
  14. 14. Jh hp://w.biyg.com/jh/
  15. 15. c. Use MS Script Debu/ Ed  get ack trac
  16. 16. d. Do old-fhn “a” bug
  17. 17. #2: “OK, my co wks  IE now, but  slow  counicg by tegraph.”
  18. 18. Plu: Use  Fibug prir
  19. 19. Pr-m’s prilg: msu elaps me betwn y two co pots
  20. 20. var Timer = Class.create({ initialize: function() { this.startTime = new Date().valueOf(); }, end: function() { var endTime = new Date().valueOf(); return (this.startTime - endTime).toString(); } });
  21. 21. function doSomethingCostly() { var timer1 = new Timer(); // do something that takes forever... alert(timer1.end()); }
  22. 22. Ce udy: zebra-ripg a tab
  23. 23. Two tts: 1 rows  10 rows
  24. 24. Revn 1 var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); this.element.select(quot;tbody > tr:nth-child(even)quot;) .invoke(quot;addClassNamequot;, quot;row-evenquot;); this.element.select(quot;tbody > tr:nth-child(odd)quot;) .invoke(quot;addClassNamequot;, quot;row-oddquot;); alert(timer.end() + quot;msquot;); } });
  25. 25. 1 Rows 10 Rows Safi 14ms 603ms Fifox 26ms 367ms IE 341ms 5268ms
  26. 26. :-(
  27. 27. Revn 2 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(quot;tbody > trquot;); trs.each( function(tr, i) { tr.addClassName(i % 2 == 0 ? quot;row-oddquot; : quot;row-evenquot;); }); alert(timer.end() + quot;msquot;); } });
  28. 28. 1 Rows 10 Rows Safi 12ms 123ms Fifox 14ms 130ms IE 160ms 3245ms
  29. 29. :-(
  30. 30. Revn 3 var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); // Eschew CSS selector syntax altogether var tbodies = this.element.getElementsByTagName(quot;tbodyquot;); for (var i = 0, tbody, trs; i < tbodies.length; i++) { tbody = tbodies[i]; trs = tbody.getElementsByTagName(quot;trquot;); 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 ? quot;row-oddquot; : quot;row-evenquot;); } } alert(timer.end() + quot;msquot;); } });
  31. 31. 1 Rows 10 Rows Safi 5ms 53ms Fifox 13ms 143ms IE 160ms 31ms
  32. 32. :-(
  33. 33. Revn 4 var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); var tbodies = this.element.getElementsByTagName(quot;tbodyquot;); 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 quot;extendingquot; elements now tr.className += j % 2 == 0 ? quot; row-oddquot; : quot; row-evenquot;; } } alert(timer.end() + quot;msquot;); } });
  34. 34. 1 Rows 10 Rows Safi 1ms 8ms Fifox 6ms 64ms IE 20ms 141ms
  35. 35. HOLY CRAP
  36. 36. So wt did we n?
  37. 37. Ls 1: Secr/$$ e opmiz, but wh gh nos   page, y’ brg   s kns
  38. 38. Ls 2: “Extdg” emts  slow,  do not sca  lge no sult sets
  39. 39. $  Emt.extd e  shrk-wrap f syacc sug
  40. 40. In morn browss, Emt.extd do nog;  IE 6–7  s  copy ce meods muay
  41. 41. A Protype DOM lps use Emt.extd tnay
  42. 42. Wa —   sayg “D’t use Protype?”
  43. 43. We, y: Rch tsi  yr abrac wn ’s o coly
  44. 44. Ls #3: A lt b  opmizn go a lg way
  45. 45. A few l  n- Protype co, wrt ce, c mn huge pfmce gas
  46. 46. As always, opmizn si  lps pays f big
  47. 47. Ls 4: Once  “fls” ft… op!
  48. 48. #3: “Now ’s py ft  IE, but if I a my page op wn I go  lunch, IE’s froz by  me I get back.”
  49. 49. Memy aks
  50. 50. Not ju IE 6.0; IE 7.0 claims  fix m, but ’s a li
  51. 51. Y c’t be su yr co  ak-fe uil y try    al wld
  52. 52. Framewks c lp a lt, but ’s i yr probm  sol
  53. 53. Drip hp://fnwe.com/ieak/
  54. 54. Load yr page; wch memy usage ce (’s nmal)
  55. 55. Now load  page; if memy usage c aga, ’s bad
  56. 56. A y seg expo no prop  fce n-primis? ( “circul fce” ak)
  57. 57. A y signg es tsi  Protype’s e APIs? (e.g., emt.click)
  58. 58. (Protype’s e syem wi c up aft self, but if y d’t use , y’  yr own)
  59. 59. A y cag Emt.place  Emt.upde  ctt wh tacd lts?
  60. 60. If so, tach  lts fir
  61. 61. foo.stopObserving(quot;clickquot;, respondToFoo); // (detaches the respondToFoo listener) foo.stopObserving(quot;clickquot;); // (detaches all click listeners on foo) foo.stopObserving(); // (detaches _all_ listeners on foo)
  62. 62. Protype 1.6.[next] wi lp y t wh 
  63. 63.  FAL TT: L IE rug ornight
  64. 64. #4: “My a pfms wrfuy now, but my co lks like hum suffg.”
  65. 65. In or wds: “How do I kp my co mataab if  s  a f a ese special c?”
  66. 66. Wt if we cld kp a  ugly cks  e place?
  67. 67. Func#wrap
  68. 68. Origal func function getOffsetTop(element) { return element.offsetTop; }
  69. 69. Modifi func getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element quot;layoutquot; if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1; return proceed(element); } );
  70. 70. Only IE nds  s  modifi rsn
  71. 71. Y c kp  “wra” funcs  e place
  72. 72. <script src=quot;js/prototype.jsquot; type=quot;text/javascriptquot;></script> <script src=quot;js/main.jsquot; type=quot;text/javascriptquot;></script> <!--[if IE]> <script src=quot;js/ie-only.jsquot; type=quot;text/javascriptquot;></script> <![endif]-->
  73. 73. BUT: L a lpful cot
  74. 74. // NOTE: Redefined in ie-only.js function getOffsetTop(element) { return element.offsetTop; }
  75. 75.  ALSO: Expla why y nd  wk
  76. 76. getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element quot;layoutquot; if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1; return proceed(element); } );
  77. 77. In or wds, co   d...
  78. 78. …n wre co adapts/dgs  do  quid msagg
  79. 79. #5: “G! My co lks  gd  I fl. How do I avoid er vg  do  aga?”
  80. 80. EAT YR GETABS (wre un tts & funcal tts)
  81. 81. “Oh, I’d lo , but I wk   UI lay,  y c’t ay un-tt  tface… , yway, we e way o rapidly  do tt-drin lopmt… but y’ right, I’ tay wre a ful  tts  sn  I get some me…”
  82. 82. SPE ME YR EXCUS
  83. 83. Wre un tts f eryg  c be aum
  84. 84. Protype do ; script.aculo.us do ; y c do , o
  85. 85. Wre funcal tts  make  si f hums  tt  
  86. 86. QA wi buy y a py
  87. 87. Wre “diy” tts (row curbas  yr co)
  88. 88. Wt abt Senium? WIR? (cd  play hum put)
  89. 89. meh.
  90. 90. Qus? hp://wdupt.net hp://protypejs.g

×