0
BOOKMARKLET                          (   )                                    ·                                QuChao.comW...
CONTENTS   •                            Bookmarklet   15min   •                                          10min   •        ...
ABOUT ME                                         - Chappell QU                                     ·           ·          ...
BOOKMARKLETWednesday, December 22, 2010                 4
BOOKMARKLET   Bookmarklet                                                                Favlet       =                   ...
BOOKMARKLET     Bookmarklet                                       “         =      Bookmark         +       Applet        ...
BOOKMARKLET                                                          void    :                                            ...
BOOKMARKLET                               javascript:(function(){                                   /* blah blah */       ...
BOOKMARKLET     javascript: (function (F, i, r, e, b, u, g, L, I, T, E) {         if (F.getElementById(b)) return;        ...
BOOKMARKLET         javascript: function fnStartDesign(sUrl) {             var nScript = document.createElement(script);  ...
BOOKMARKLET     javascript: void((function () {         var element = document.createElement(script);         element.setA...
BOOKMARKLET javascript: (function (q) { !! q ? q.toggle() : (function (d, j) {         j = d.createElement(script);       ...
Wednesday, December 22, 2010   13
Bookmarklet     •               CGI             301/302                CGI                                                ...
BOOKMARKLET                                                                                 6     var                     ...
BOOKMARKLET                          href             2,083   >100k       >100k   >100k   >100k                           ...
BOOKMARKLET                                           =   255Wednesday, December 22, 2010                         17      ...
BOOKMARKLET                                                 3javascript: (function2(q) { !! q ? q.toggle() :    (function ...
Wednesday, December 22, 2010   19
•     •                                 DOM     •Wednesday, December 22, 2010                             201.2.          ...
JAVASCRIPT     •     •     •     •     •            ……Wednesday, December 22, 2010                                  21    ...
CSS/HTML                                         A             B                       C                                  ...
QQ                                                    <style>                        A+                              qqweb...
DOMWednesday, December 22, 2010         24
DOM                                             DOM                                                        iframe         ...
PT.A                                            DOM              1.              2.                     load              ...
PT.B                                     DOM              1.                               DOM              2.            ...
PT.C                                                                DOM            •                  Mutation Events     ...
PT.C                                                      DOM                    document.addEventListener(            •  ...
PT.D                                                                  DOM            •                  IE               C...
PT.D                                                DOM                    <style>            •           IE              ...
PT.E                                                                        DOM           •                   IE8         ...
PT.E                                                   DOM            • // IE8         innerHTML                          ...
PT.E                                                        DOM            •                  IE8                         ...
PT.F                                              DOM             •             •                        iframe           ...
·                               http://QuChao.com                               Chappell.Wat@Gmail.comWednesday, December ...
Dec 18th, 2010Wednesday, December 22, 2010                    37
Upcoming SlideShare
Loading in...5
×

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

3,390

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,390
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×