Leaning MVC By ExampleTic-Tac-Toe
View Slide
Tic-Tac-Toe• 俗稱井字遊戲，因初始棋盤形狀為井字。• 兩個玩家分別持 O 棋與 X 棋。• 雙⽅方輪流下棋，先將三個棋⼦子連成⼀一線 (直、橫、斜皆可) 的玩家獲勝。• 如果下完最後⼀一⼦子仍無⼀一⽅方連成⼀一線的話，即為平⼿手。
Flow點選棋盤⽅方格⽅方格有棋⼦子 放 O 棋⺫⽬目前是玩家 1是否放 X 棋是 否連成⼀一線否，換下⼀一個玩家顯⽰示贏家 是
Codehttp://jsbin.com/xuqos/7
MVC• M (Model) ：只負責資料狀態邏輯，提供⽅方法來讓外界改變資料狀態。• V (View) ：只負責顯⽰示資料和介⾯面事件處理。• C (Controller) ：負責處理流程邏輯，包括接收View 的指⽰示來改變 Model ，並把 Model 的狀態反應給 View 。
MVCView
MVCControllerView
MVCModelControllerView
MVCModelControllerView程式進⼊入點
MVCModelControllerViewView 初始化HTML 元素
MVCModelControllerViewView 初始化HTML 元素HTML 元素 事件綁定
MVCModelControllerView按下按鈕事件發⽣生
MVCModelControllerView按下按鈕事件發⽣生介⾯面反應
MVCModelControllerView按下按鈕事件發⽣生呼叫 Controller處理動作介⾯面反應
MVCModelControllerViewController 呼叫Model ⽅方法
MVCModelControllerViewController 取得Model 狀態
MVCModelControllerViewController 通知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
Codehttp://jsbin.com/jukow/7
jaceju
ivargrimstad
zerebom
ryos36
akakou
manfredsteyer
uhooi
goutarouh
os1ma
okuramasafumi
parttimenerd
zakky21
morikann
jennybc
holman
aki_iinuma
jacobian
akosma
brianwarren
lauravandoore
sugarenia
jensimmons
trallard
myddelton
addyosmani