Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Leaning MVC By Example
Search
大澤木小鐵
April 03, 2014
Programming
0
330
Leaning MVC By Example
大澤木小鐵
April 03, 2014
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
550
JSConf Asia 2014 Sessions
jaceju
4
360
What happens in Laravel 4 bootstraping
jaceju
9
530
Deal with Laravel assets by Bower & Gulp
jaceju
30
1.9k
ng-conf_2014
jaceju
2
930
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
360
jQuery vs AngularJS, dochi?
jaceju
20
2.9k
Begining Composer
jaceju
24
4.9k
Checkup your web pages
jaceju
44
3.1k
Other Decks in Programming
See All in Programming
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
440
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
160
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.1k
Deep Dive into React Stream/Serialize
mugi_uno
3
560
Site Reliability Engineering for GMO
pyama86
8
1.1k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.7k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
190
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
新宿ダンジョンを可視化してみた
satoshi7190
3
380
Implementing Design Systems in Swift
seyfoyun
1
440
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
306
41k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
The Invisible Customer
myddelton
114
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Clear Off the Table
cherdarchuk
85
310k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Statistics for Hackers
jakevdp
790
220k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
Testing 201, or: Great Expectations
jmmastey
29
6.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Transcript
Leaning MVC By Example Tic-Tac-Toe
Tic-Tac-Toe • 俗稱井字遊戲,因初始棋盤形 狀為井字。 • 兩個玩家分別持 O 棋與 X 棋。
• 雙⽅方輪流下棋,先將三個棋⼦子 連成⼀一線 (直、橫、斜皆可) 的 玩家獲勝。 • 如果下完最後⼀一⼦子仍無⼀一⽅方連 成⼀一線的話,即為平⼿手。
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是 否
放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
Code http://jsbin.com/xuqos/7
MVC • M (Model) :只負責資料狀態邏輯,提供⽅方法來 讓外界改變資料狀態。 • V (View) :只負責顯⽰示資料和介⾯面事件處理。
• C (Controller) :負責處理流程邏輯,包括接收 View 的指⽰示來改變 Model ,並把 Model 的狀態 反應給 View 。
MVC View
MVC Controller View
MVC Model Controller View
MVC Model Controller View 程式進⼊入點
MVC Model Controller View View 初始化 HTML 元素
MVC Model Controller View View 初始化 HTML 元素 HTML 元素
事件綁定
MVC Model Controller View 按下按鈕 事件發⽣生
MVC Model Controller View 按下按鈕 事件發⽣生 介⾯面反應
MVC Model Controller View 按下按鈕 事件發⽣生 呼叫 Controller 處理動作 介⾯面反應
MVC Model Controller View Controller 呼叫 Model ⽅方法
MVC Model Controller View Controller 取得 Model 狀態
MVC Model Controller View Controller 通知 View 顯⽰示
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是 View
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是 View Controller
MVC Flow 點選棋盤⽅方格 ⽅方格有棋⼦子 放 O 棋 ⺫⽬目前是玩家 1 是
否 放 X 棋 是 否 連成⼀一線 否,換下⼀一個玩家 顯⽰示贏家 是 View Controller Model
Code http://jsbin.com/jukow/7