Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

新版阿尔法城背后的前端MVC实践

•
•
Dexter Yang
Dexter Yang

This document discusses the Model-View-Controller (MVC) pattern and how to implement it for web applications. Some key points discussed include: 1. Using small JavaScript modules and message passing between components to implement MVC. 2. Using an observer pattern to notify views when models change and controllers when user events occur. 3. Implementing a URL router to handle application URLs and navigation. 4. Having views delegate user interface handling to separate UI components.

1 of 52
Practice MVC as features, not frameworks MVC DexterYy @
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
http://site.douban.com/118836/
新版阿尔法城背后的前端MVC实践
) • “ ” LBS • “ ” 3D • “AJAX ” • web app Flash •
XD
XD • MVC • MVC
“ ” • “ ” —— WASD • —— vs Graph • —— “ ”
“ ” • Bring real-life to software, rethought for the web Google+ slogan XX • 3D • GUI Metaphor
“AJAX ” • / viewport google maps • JSON • —— web • “ ” overlap widget
“ ” web app • Single Page App wiki • GUI —— layout • —— layout
“ ” • View CouchDB • “ ” • • “ ”
zhuangbility...
• • URL • • • • webapp
MVC
MVC
MVC • MVC • MVC
MVC • MVC • MVC MVC
MVC • MVC • MVC MVC MVC
MVC • MVC • MVC MVC MVC
新版阿尔法城背后的前端MVC实践
• • •
MVC &
1. • OzJS • CommonJS module • • • JS
• • Model View • “MVC ”
• “ ” micro-framework • Thomas Fuchs: Zepto and the rise of the JavaScript Micro-Frameworks • Dustin Diaz: Ender.js - The open submodule library
2. message passing • Alan Kay: "OOP to me means only messaging, ..." • PubSub / EventEmitter / CustomEvent / ... • Observer • MVC
• Observer • View Controller •
• Observer • reset
• Observer event / / “ ” “ ” ==
3. URL Router • web • Single-page WebApp URL SEO • URL DOM • URL • URL • UNIX Plan 9 • “Plan 9 ” • URL WebApp “ ”
• url • router 30
4. UI delegate • uiproxy • UI • DOM
• className • class • UI View View DOM • View UI • ——> ——> ——>
5. Render • 1 2 • 1 2 DOM • API DOM SVG Canvas
5. Render • 1 2 • 1 2 DOM • API DOM SVG Canvas • API
HTML4
• template • format python • convertTpl micro-templating John Resig/Underscore
• DomCanvas layout • DOM Canvas API • ie6 • SVG raphael.js
6. DataSource • Model •
•
module M V C XD MVC
Model • Model URL • Model View Controller Model • Model Model make Controller •
View • + UI View widget/ View • View Model Controller / Martin Fowler Passive View • View web MVC web GUI UI DOM View View DOM
View • View UI Controller • UI DOM • web UI / • Google+ circle • Cocoa UI View View DOM View
Controller • URL routing API widget • View Model • App MVC
MVC Server Model Pluggable Server Contorller Widgets http / / Model Controller / View / App / URL UI/DOM HTML / /
MVC Smalltalk-80 Ruby On Rails ASP.NET Cocoa Model View Controller: History, theory and usage
We need SMART Models, THIN Controllers, and DUMB Views
MVC It's no big deal
MVC It's 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

More Related Content

新版阿尔法城背后的前端MVC实践

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