Bookmarklet型(云端)应用的前端架构

3,582 views

Published on

BOOKMARKLET 型(云端)应用的前端架构
腾讯 · 屈超

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
3,582
On SlideShare
0
From Embeds
0
Number of Embeds
1,435
Actions
Shares
0
Downloads
43
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Bookmarklet型(云端)应用的前端架构

  1. 1. BOOKMARKLET ( ) · QuChao.comWednesday, December 22, 2010 1 1. “ ” QQ Bookmarklet 2.
  2. 2. CONTENTS • Bookmarklet 15min • 10min • DOM 10minWednesday, December 22, 2010 2 D2
  3. 3. ABOUT ME - Chappell QU · · Chappell.Wat@Gmail.com http://QuChao.comWednesday, December 22, 2010 3 Web
  4. 4. BOOKMARKLETWednesday, December 22, 2010 4
  5. 5. BOOKMARKLET Bookmarklet Favlet = = Bookmark Favorite + Applet + Applet AppletWednesday, December 22, 2010 51. Bookmarklet Bookmark applet Java2. Favlet Favorite IE3. wikipedia (http://zh.wikipedia.org/zh-cn/Bookmarklet)
  6. 6. BOOKMARKLET Bookmarklet “ = Bookmark + Applet ”Wednesday, December 22, 2010 61. bookmarklets.com 1998 2001 favlet Tantek Çelik bookmarklet2. wikipedia3.
  7. 7. BOOKMARKLET void : undefinded void(0);”>…</a> <a href=” javascript: void javascript : undefindedWednesday, December 22, 2010 71. bookmarklet2. IE6 onclick
  8. 8. BOOKMARKLET javascript:(function(){ /* blah blah */ })();Wednesday, December 22, 2010 8 bookmarklet undefinded
  9. 9. BOOKMARKLET javascript: (function (F, i, r, e, b, u, g, L, I, T, E) { if (F.getElementById(b)) return; E = F[i + NS] && F.documentElement.namespaceURI; E = E ? F[i + NS](E, script) : F[i](script); E[r](id, b); E[r](src, I + g + T); E[r](b, u); (F[e](head)[0] || F[e](body)[0]).appendChild(E); E = new Image; E[r](src, I + L); })(document, createElement, setAttribute, getElementsByTagName, FirebugLite, 4, firebug- lite.js, releases/lite/latest/skin/xp/sprite.png, https://getfirebug.com/, #startOpened);Wednesday, December 22, 2010 91. Bookmarklet2. Firebug Lite (http://getfirebug.com/firebuglite)3.
  10. 10. BOOKMARKLET javascript: function fnStartDesign(sUrl) { var nScript = document.createElement(script); nScript.setAttribute(language, JavaScript); nScript.setAttribute(src, sUrl); document.body.appendChild(nScript); } fnStartDesign(http://www.sprymedia.co.uk/design/ design/media/js/design-loader.js);Wednesday, December 22, 2010 101. Design Bookmarklet (http://www.sprymedia.co.uk/article/Design)2.
  11. 11. BOOKMARKLET javascript: void((function () { var element = document.createElement(script); element.setAttribute(src, http://dict.cn/hc/init.php); document.body.appendChild(element); })())Wednesday, December 22, 2010 111. Dict.cn Bookmarklet (http://dict.cn/foot/help.htm)2.
  12. 12. BOOKMARKLET javascript: (function (q) { !! q ? q.toggle() : (function (d, j) { j = d.createElement(script); j.src = //ime.qq.com/fcgi-bin/getjs; j.setAttribute(ime-cfg, lt=2); d.getElementsByTagName(head)[0].appendChild(j) })(document) })(window.QQWebIME)Wednesday, December 22, 2010 121. QQ Bookmarklet (http://py.qq.com/web)2.
  13. 13. Wednesday, December 22, 2010 13
  14. 14. Bookmarklet • CGI 301/302 CGI etc. CDN •Wednesday, December 22, 2010 141.2. CGI session3.
  15. 15. BOOKMARKLET 6 var = Math.min( href , 2,083 >100k >100k >100k >100k , 508 >100k >100k 34,464 65,530 ); 2,083 65,536 >100k 2,347 >100kWednesday, December 22, 2010 151. bookmarklet2. Bookmarklet3. IE6 508 bytes4. 20
  16. 16. BOOKMARKLET href 2,083 >100k >100k >100k >100k 508 >100k >100k 34,464 65,530 2,083 65,536 >100k 2,347 >100k 255 4096Wednesday, December 22, 2010 161. “ ” “ ”2. TT4 255 bytes QQBrowser 4096 bytes
  17. 17. BOOKMARKLET = 255Wednesday, December 22, 2010 17 TT4 255 bytes
  18. 18. BOOKMARKLET 3javascript: (function2(q) { !! q ? q.toggle() : (function (d, j) { j = d.createElement(script); 1 j.src = //ime.qq.com/fcgi-bin/getjs; 4 j.setAttribute(ime-cfg, lt=2); d.getElementsByTagName(head)[0].appendChild(j) })(document)})(window.QQWebIME) 1. CGI 2. 3. 4. 5. ……Wednesday, December 22, 2010 18 QQ Bookmarklet1. // https2. 2553. /4.5. ……
  19. 19. Wednesday, December 22, 2010 19
  20. 20. • • DOM •Wednesday, December 22, 2010 201.2. DOM DOM3. “ ”
  21. 21. JAVASCRIPT • • • • • ……Wednesday, December 22, 2010 21 Javascript1. $() QQ2. QQ QQWebIME3.4. WebQQ QQ QQ WebQQ
  22. 22. CSS/HTML A B C HTML iframe Flash/SilverLight/... UI CSS JSWednesday, December 22, 2010 22A. CSSB. QQ iframeFirefoxC. Javascript
  23. 23. QQ <style> A+ qqwebime { color: blue; } </style> HTML <script> isIE && doc.createElement(‘qqwebime’); </script> CSS <qqwebime>QQ </qqwebime> ref: http://ejohn.org/blog/html5-shiv/Wednesday, December 22, 2010 231. QQ “ ” “ A” “ CSS ” *{} :first-child{}2. jQuery Jesig (http://ejohn.org/blog/html5-shiv/)3. ISD Damao
  24. 24. DOMWednesday, December 22, 2010 24
  25. 25. DOM DOM iframe iframe iframeWednesday, December 22, 2010 251. iframe2. iframe3.5.
  26. 26. PT.A DOM 1. 2. load 3.Wednesday, December 22, 2010 26 DOM
  27. 27. PT.B DOM 1. DOM 2. DOM 3.Wednesday, December 22, 2010 27 DOM
  28. 28. PT.C DOM • Mutation Events DOMNodeInserted • Mutation Events DOM Level 2 Core (ref: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html) • 1~4 1~9 3~5 9-11 9Wednesday, December 22, 2010 281. Mutation Events DOMNodeInsertedIntoDocument DOMSubtreeModified DOMNodeInserted2. Mutation Events DOM Level 2 (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html)3. DOM Level2 LV3 IE9B IE 6/7/8
  29. 29. PT.C DOM document.addEventListener( • Mutation Events // DOMNodeInserted DOMNodeInserted, function (evt) { // // var curTarget = evt.target; • Mutation Events DOM Level 2 Core // iframe if (1 !== curTar.nodeType || ‘iframe’ !== curTar.nodeName) return; (via http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html) // iframe DOM • }, 1~4 1~9 3~5 9/10 9 false );Wednesday, December 22, 2010 29
  30. 30. PT.D DOM • IE CSS Expression • Behavior Expression (ref: http://dean.edwards.name/weblog/2005/06/base64-sexy/) • 6/7Wednesday, December 22, 2010 301. PNG IE6 (http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/) IE CSS Expression IEbug2. Expression “ ” DeanEdwards 05 (http://dean.edwards.name/weblog/2005/06/base64-sexy/)
  31. 31. PT.D DOM <style> • IE iframe { CSS Expression behavior:expression(iframeInserted(this)); } </style> • <script> Behavior Expression function iframeInserted(node) { (via http://dean.edwards.name/weblog/2005/06/base64-sexy/) // node.style.behavior = none; • // 6/7 iframe DOM } </script>Wednesday, December 22, 2010 31
  32. 32. PT.E DOM • IE8 Accessor (getter/setter) innerHTML appendChild • IE8 Accessor (getter/setter) MSDN (ref: http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) • 8stdWednesday, December 22, 2010 321. IE outerHTML DOM Accessor (getter/setter)MSDN IE8 innerHTML appendChild2. MSDN (http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx)
  33. 33. PT.E DOM • // IE8 innerHTML Accessor (getter/setter) innerHTML var propDscrptr = Object.getOwnPropertyDescriptor appendChild (Element.prototype, ‘innerHTML’); // innerHTML Object.defineProperty(Element.prototype, ‘innerHTML’, { // setter • set: function (html) Accessor (getter/setter) IE8 { MSDN // innerHTML set propDscrptr.set.call(this, html); (via http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) // iframe DOM • }); } 8stdWednesday, December 22, 2010 33 innerHTML hack outerHTML
  34. 34. PT.E DOM • IE8 Accessor (getter/setter) // innerHTML appendChild appendChild var methodProto = Element.prototype[‘appendChild’]; // appendChild Element.prototype[‘appendChild’] = function () { // appendChild • IE8 res = methodProto.apply(this, arguments); var Accessor (getter/setter) MSDN // iframe DOM (via http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) return result; • }; 8stdWednesday, December 22, 2010 34 appendChild hack insertBefore
  35. 35. PT.F DOM • • iframe iframe flag flag iframe •Wednesday, December 22, 2010 351. A iOS Android fallback2.
  36. 36. · http://QuChao.com Chappell.Wat@Gmail.comWednesday, December 22, 2010 36
  37. 37. Dec 18th, 2010Wednesday, December 22, 2010 37

×