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

1. BOOKMARKLET
( )
·
QuChao.com
Wednesday, December 22, 2010 1
1. “ ” QQ Bookmarklet
2.

2. CONTENTS
• Bookmarklet 15min
• 10min
• DOM 10min
Wednesday, December 22, 2010 2
D2

3. ABOUT ME
- Chappell QU
· ·
Chappell.Wat@Gmail.com
http://QuChao.com
Wednesday, December 22, 2010 3
Web

4. BOOKMARKLET
Wednesday, December 22, 2010 4

5. BOOKMARKLET
Bookmarklet Favlet
= =
Bookmark Favorite
+ Applet +
Applet Applet
Wednesday, December 22, 2010 5
1. Bookmarklet Bookmark applet Java
2. Favlet Favorite IE
3. wikipedia (http://zh.wikipedia.org/zh-cn/Bookmarklet)

6. BOOKMARKLET
Bookmarklet “
=
Bookmark
+
Applet ”
Wednesday, December 22, 2010 6
1. bookmarklets.com 1998 2001 favlet Tantek Çelik bookmarklet
2. wikipedia
3.

7. BOOKMARKLET
void :
undefinded
void(0);”>…</a>
<a href=” javascript: void
javascript :
undefinded
Wednesday, December 22, 2010 7
1. bookmarklet
2. IE6 onclick

8. BOOKMARKLET
javascript:(function(){
/* blah blah */
})();
Wednesday, December 22, 2010 8
bookmarklet undefinded

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 9
1. Bookmarklet
2. Firebug Lite (http://getfirebug.com/firebuglite)
3.

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 10
1. Design Bookmarklet (http://www.sprymedia.co.uk/article/Design)
2.

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 11
1. Dict.cn Bookmarklet (http://dict.cn/foot/help.htm)
2.

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 12
1. QQ Bookmarklet (http://py.qq.com/web)
2.

13. Wednesday, December 22, 2010 13

14. Bookmarklet
•
CGI 301/302 CGI
etc.
CDN
•
Wednesday, December 22, 2010 14
1.
2. CGI session
3.

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 >100k
Wednesday, December 22, 2010 15
1. bookmarklet
2. Bookmarklet
3. IE6 508 bytes
4. 20

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 4096
Wednesday, December 22, 2010 16
1. “ ” “ ”
2. TT4 255 bytes QQBrowser
4096 bytes

17. BOOKMARKLET
= 255
Wednesday, December 22, 2010 17
TT4 255 bytes

18. BOOKMARKLET
3
javascript: (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 Bookmarklet
1. //
https
2. 255
3. /
4.
5. ……

19. Wednesday, December 22, 2010 19

20. •
• DOM
•
Wednesday, December 22, 2010 20
1.
2. DOM DOM
3. “ ”

21. JAVASCRIPT
•
•
•
•
• ……
Wednesday, December 22, 2010 21
Javascript
1. $() QQ
2. QQ QQWebIME
3.
4. WebQQ QQ QQ WebQQ

22. CSS/HTML
A B C
HTML iframe Flash/SilverLight/...
UI
CSS JS
Wednesday, December 22, 2010 22
A. CSS
B. QQ iframe
Firefox
C. Javascript

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 23
1. QQ “ ” “ A” “ CSS ” *
{} :first-child{}
2. jQuery Jesig (http://ejohn.org/blog/html5-shiv/)
3. ISD Damao

24. DOM
Wednesday, December 22, 2010 24

25. DOM
DOM
iframe
iframe
iframe
Wednesday, December 22, 2010 25
1. iframe
2. iframe
3.
5.

26. PT.A
DOM
1.
2. load
3.
Wednesday, December 22, 2010 26
DOM

27. PT.B
DOM
1.
DOM
2. DOM
3.
Wednesday, December 22, 2010 27
DOM

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 9
Wednesday, December 22, 2010 28
1. Mutation Events DOMNodeInsertedIntoDocument DOMSubtreeModified
DOMNodeInserted
2. 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. 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. PT.D
DOM
• IE CSS Expression
• Behavior Expression
(ref: http://dean.edwards.name/weblog/2005/06/base64-sexy/)
• 6/7
Wednesday, December 22, 2010 30
1. PNG IE6 (http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/)
IE CSS Expression IE
bug
2. Expression “ ” Dean
Edwards 05 (http://dean.edwards.name/weblog/2005/06/base64-sexy/)

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. 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)
• 8std
Wednesday, December 22, 2010 32
1. IE outerHTML DOM Accessor (getter/setter)
MSDN IE8 innerHTML appendChild
2. MSDN (http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx)

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
• }); } 8std
Wednesday, December 22, 2010 33
innerHTML hack outerHTML

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;
• }; 8std
Wednesday, December 22, 2010 34
appendChild hack insertBefore

35. PT.F
DOM
•
• iframe
iframe flag flag
iframe
•
Wednesday, December 22, 2010 35
1. A iOS Android fallback
2.

36. ·
http://QuChao.com
Chappell.Wat@Gmail.com
Wednesday, December 22, 2010 36

37. Dec 18th, 2010
Wednesday, December 22, 2010 37