Leaning MVC By Example

Transcript

1. Leaning MVC 
 By Example Tic-Tac-Toe
2. Tic-Tac-Toe • 俗稱井字遊戲，因初始棋盤形 狀為井字。 • 兩個玩家分別持 O 棋與 X 棋。 • 雙⽅方輪流下棋，先將三個棋⼦子 連成⼀一線 (直、橫、斜皆可) 的 玩家獲勝。 • 如果下完最後⼀一⼦子仍無⼀一⽅方連 成⼀一線的話，即為平⼿手。
3. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
4. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
5. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
6. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
7. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
8. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
9. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
10. Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
11. Code http://jsbin.com/xuqos/7
12. MVC • M (Model) ：只負責資料狀態邏輯，提供⽅方法來 讓外界改變資料狀態。 • V (View) ：只負責顯⽰示資料和介⾯面事件處理。 • C (Controller) ：負責處理流程邏輯，包括接收 View 的指⽰示來改變 Model ，並把 Model 的狀態 反應給 View 。
13. MVC View
14. MVC Controller View
15. MVC Model Controller View
16. MVC Model Controller View 程式進⼊入點
17. MVC Model Controller View View 初始化 HTML 元素
18. MVC Model Controller View View 初始化 HTML 元素 HTML 元素
 事件綁定
19. MVC Model Controller View 按下按鈕 事件發⽣生
20. MVC Model Controller View 按下按鈕 事件發⽣生 介⾯面反應
21. MVC Model Controller View 按下按鈕 事件發⽣生 呼叫 Controller 處理動作 介⾯面反應
22. MVC Model Controller View Controller 呼叫 Model ⽅方法
23. MVC Model Controller View Controller 取得 Model 狀態
24. MVC Model Controller View Controller 通知 View 顯⽰示
25. MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是
26. MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是 View
27. MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是 View Controller
28. MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是 View Controller Model
29. Code http://jsbin.com/jukow/7