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
470
新版阿尔法城背后的前端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.1k
CardKit & DOMO UI - 移动时代技术与设计的十字路口
dexteryy
10
550
Learning JavaScript in Three Web Apps(中文)
dexteryy
70
5.2k
通用JS时代的模块机制和编译工具
dexteryy
8
420
Other Decks in Programming
See All in Programming
Create a website using Spatial Web
akkeylab
0
270
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
140
イベントストーミングから始めるドメイン駆動設計
jgeem
4
820
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
130
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
590
Datadog RUM 本番導入までの道
shinter61
1
260
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
300
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
370
A comprehensive view of refactoring
marabesi
0
120
無関心の谷
kanayannet
0
160
CSC307 Lecture 17
javiergs
PRO
0
110
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
110
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Agile that works and the tools we love
rasmusluckow
329
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Docker and Python
trallard
44
3.4k
The Language of Interfaces
destraynor
158
25k
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