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

Transcript

1. Practice MVC as features, not frameworks DexterYy @ ׸ϵ ྍϱέغمӬМު֥భ؊MVCൌ࡬
2. έغمӬ൞പઔĤ
3. ֒֒֒֓ĆḣḣݺϠᆃ൞ࣸϱ
4. ୤Я೺೺֥ྍϱĆ http://site.douban.com/118836/
5. ఃൌߎીᆞൔഈཌ଻Ć ḣḣ ᆃ൙ظ҂ିඪ෾༥Ć ḣḣ ဆൕ၂༯षؿڛༀఖ ഈ֥ॖᄎྛϱЧϔĆ ḣḣ ൮Ց܄षᕞĆ ḣḣ
6. Ֆ࠯ඌ࢘؇ुέغمӬ č ҂ซӁ௖) • ၂۱“ֹ৘໊ᇂ”ႋႨč҂൞LBSĎ • ၂۱“ྴ୅གྷൌ”ႋႨč҂൞3DĎ • ၂۱“AJAXֹ๭”ႋႨč҂௓๭ோĎ • ၂۱ᇗ؇๭ྙ߄֥web appč҂ႨFlashĎ • ၂۱భ؊ૡࠢ྘ཛଢč቏฿ߎᄝࡆϫḣĎ
7. ༵ലૼ၂༯ ູ൉હေٳ༅έغمӬ֥หᆘ ҂൞ູਔቓܼۡXD ط൞ၹູᆃུหᆘᆰࢤथקਔषؿᇏ
8. ༵ലૼ၂༯ ູ൉હေٳ༅έغمӬ֥หᆘ ҂൞ູਔቓܼۡXD ط൞ၹູᆃུหᆘᆰࢤथקਔषؿᇏ • ູ൉હေႨMVC • ေႨᄸဢ֥MVC
9. ၂۱“ֹ৘໊ᇂ”ႋႨ • ປಆીႵӑ৽ࢤđႨٚཟট֝ݴđᄝཌྷਣ ֥“ֹ৘ࢫׄ”ᆭࡗ၍׮ ——࡯஍ҠቔčWASDĎა௠ଞׄࠌ • ൪๭ᆭࡗႵ໊ᇂܱ༢čתଲ ༆Кaଽ҆ຓ҆Ď ——इᆔ 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֥Чᇉğሑ෿іඍሇ၍ • ཌྷؓ࣡෿֥aՙ৬؇֥“ֹྙ”Ġэ׮௔َa༥৬؇֥ᅻۂ ໾čoverlapĎĠοླࡆᄛaሱႮطܛ৫֥widget
12. ၂۱“ᇗ؇๭ྙ߄”֥web app • Ԯඪᇏ֥Single Page AppčwikiĎ • ҂൞Ԯ๤ຩ်֥໓Чੀđ҂൞Ԯ๤ೈࡱGUI֥ ণൔ҃अ——ླေ࠹ෘlayout • ሱൡႋ௠ଞնཬđ൓ᇔಆ௠đ໭൏ਈ෪٢—— ླေᄝग़޼؊࠹ෘlayout
13. ၂۱“భ؊ૡࠢ྘”ཛଢ • ު؊҂ԩ৘಩ޅടࠣຓܴބࢌ޺֥આࠠđط൞۴ ऌభ؊֥ေ౰đิ܂ඔऌ֥หק൪๭čViewđҕ ॉCouchDBĎ • భ؊ӱ྽҂൞၇ڸႿު؊൪๭֥“࢖Ч”đط൞Їݣ ᛴಙႄౣބປᆜॿࡏ֥ग़޼؊ • భ؊ӱ྽֥ളଁᇛ௹໭ཋ࿼Ӊđླေሱྛܵ৘ն ਈ֥ሧჷđԩ৘گᄖ֥ሑ෿ቆކ • ླ౰ࠢᇏᄝభ؊ğӻ࿃ᄹӉ֥aॖҬϙ֥“ሰ ༢๤”
14. έغمӬభ؊षؿ૫֥ؓ ໙ี൞ڎႵ௴ђၩၬ ඪીႵड़ק൞၂ᇕzhuangbility...
15. ֒ಖႵޓ؟ঝjбೂğ • ٳ৖҂๝ᇕো֥આࠠđࡨഒ၇ঠܱ༢đࢆ֮ ঔᅚބົ޹֥گᄖ؇ • ᄝ؟ᇕൻೆٚൔᆭࡗگႨս઒čඊѓa࡯ ஍aԨଃaURLĎ • ିႨս઒ᄜགྷ಩ޅᇕো֥Ⴈ޼ൻೆđऎСॖ ҩ൫ྟ • ᄝ؟ᇕൻԛٚൔᆭࡗگႨս઒ • ԩ৘ၳ֥҄ሑ෿э߄ • ֆ်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Чᇉഈ൞၂ؐᇏࡗҪḣḣ
22. ૄᄹࡆ၂۱ᇏࡗҪđ ׻ླေૼಒ֥৘Ⴎ ۱ದ༦щ֥ເე੣ḣḣ
23. ύवଚ฽֗ჰ৘ • ೂݔਆᇕඪم׻ିࢳ൤ཌྷ๝֥൙ൌđཌྷ ྐࡌഡഒ֥ପ۱č॓࿐ࡅ֥ྐ่Ď • ೂݔਆᇕٚم׻ିࢳथཌྷ๝֥໙ีđ൐ Ⴈ۷ࡥֆ֥ପ۱čӁ௖ࣜ৘֥ྐ่Ď • ೂ໭сေđ໿ᄹൌุčषؿᆀ֥ྐ่Ď
24. భ؊MVCླေଧུࠎЧۿି & έغمӬ֥ࢳथٚσ
25. 1. ଆॶ߄ഡ࠹ • έغمӬࠎႿOzJS • ෮Ⴕս઒ֆჭ׻ٿልӮ CommonJSڄ֥۬module • ᆺႵཁൔലૼ၇ঠܱ༢đҌ ିӻႵః෰ଆॶᇏؓའ֥ႄ Ⴈđ࣌Ⴈಆअଁ଀ॢࡗ • ሱ׮ܵ৘၇ঠđѩྛࡆᄛđ اྟࡆᄛđοླࡆᄛ • u๙ႨJSൈս֥ଆॶࠏᇅބщ ၲ۽ऎv
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֥๙ྐ • ൌ২ğέغمӬ֥ؓ߅ॿቆࡱaཬ ֹ๭ࡆᄛ
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Ď • ਆᇕٚൔളӮ൪๭ğ1aଆϰ஥ᇂđ2a߻ ๭ଁ਷ • ਆᇕٚൔྩڿ൪๭ğ1aᇗ߻đ2aDOMҠ ቔ • ೘ᇕAPIğDOMaSVGaCanvas
37. 5. ൪๭ᛴಙčRenderĎ • ਆᇕٚൔളӮ൪๭ğ1aଆϰ஥ᇂđ2a߻ ๭ଁ਷ • ਆᇕٚൔྩڿ൪๭ğ1aᇗ߻đ2aDOMҠ ቔ • ೘ᇕAPIğDOMaSVGaCanvas • έغمӬҐႨഈඍ֥ඹᇕٚൔࡆ၂ᇕAPI
38. έغمӬ൞၂۱ՂHTML4ႋႨ
39. • templateଆॶิ܂ਆᇕଆϰ۽ऎ • formatčpythonڄ֥۬ሳژԱ۬ൔ߄Ď • convertTplčmicro-templatingđ John Resig/UnderscoreĎ
40. • DomCanvasଆॶğଁ਷ൔᛴ ಙđᄝႵུླေ࠹ෘlayout֥ ӆކ۷ᆰܴb • ႨDOMଆ୅Canvas API • ᛍফఖ࡙ಸྟč֌҂൞ᇗ ׄđie6҂ᆴ֤ᆦӻĎ • ऎСSVG֥Ⴊׄđোර۽ऎğ raphael.js
41. 6. ඔऌჷčDataSourceĎ • ModelҪ֥ނྏđກܵ෮Ⴕඔऌđႅҟ༥ࢫ ބটჷđ๤၂٠໙ࢤ१ • ॖିླေݤۂຩ઎๙ྐaߏթaЧֹӻࣲ߄ թԥaҰ࿘aݖੲܿᄵa۬ൔሇߐaჹӱ๝ ҄aൌൈሑ෿۷ྍa৖ཌҩ൫
42. • έغمӬ֥ඔऌҰ࿘ބࢤ१஥ᇂ
43. ၳၰĆႵਔᆃུmoduleđభ؊ս઒ࣼି ሱ׮ٳ৖ӮMaVaCહĆ ҂ିđᆃߎླေषؿᆀ֥৘ࢳބᆦ ӻĆčग़ڛეగXDĎط౏҂๝ཛଢ ҂๝ߌ࣢༯֥MVCđٳҪٚൔaҪა Ҫᆭࡗ֥ܱ༢đ׻ॖିႵҵљ
44. έغمӬ֥ModelҪ • ޓЊ֥ModelҪđࠫެ҂ླေЧֹթԥđ۷োර Ԯ๤ຩ်đࠎႿURL֥ሑ෿ሇ၍ • Model۵ViewᆭࡗીႵ൙ࡱϾקđ҂ᄍྸᆰࢤ๙ ྐđᆺିႮControllerটҰ࿘Modelބࢤ൬ཨ༏ • Modelᆺົ޹ඔऌЧദđ҂ླေӻႵ۵ႋႨઆࠠ ཌྷܱ֥ሑ෿bModelْ߭ඔऌభႵ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ࢌ޺ϴෛնਈݖ؈ིݔ/ڬ ቔႨ • ൌ২ğࣉೆཬ׋aGoogle+೷Ԣcircle • ಆअ൙ࡱ຾ກཞCocoa၂ဢ৵ࢤUIჭࡱބViewؓ འđטႨViewᆷ਷భсྶ༵ϜDOMሑ෿ሇߐӮ ՂඔऌҕඔđЌᆣᄝViewҪᆭຓ္ିᆰࢤטႨ ᆃུٚمᄜགྷཌྷ๝֥ۿି
47. έغمӬ֥ControllerҪ • ڵᄳࢩࠆຓ҆ൻೆğ࡯஍Ҡቔđ॥ᇅ෻ ଁ਷đURL routingđAPIטႨčটሱ widgetaሱ׮߄ҩ൫۽ऎĎ • ӻႵViewބModel֥ႄႨđିᆰࢤטႨ෱ ૌ֥ٚمđّᆭᆺିႨ൙ࡱট๙ྐ • ົ޹၂ቆࡥࢱaປᆜ֥פҪࢤ१đၛApp ؓའ֥ྙൔВ੝۳ຓ҆đႨႿگކਔ؟ ۱MVCႋႨ်֥૫đࠇሱ׮߄ҩ൫
48. έغمӬ֥MVC View Model Controller / App Server Model Server Contorller Pluggable Widgets ໭ሑ෿֥http ൌൈࢤ१ ൪๭ࢤ१ ൙ࡱ/ཨ༏ ൙ࡱ/ཨ༏ ൙ࡱ/ཨ༏ ᛴಙ/ྩڿ Ұ࿘ UI/DOM൙ࡱ URL ࡯஍ ॥ᇅ෻ HTMLളӮ/๭ྙ߻ᇅ/׮߂ིݔ
49. ః෰֥MVC Smalltalk-80 Cocoa Ruby On Rails ASP.NET 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 • ໡֥׸ϵᇶ်ğ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 č࣍௹۷ྍĎ Thanks