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
360
Leaning MVC By Example
大澤木小鐵
April 03, 2014
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
580
JSConf Asia 2014 Sessions
jaceju
4
400
What happens in Laravel 4 bootstraping
jaceju
9
550
Deal with Laravel assets by Bower & Gulp
jaceju
30
2k
ng-conf_2014
jaceju
2
990
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
380
jQuery vs AngularJS, dochi?
jaceju
20
2.9k
Begining Composer
jaceju
24
5.2k
Checkup your web pages
jaceju
44
3.2k
Other Decks in Programming
See All in Programming
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
630
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
SwiftUI Viewの責務分離
elmetal
PRO
2
280
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
910
Jasprが凄い話
hyshu
0
180
Jakarta EE meets AI
ivargrimstad
0
480
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
280
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
280
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How STYLIGHT went responsive
nonsquared
99
5.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Embracing the Ebb and Flow
colly
84
4.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Scaling GitHub
holman
459
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Code Reviewing Like a Champion
maltzj
521
39k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
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