$30 off During Our Annual Pro Sale. View Details »

Leaning MVC By Example

Leaning MVC By Example

大澤木小鐵

April 03, 2014
Tweet

More Decks by 大澤木小鐵

Other Decks in Programming

Transcript

  1. Leaning MVC 

    By Example
    Tic-Tac-Toe

    View Slide

  2. Tic-Tac-Toe
    • 俗稱井字遊戲,因初始棋盤形
    狀為井字。
    • 兩個玩家分別持 O 棋與 X 棋。
    • 雙⽅方輪流下棋,先將三個棋⼦子
    連成⼀一線 (直、橫、斜皆可) 的
    玩家獲勝。
    • 如果下完最後⼀一⼦子仍無⼀一⽅方連
    成⼀一線的話,即為平⼿手。

    View Slide

  3. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  4. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  5. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  6. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  7. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  8. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  9. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  10. Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  11. Code
    http://jsbin.com/xuqos/7

    View Slide

  12. MVC
    • M (Model) :只負責資料狀態邏輯,提供⽅方法來
    讓外界改變資料狀態。
    • V (View) :只負責顯⽰示資料和介⾯面事件處理。
    • C (Controller) :負責處理流程邏輯,包括接收
    View 的指⽰示來改變 Model ,並把 Model 的狀態
    反應給 View 。

    View Slide

  13. MVC
    View

    View Slide

  14. MVC
    Controller
    View

    View Slide

  15. MVC
    Model
    Controller
    View

    View Slide

  16. MVC
    Model
    Controller
    View
    程式進⼊入點

    View Slide

  17. MVC
    Model
    Controller
    View
    View 初始化
    HTML 元素

    View Slide

  18. MVC
    Model
    Controller
    View
    View 初始化
    HTML 元素
    HTML 元素

    事件綁定

    View Slide

  19. MVC
    Model
    Controller
    View
    按下按鈕
    事件發⽣生

    View Slide

  20. MVC
    Model
    Controller
    View
    按下按鈕
    事件發⽣生
    介⾯面反應

    View Slide

  21. MVC
    Model
    Controller
    View
    按下按鈕
    事件發⽣生
    呼叫 Controller
    處理動作
    介⾯面反應

    View Slide

  22. MVC
    Model
    Controller
    View
    Controller 呼叫
    Model ⽅方法

    View Slide

  23. MVC
    Model
    Controller
    View
    Controller 取得
    Model 狀態

    View Slide

  24. MVC
    Model
    Controller
    View
    Controller 通知
    View 顯⽰示

    View Slide

  25. MVC Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是

    View Slide

  26. MVC Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是
    View

    View Slide

  27. MVC Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是
    View Controller

    View Slide

  28. MVC Flow
    點選棋盤⽅方格
    ⽅方格有棋⼦子 放 O 棋
    ⺫⽬目前是玩家 1


    放 X 棋
    是 否
    連成⼀一線
    否,換下⼀一個玩家
    顯⽰示贏家 是
    View Controller Model

    View Slide

  29. Code
    http://jsbin.com/jukow/7

    View Slide