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
390
Leaning MVC By Example
大澤木小鐵
April 03, 2014
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
610
JSConf Asia 2014 Sessions
jaceju
4
430
What happens in Laravel 4 bootstraping
jaceju
9
570
Deal with Laravel assets by Bower & Gulp
jaceju
30
2k
ng-conf_2014
jaceju
2
1k
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
400
jQuery vs AngularJS, dochi?
jaceju
20
3k
Begining Composer
jaceju
24
5.3k
Checkup your web pages
jaceju
44
3.2k
Other Decks in Programming
See All in Programming
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
470
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
個人軟體時代
ethanhuang13
0
330
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
AIでLINEスタンプを作ってみた
eycjur
1
230
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
130
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Language of Interfaces
destraynor
161
25k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Making Projects Easy
brettharned
117
6.4k
Into the Great Unknown - MozCon
thekraken
40
2k
We Have a Design System, Now What?
morganepeng
53
7.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for Performance
lara
610
69k
Designing for humans not robots
tammielis
253
25k
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