新版阿尔法城背后的前端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