Practice MVC as features, not frameworks
•
8 likes•1,729 views
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 connect views to controllers and models. 3. Implementing a URL router to handle application routes and updating the DOM. 4. Having views delegate tasks like rendering to separate UI modules to separate concerns.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Practice MVC as features, not frameworks
Similar to Practice MVC as features, not frameworks (20)
More from taobao.com
More from taobao.com (20)
Recently uploaded
Recently uploaded (20)
Practice MVC as features, not frameworks
- 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 • “ ” • • “ ”
- 14. zhuangbility...
- 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
- 23. • • •
- 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