Pro Yearly is on sale from $80 to $50! »

Leaning MVC By Example

Leaning MVC By Example

F830ec52d5bf72ee64fd1a43a6a82a49?s=128

大澤木小鐵

April 03, 2014
Tweet

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