Tweet
Tweet

Slide 1

Slide 1 text

Leaning MVC 
 By Example Tic-Tac-Toe

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 4

Slide 4 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 5

Slide 5 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 6

Slide 6 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 7

Slide 7 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 8

Slide 8 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 9

Slide 9 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 10

Slide 10 text

Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

MVC View

Slide 14

Slide 14 text

MVC Controller View

Slide 15

Slide 15 text

MVC Model Controller View

Slide 16

Slide 16 text

MVC Model Controller View 程式進⼊入點

Slide 17

Slide 17 text

MVC Model Controller View View 初始化 HTML 元素

Slide 18

Slide 18 text

MVC Model Controller View View 初始化 HTML 元素 HTML 元素
 事件綁定

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

MVC Model Controller View Controller 呼叫 Model ⽅方法

Slide 23

Slide 23 text

MVC Model Controller View Controller 取得 Model 狀態

Slide 24

Slide 24 text

MVC Model Controller View Controller 通知 View 顯⽰示

Slide 25

Slide 25 text

MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是

Slide 26

Slide 26 text

MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是 View

Slide 27

Slide 27 text

MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是 View Controller

Slide 28

Slide 28 text

MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否 放 X 棋 是 否 連成⼀一線 否，換下⼀一個玩家 顯⽰示贏家 是 View Controller Model

Slide 29

Slide 29 text

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