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