Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
新版阿尔法城背后的前端MVC实践
Dexter.Yy
July 09, 2011
Programming
9
410
新版阿尔法城背后的前端MVC实践
Dexter.Yy
July 09, 2011
Tweet
Share
More Decks by Dexter.Yy
See All by Dexter.Yy
Understanding Modern Web Development @ JSConf China 2017 (中文)
dexteryy
15
4.5k
CardKit & DOMO UI - 移动时代技术与设计的十字路口
dexteryy
10
470
Learning JavaScript in Three Web Apps(中文)
dexteryy
70
5k
通用JS时代的模块机制和编译工具
dexteryy
8
360
Other Decks in Programming
See All in Programming
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
150
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
300
Writing Greener Java Applications
hollycummins
0
330
Form実装基本を学び直してみた
hyugatsukui
0
230
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
130
Circuit⚡
monaapk
0
200
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
120
How to Fight Production Incidents?
asatarin
0
150
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
300
Milestoner
bkuhlmann
1
240
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
110
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
It's Worth the Effort
3n
177
26k
Designing Experiences People Love
moore
130
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Documentation Writing (for coders)
carmenintech
51
2.9k
Six Lessons from altMBA
skipperchong
15
2.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Product Roadmaps are Hard
iamctodd
38
7.7k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Optimizing for Happiness
mojombo
365
64k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Transcript
Practice MVC as features, not frameworks DexterYy @ ϵ ྍϱέغمӬМު֥భ؊MVCൌ
έغمӬ൞പઔĤ
֒֒֒֓ĆḣḣݺϠᆃ൞ࣸϱ
Я֥ྍϱĆ http://site.douban.com/118836/
ఃൌߎીᆞൔഈཌĆ ḣḣ ᆃ൙ظ҂ିඪ༥Ć ḣḣ ဆൕ၂༯षؿڛༀఖ ഈ֥ॖᄎྛϱЧϔĆ ḣḣ ൮Ց܄षᕞĆ ḣḣ
Ֆඌ࢘؇ुέغمӬ č ҂ซӁ) • ၂۱“ֹ໊ᇂ”ႋႨč҂൞LBSĎ • ၂۱“ྴགྷൌ”ႋႨč҂൞3DĎ • ၂۱“AJAXֹ”ႋႨč҂ோĎ •
၂۱ᇗ؇ྙ߄֥web appč҂ႨFlashĎ • ၂۱భ؊ૡࠢཛଢč฿ߎᄝࡆϫḣĎ
༵ലૼ၂༯ ູહေٳ༅έغمӬ֥หᆘ ҂൞ູਔቓܼۡXD ط൞ၹູᆃུหᆘᆰࢤथקਔषؿᇏ
༵ലૼ၂༯ ູહေٳ༅έغمӬ֥หᆘ ҂൞ູਔቓܼۡXD ط൞ၹູᆃུหᆘᆰࢤथקਔषؿᇏ • ູહေႨMVC • ေႨᄸဢ֥MVC
၂۱“ֹ໊ᇂ”ႋႨ • ປಆીႵӑ৽ࢤđႨٚཟট֝ݴđᄝཌྷਣ ֥“ֹࢫׄ”ᆭࡗ၍ ——ҠቔčWASDĎაଞׄࠌ • ൪ᆭࡗႵ໊ᇂܱ༢čתଲ ༆Кaଽ҆ຓ҆Ď ——इᆔ vs
čGraphĎ • ໃఃದđ༵໔ఃല ——۵ڛༀఖ؊֥“ൌൈ”๙
၂۱“ྴགྷൌ”ႋႨ • Bring real-life to software, rethought for the web
čGoogle+֥sloganᕞĆXX෮đᕫᕫḣĎ • ྴ֥൞Ԏའ֥གྷൌđ҂ླေЯᆇ֥3Dཞ • GUIླေ߁ሱಖ్֥ႅნčMetaphorĎğԩ҂ᄝ ֥ݖ؈߂ིݔ
၂۱“AJAXֹ”ႋႨ • шࢸ֥߂҃/೬đٳ؍ࡆᄛđᛴಙ֒భ൪ čviewportĎđোරgoogle maps • ෛႨྛູطሱಖളӉ֥Ӭᆓֹđ҂ିႨ࣡ோ ࢤđေ۴ऌJSONඔऌᇅྙჭ • ҂ିၩሄđᆺିၛᆜູቋཬֆ໊ট၍
——Ԯweb֥Чᇉğሑіඍሇ၍ • ཌྷ֥ؓ࣡aՙ৬؇֥“ֹྙ”Ġэَa༥৬؇֥ᅻۂ čoverlapĎĠοླࡆᄛaሱႮطܛ৫֥widget
၂۱“ᇗ؇ྙ߄”֥web app • Ԯඪᇏ֥Single Page AppčwikiĎ • ҂൞Ԯຩ်֥໓Чੀđ҂൞ԮೈࡱGUI֥ ণൔ҃अ——ླေ࠹ෘlayout •
ሱൡႋଞնཬđᇔಆđ൏ਈ෪٢—— ླေᄝग़؊࠹ෘlayout
၂۱“భ؊ૡࠢ”ཛଢ • ު؊҂ԩޅടࠣຓܴބࢌ֥આࠠđط൞۴ ऌభ؊֥ေđิ܂ඔऌ֥หק൪čViewđҕ ॉCouchDBĎ • భ؊ӱ҂൞၇ڸႿު؊൪֥“Ч”đط൞Їݣ ᛴಙႄౣބປᆜॿࡏ֥ग़؊ • భ؊ӱ֥ളଁᇛ௹ཋӉđླေሱྛܵն
ਈ֥ሧჷđԩگᄖ֥ሑቆކ • ླࠢᇏᄝభ؊ğӻ࿃ᄹӉ֥aॖҬϙ֥“ሰ ༢”
έغمӬభ؊षؿ૫֥ؓ ໙ี൞ڎႵ௴ђၩၬ ඪીႵड़ק൞၂ᇕzhuangbility...
֒ಖႵޓ؟ঝjбೂğ • ٳ҂ᇕো֥આࠠđࡨഒ၇ঠܱ༢đࢆ֮ ঔᅚބົ֥گᄖ؇ • ᄝ؟ᇕൻೆٚൔᆭࡗگႨսčඊѓa aԨଃaURLĎ • ିႨսᄜགྷޅᇕো֥ႨൻೆđऎСॖ ҩ൫ྟ
• ᄝ؟ᇕൻԛٚൔᆭࡗگႨս • ԩၳ֥҄ሑэ߄ • ֆ်webapp֥ླᄀটᄀ௴ђ
ࢳथభඹ۱໙ี ᆞ൞MVC֥Ԛᇓ
έغمӬ֥భ؊MVC
έغمӬ֥భ؊MVC • ીႵႨགྷӮ֥MVCॿࡏ • ીႵषؿಆྍ֥MVCॿࡏ
έغمӬ֥భ؊MVC • ીႵႨགྷӮ֥MVCॿࡏ • ીႵषؿಆྍ֥MVCॿࡏ ၳၰĆMVCൌᄝଧĤ
έغمӬ֥భ؊MVC • ીႵႨགྷӮ֥MVCॿࡏ • ીႵषؿಆྍ֥MVCॿࡏ ၳၰĆMVCൌᄝଧĤ MVCЧᇉഈ൞၂ؐᇏࡗҪḣḣ
έغمӬ֥భ؊MVC • ીႵႨགྷӮ֥MVCॿࡏ • ીႵषؿಆྍ֥MVCॿࡏ ၳၰĆMVCൌᄝଧĤ ၳၰĆճ٤෮໙Ć MVCЧᇉഈ൞၂ؐᇏࡗҪḣḣ
ૄᄹࡆ၂۱ᇏࡗҪđ ླေૼಒ֥Ⴎ ۱ದ༦щ֥ເეḣḣ
ύवଚ֗ჰ • ೂݔਆᇕඪمିࢳཌྷ֥൙ൌđཌྷ ྐࡌഡഒ֥ପ۱č॓࿐ࡅ֥ྐ่Ď • ೂݔਆᇕٚمିࢳथཌྷ֥໙ีđ Ⴈ۷ࡥֆ֥ପ۱čӁ֥ࣜྐ่Ď • ೂсေđᄹൌุčषؿᆀ֥ྐ่Ď
భ؊MVCླေଧུࠎЧۿି & έغمӬ֥ࢳथٚσ
1. ଆॶ߄ഡ࠹ • έغمӬࠎႿOzJS • ෮ႵսֆჭٿልӮ CommonJSڄ֥۬module • ᆺႵཁൔലૼ၇ঠܱ༢đҌ ିӻႵఃଆॶᇏؓའ֥ႄ
Ⴈđ࣌Ⴈಆअଁॢࡗ • ሱܵ၇ঠđѩྛࡆᄛđ اྟࡆᄛđοླࡆᄛ • u๙ႨJSൈս֥ଆॶࠏᇅބщ ၲ۽ऎv
• ཁൔലૼ၇ঠܱ༢đᄝषؿ ݖӱᇏႵᇹႿࡨഒ҂сေ֥ ၇ঠđൌགྷቋն߄֥ࢳᯒ • ఼ᇅჿඏđಞ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֥๙ྐ • ൌ২ğέغمӬ֥ؓ߅ॿቆࡱaཬ ֹࡆᄛ
• 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Ď • ਆᇕٚൔളӮ൪ğ1aଆϰᇂđ2a ଁ • ਆᇕٚൔྩڿ൪ğ1aᇗđ2aDOMҠ ቔ • ᇕAPIğDOMaSVGaCanvas
5. ൪ᛴಙčRenderĎ • ਆᇕٚൔളӮ൪ğ1aଆϰᇂđ2a ଁ • ਆᇕٚൔྩڿ൪ğ1aᇗđ2aDOMҠ ቔ • ᇕAPIğDOMaSVGaCanvas
• έغمӬҐႨഈඍ֥ඹᇕٚൔࡆ၂ᇕAPI
έغمӬ൞၂۱ՂHTML4ႋႨ
• templateଆॶิ܂ਆᇕଆϰ۽ऎ • formatčpythonڄ֥۬ሳژԱ۬ൔ߄Ď • convertTplčmicro-templatingđ John Resig/UnderscoreĎ
• DomCanvasଆॶğଁൔᛴ ಙđᄝႵུླေ࠹ෘlayout֥ ӆކ۷ᆰܴb • ႨDOMଆCanvas API • ᛍফఖ࡙ಸྟč҂൞ᇗ ׄđie6҂ᆴ֤ᆦӻĎ
• ऎСSVG֥Ⴊׄđোර۽ऎğ raphael.js
6. ඔऌჷčDataSourceĎ • ModelҪ֥ނྏđກܵ෮Ⴕඔऌđႅҟ༥ࢫ ބটჷđ၂٠໙ࢤ१ • ॖିླေݤۂຩ๙ྐaߏթaЧֹӻࣲ߄ թԥaҰ࿘aݖੲܿᄵa۬ൔሇߐaჹӱ ҄aൌൈሑ۷ྍaཌҩ൫
• έغمӬ֥ඔऌҰ࿘ބࢤ१ᇂ
ၳၰĆႵਔᆃུmoduleđభ؊սࣼି ሱٳӮMaVaCહĆ ҂ିđᆃߎླေषؿᆀ֥ࢳބᆦ ӻĆčग़ڛეగXDĎط҂ཛଢ ҂ߌ༯֥MVCđٳҪٚൔaҪა Ҫᆭࡗ֥ܱ༢đॖିႵҵљ
έغمӬ֥ModelҪ • ޓЊ֥ModelҪđࠫެ҂ླေЧֹթԥđ۷োර Ԯຩ်đࠎႿURL֥ሑሇ၍ • Model۵ViewᆭࡗીႵ൙ࡱϾקđ҂ᄍྸᆰࢤ๙ ྐđᆺିႮControllerটҰ࿘Modelބࢤ൬ཨ༏ • ModelᆺົඔऌЧദđ҂ླေӻႵ۵ႋႨઆࠠ ཌྷܱ֥ሑbModelْ߭ඔऌభႵ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ࢌϴෛնਈݖ؈ིݔ/ڬ ቔႨ •
ൌ২ğࣉೆཬaGoogle+Ԣcircle • ಆअ൙ࡱກཞCocoa၂ဢ৵ࢤUIჭࡱބViewؓ འđטႨViewᆷభсྶ༵ϜDOMሑሇߐӮ ՂඔऌҕඔđЌᆣᄝViewҪᆭຓ္ିᆰࢤטႨ ᆃུٚمᄜགྷཌྷ֥ۿି
έغمӬ֥ControllerҪ • ڵᄳࢩࠆຓ҆ൻೆğҠቔđ॥ᇅ ଁđURL routingđAPIטႨčটሱ widgetaሱ߄ҩ൫۽ऎĎ • ӻႵViewބModel֥ႄႨđିᆰࢤטႨ ૌ֥ٚمđّᆭᆺିႨ൙ࡱট๙ྐ •
ົ၂ቆࡥࢱaປᆜ֥פҪࢤ१đၛApp ؓའ֥ྙൔВ۳ຓ҆đႨႿگކਔ؟ ۱MVCႋႨ်֥૫đࠇሱ߄ҩ൫
έغمӬ֥MVC View Model Controller / App Server Model Server Contorller
Pluggable Widgets ሑ֥http ൌൈࢤ१ ൪ࢤ१ ൙ࡱ/ཨ༏ ൙ࡱ/ཨ༏ ൙ࡱ/ཨ༏ ᛴಙ/ྩڿ Ұ࿘ UI/DOM൙ࡱ URL ॥ᇅ HTMLളӮ/ྙᇅ/߂ིݔ
ః֥MVC Smalltalk-80 Cocoa Ruby On Rails ASP.NET 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 • ֥ϵᇶ်ğ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