Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新版阿尔法城背后的前端MVC实践
Search
Dexter.Yy
July 09, 2011
Programming
9
480
新版阿尔法城背后的前端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
5.2k
CardKit & DOMO UI - 移动时代技术与设计的十字路口
dexteryy
10
560
Learning JavaScript in Three Web Apps(中文)
dexteryy
70
5.2k
通用JS时代的模块机制和编译工具
dexteryy
8
420
Other Decks in Programming
See All in Programming
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
13
3.2k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
250
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
660
CDK引数設計道場100本ノック
badmintoncryer
2
590
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
120
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
790
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
130
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
slogパッケージの深掘り
integral0515
0
160
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Unsuck your backbone
ammeep
671
58k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Invisible Side of Design
smashingmag
301
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Thoughts on Productivity
jonyablonski
69
4.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Why Our Code Smells
bkeepers
PRO
337
57k
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