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
Leaning MVC By Example
Search
大澤木小鐵
April 03, 2014
Programming
0
380
Leaning MVC By Example
大澤木小鐵
April 03, 2014
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
600
JSConf Asia 2014 Sessions
jaceju
4
420
What happens in Laravel 4 bootstraping
jaceju
9
560
Deal with Laravel assets by Bower & Gulp
jaceju
30
2k
ng-conf_2014
jaceju
2
1k
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
390
jQuery vs AngularJS, dochi?
jaceju
20
2.9k
Begining Composer
jaceju
24
5.3k
Checkup your web pages
jaceju
44
3.2k
Other Decks in Programming
See All in Programming
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
200
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
エンジニア向け採用ピッチ資料
inusan
0
160
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
390
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
310
Java on Azure で LangGraph!
kohei3110
0
170
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
390
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Writing Fast Ruby
sferik
628
61k
Building Applications with DynamoDB
mza
95
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
4 Signs Your Business is Dying
shpigford
184
22k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Transcript
Leaning MVC By Example Tic-Tac-Toe
Tic-Tac-Toe • 俗稱井字遊戲,因初始棋盤形 狀為井字。 • 兩個玩家分別持 O 棋與 X 棋。
• 雙⽅方輪流下棋,先將三個棋⼦子 連成⼀一線 (直、橫、斜皆可) 的 玩家獲勝。 • 如果下完最後⼀一⼦子仍無⼀一⽅方連 成⼀一線的話,即為平⼿手。
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Code http://jsbin.com/xuqos/7
MVC • M (Model) :只負責資料狀態邏輯,提供⽅方法來 讓外界改變資料狀態。 • V (View) :只負責顯⽰示資料和介⾯面事件處理。
• C (Controller) :負責處理流程邏輯,包括接收 View 的指⽰示來改變 Model ,並把 Model 的狀態 反應給 View 。
MVC View
MVC Controller View
MVC Model Controller View
MVC Model Controller View 程式進⼊入點
MVC Model Controller View View 初始化 HTML 元素
MVC Model Controller View View 初始化 HTML 元素 HTML 元素
事件綁定
MVC Model Controller View 按下按鈕 事件發⽣生
MVC Model Controller View 按下按鈕 事件發⽣生 介⾯面反應
MVC Model Controller View 按下按鈕 事件發⽣生 呼叫 Controller 處理動作 介⾯面反應
MVC Model Controller View Controller 呼叫 Model ⽅方法
MVC Model Controller View Controller 取得 Model 狀態
MVC Model Controller View Controller 通知 View 顯⽰示
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是 View
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是 View Controller
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是 View Controller Model
Code http://jsbin.com/jukow/7