百度前端的七巧板 - Tangram

1,939 views

Published on

Infoq 百度技术沙龙 4.16

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

No Downloads
Views
Total views
1,939
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
65
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

百度前端的七巧板 - Tangram

  1. 1. Tangram berg infoQ
  2. 2. Agenda• Challenges & dreams• Architecture• Tangram Base• Tangram UI
  3. 3. Challenges & dreams
  4. 4. Responseas Fast as we can
  5. 5. Changing Every Day
  6. 6. Rich Internet Application
  7. 7. Legacy from 2001, new legacy everyday
  8. 8. The dreams•• Javascript•
  9. 9. Architecture
  10. 10. app widgetcomponent base
  11. 11. app widgetcomponent base
  12. 12. app widgetcomponent base
  13. 13. app widget UIcomponent base
  14. 14. app widget UIcomponent base
  15. 15. Tangram base
  16. 16. Challenges••••
  17. 17. • • T.dom.addClass(ele, "highlight");
  18. 18. • • T.dom.addClass(ele, "highlight");• • T.e("#container").addClass("highlight");
  19. 19. • • T.dom.addClass(ele, "highlight");• • T.e("#container").addClass("highlight");•
  20. 20. page:
  21. 21. startBaiduHI.js: Put Tangram in a clusure
  22. 22. Conclusions•••
  23. 23. Tangram UI
  24. 24. Challenges• •••
  25. 25. constructor ... ...prototype ...
  26. 26. constructorprototype
  27. 27. constructorPlugin constructorprototypePlugin prototype
  28. 28. baidu.ui.Dialog.register(function(dialog){ dialog.addEventListener("onload", function(){ if(dialog.type == "alert"){ baidu.dom.insertHTML( dialog.getId("footer"), "beforeEnd", getButtonString() ); } });}); Constructor
  29. 29. baidu.ui.Dialog.extend({ okText : " ", _ok : function(){ this.close(); }}); Prototype
  30. 30. 462 Dialog 44 closeButton 57 draggable 54 iframe 69 keyboard 44 modal 99 resizable 26 smartCover
  31. 31. UI =
  32. 32. DataUI =
  33. 33. Data +UI =
  34. 34. Data +UI = DOM
  35. 35. Data +UI = DOM +
  36. 36. Data +UI = DOM + Control
  37. 37. Javascript
  38. 38. Data +UI = DOM + Control
  39. 39. Data +UI = DOM + Control
  40. 40. Data +UI = DOM + Control
  41. 41. Javascript
  42. 42. DOM
  43. 43. DOMHTML:
  44. 44. DOMHTML:Javascript:
  45. 45. Data +UI = DOM + Control
  46. 46. Data +UI = DOM + Control
  47. 47. Data +UI = DOM + Control
  48. 48. UI
  49. 49. ui.Base ui.createButton
  50. 50. ui.Base ui.createButton
  51. 51. ui.Base ui.create lang.Class baiduButton
  52. 52. ui.Base mix-in ui.create lang.Class inherit baiduButton
  53. 53. button dialog table ...
  54. 54. button dialog table ... alert confirm modal keyboard ...
  55. 55. button dialog table ... alertdraggable confirmstateable modal keyboard ... ...
  56. 56. Conclusions• • •• •
  57. 57. About us
  58. 58. http://tangram.baidu.com
  59. 59. Conclusions
  60. 60. • • •• Javascript•
  61. 61. Tangram
  62. 62. mp3 IMTangram hao123
  63. 63. !anks berg
  64. 64. !anks berg Twitter: @cnberg : @berg i@cnberg.com

×