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
350
Leaning MVC By Example
大澤木小鐵
April 03, 2014
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
560
JSConf Asia 2014 Sessions
jaceju
4
390
What happens in Laravel 4 bootstraping
jaceju
9
550
Deal with Laravel assets by Bower & Gulp
jaceju
30
1.9k
ng-conf_2014
jaceju
2
970
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
370
jQuery vs AngularJS, dochi?
jaceju
20
2.9k
Begining Composer
jaceju
24
5.1k
Checkup your web pages
jaceju
44
3.1k
Other Decks in Programming
See All in Programming
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
420
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
260
Amazon Qを使ってIaCを触ろう!
maruto
0
320
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
470
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1.3k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
offers_20241022_imakiire.pdf
imakurusu
2
370
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
33k
僕がつくった48個のWebサービス達
yusukebe
20
17k
C++でシェーダを書く
fadis
6
2.9k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
12k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
4.6k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Rails Girls Zürich Keynote
gr2m
93
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
What's new in Ruby 2.0
geeforr
343
31k
How to Ace a Technical Interview
jacobian
275
23k
The Cult of Friendly URLs
andyhume
78
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
We Have a Design System, Now What?
morganepeng
50
7.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Unsuck your backbone
ammeep
668
57k
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