【前端Mvc】mvc behind-alphatown

6,754 views
6,574 views

Published on

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • frontEnd-MVC
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,754
On SlideShare
0
From Embeds
0
Number of Embeds
4,177
Actions
Shares
0
Downloads
108
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

【前端Mvc】mvc behind-alphatown

  1. 1. Practice MVC as features, not frameworks MVC DexterYy @
  2. 2. http://site.douban.com/118836/
  3. 3. )• “ ” LBS• “ ” 3D• “AJAX ”• web app Flash•
  4. 4. XD
  5. 5. XD• MVC• MVC
  6. 6. “ ”• “ ” —— WASD• —— vs Graph• —— “ ”
  7. 7. “ ”• Bring real-life to software, rethought for the web Google+ slogan XX• 3D• GUI Metaphor
  8. 8. “AJAX ”• / viewport google maps• JSON• —— web• “ ” overlap widget
  9. 9. “ ” web app• Single Page App wiki• GUI —— layout• —— layout
  10. 10. “ ”• View CouchDB• “ ”•• “ ”
  11. 11. zhuangbility...
  12. 12. •• URL•••• webapp
  13. 13. MVC
  14. 14. MVC
  15. 15. MVC• MVC• MVC
  16. 16. MVC• MVC• MVC MVC
  17. 17. MVC• MVC• MVC MVC MVC
  18. 18. MVC• MVC• MVC MVC MVC
  19. 19. •••
  20. 20. MVC &
  21. 21. 1.• OzJS• CommonJS module••• JS
  22. 22. •• Model View• “MVC ”
  23. 23. • “ ” micro-framework• Thomas Fuchs: Zepto and the rise of the JavaScript Micro-Frameworks• Dustin Diaz: Ender.js - The open submodule library
  24. 24. 2. message passing• Alan Kay: "OOP to me means only messaging, ..."• PubSub / EventEmitter / CustomEvent / ...• Observer• MVC
  25. 25. • Observer• View Controller•
  26. 26. • Observer• reset
  27. 27. • Observer event / /“ ”“ ”==
  28. 28. 3. URL Router• web• Single-page WebApp URL SEO• URL DOM• URL• URL• UNIX Plan 9• “Plan 9 ”• URL WebApp “ ”
  29. 29. • url• router 30
  30. 30. 4. UI delegate • uiproxy • UI • DOM
  31. 31. • className• class• UI View View DOM• View UI• ——> ——> ——>
  32. 32. 5. Render• 1 2• 1 2 DOM• API DOM SVG Canvas
  33. 33. 5. Render• 1 2• 1 2 DOM• API DOM SVG Canvas• API
  34. 34. HTML4
  35. 35. • template• format python• convertTpl micro-templating John Resig/Underscore
  36. 36. • DomCanvas layout• DOM Canvas API• ie6• SVG raphael.js
  37. 37. 6. DataSource• Model•
  38. 38.
  39. 39. module M V C XD MVC
  40. 40. Model• Model URL• Model View Controller Model• Model Model make Controller•
  41. 41. View• + UI View widget/ View• View Model Controller / Martin Fowler Passive View• View web MVC web GUI UI DOM View View DOM
  42. 42. View• View UI Controller • UI DOM • web UI / • Google+ circle• Cocoa UI View View DOM View
  43. 43. Controller• URL routing API widget• View Model• App MVC
  44. 44. MVC Server Model Pluggable Server Contorller Widgets http/ / Model Controller / View / App / URL UI/DOM HTML / /
  45. 45. MVCSmalltalk-80 Ruby On Rails ASP.NET Cocoa Model View Controller: History, theory and usage
  46. 46. We need SMART Models, THINControllers, and DUMB Views
  47. 47. MVC Its no big deal
  48. 48. MVC Its no big deal Thanks• http://www.douban.com/people/Dexter_Yy/• blog http://www.limboy.com• http://site.douban.com/118836/• MVC module https://github.com/dexteryy/OzJS/tree/master/ mod

×