深入淺出 MVC
Upcoming SlideShare
Loading in...5
×
 

深入淺出 MVC

on

  • 23,039 views

 

Statistics

Views

Total Views
23,039
Views on SlideShare
5,893
Embed Views
17,146

Actions

Likes
17
Downloads
191
Comments
0

18 Embeds 17,146

http://www.jaceju.net 16623
http://linux2fork.blogspot.tw 207
http://smallpoint-program.blogspot.tw 159
http://blog.xuite.net 56
http://webcache.googleusercontent.com 36
http://feeds.feedburner.com 19
http://linux2fork.blogspot.com 13
http://linux2fork.blogspot.hk 10
http://yiweijie.freehostia.com 4
http://localhost:4000 3
http://linux2fork.blogspot.com.br 3
http://smallpoint-program.blogspot.com 3
http://www.google.com.tw 3
http://smallpoint-program.blogspot.hk 2
http://translate.googleusercontent.com 2
http://www.jaceju.net&_=1373471038551 HTTP 1
http://m.xuite.net 1
http://linux2fork.blogspot.sg 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

深入淺出 MVC 深入淺出 MVC Presentation Transcript

  • MVCJace Ju
  • MVC• http://huoding.com/2011/05/02/64• Xerox PARC Smalltalk
  • MVC• UI• UI
  • MVC
  • MVCController View Model
  • MVCController View Controller Model ( ) Model
  • MVCController View Controller View View Model Model
  • MVC ViewController View Model
  • MVC ControllerController View Model
  • MVC Controller ViewController Model View Model Model
  • MVC ViewController View Model
  • MVC• Controller• View Controller•
  • MVP
  • MVPPresenter View Model
  • MVP ViewPresenter View View Presenter Model
  • MVPPresenter View Presenter Model Model
  • MVP ViewPresenter View View Presenter Model
  • MVP Presenter ViewPersenter Model Model
  • MVP ViewPresenter View Presenter Model View Model
  • MVP• View View• Presenter Controller View• WinForms• Supervising Controller Passive View
  • Supervising Controller• View Model• MVC Controller
  • Passive View• Presenter Model View• View Model• Presenter• View
  • MVC / MVP
  • ...Web ApplicationMVC
  • Web MVC
  • • Web MVC Java Model 2• Java Struts• PHP PHPMVC• Ruby on Rails• Web Framework Web MVC
  • <?php// (index.php)$link = mysql_connect(127.0.0.1, username, password);mysql_query(SET NAMES utf8);mysql_select_db(mvc, $link);?><!DOCTYPE html><html><head><meta charset="UTF-8" /><title>News</title></head><body><?php$sql = "SELECT * FROM news " . "WHERE onlineDateTime <= NOW() " . "AND NOW() < offlineDateTime ORDER BY id";$result = mysql_query($sql, $link);?><ul class="posts"><?php while ($row = mysql_fetch_assoc($result)): ?><li><a href="detail.php?id=<?php echo intval($row[id]); ?>"><?php echo htmlspecialchars($row[title]); ?></a></li><?php endwhile; ?></ul></body></html><?phpmysql_close($link);?>
  • <?php// (detail.php)$link = mysql_connect(127.0.0.1, username, password);mysql_query(SET NAMES utf8);mysql_select_db(mvc, $link);?><!DOCTYPE html><html><head><meta charset="UTF-8" /><title>News</title></head><body><?php$id = (int) $_GET[id];$sql = "SELECT * FROM news " . "WHERE onlineDateTime <= NOW() " . "AND NOW() < offlineDateTime AND id = $id";$result = mysql_query($sql, $link);?><div class="post"><?php if ($row = mysql_fetch_assoc($result)): ?><h1><?php echo htmlspecialchars($row[title]); ?></h1><div><?php echo nl2br(htmlspecialchars($row[content])); ?></div><?php endif; ?></div></body></html><?phpmysql_close($link);?>
  • View
  • View<?phpclass View { private $_vars = array(); public function __set($name, $val) { $this->_vars[$name] = $val; } public function __get($name) { return isset($this->_vars[$name]) ? $this->_vars[$name] : null; } public function display($tpl) { include $tpl; }}
  • <?php// (index.php)$link = mysql_connect(127.0.0.1, username, password);mysql_query(SET NAMES utf8);mysql_select_db(mvc, $link);$sql = "SELECT * FROM news " . "WHERE onlineDateTime <= NOW() " . "AND NOW() < offlineDateTime ORDER BY id";$result = mysql_query($sql, $link);$newsList = array();while ($row = mysql_fetch_assoc($result)) { $newsList[] = $row;}require_once View.php;$view = new View();$view->newsList = $newsList;$view->display(index.tpl);mysql_close($link);?><!DOCTYPE html><html><head><meta charset="UTF-8" /><title>News</title></head><body><ul class="posts"><?php foreach ($this->newsList as $row): ?><li><a href="detail.php?id=<?php echo intval($row[id]); ?>"><?php echo htmlspecialchars($row[title]); ?></a></li><?php endforeach; ?></ul></body>
  • Model
  • Model<?php// News.phpclass News { private $_link = null; public function __construct() { $this->_link = mysql_connect(127.0.0.1, username, password); mysql_query(SET NAMES utf8); mysql_select_db(mvc, $this->_link); } public function __destruct() { mysql_close($this->_link); }
  • Model ( ) public function findAll() { $sql = "SELECT * FROM news " . "WHERE onlineDateTime <= NOW() " . "AND NOW() < offlineDateTime ORDER BY id"; $result = mysql_query($sql, $this->_link); $newsList = array(); while ($row = mysql_fetch_assoc($result)) { $newsList[] = $row; } return $newsList; } public function find($id) { $sql = "SELECT * FROM news " . "WHERE onlineDateTime <= NOW() " . "AND NOW() < offlineDateTime AND id = $id"; $result = mysql_query($sql, $this->_link); return mysql_fetch_assoc($result); }}
  • Model<?php// (index.php)require_once News.php;$newsModel = new News();$newsList = $newsModel->findAll();require_once View.php;$view = new View();$view->newsList = $newsList;$view->display(index.tpl);?><?php// (detail.php)require_once News.php;$id = (int) $_GET[id];$newsModel = new News();$row = $newsModel->find($id);require_once View.php;$view = new View();$view->row = $row;$view->display(detail.tpl);?>
  • Controller
  • Controller<?phpclass Controller { private $_action = index; private $_newsModel = null; private $_view = null; public function __construct() { if (isset($_GET[action])) { $action = strtolower($_GET[action]); if (method_exists($this, $action)) { $this->_action = $action; } } $this->_init(); call_user_func(array($this, $this->_action)); } protected function _init() { require_once News.php; $this->_newsModel = new News(); require_once View.php; $this->_view = new View(); }
  • Controller ( ) public function index() { $this->_view->newsList = $this->_newsModel->findAll(); $this->_view->display(index.tpl); } public function detail() { $id = (int) $_GET[id]; $this->_view->row = $this->_newsModel->find($id); $this->_view->display(detail.tpl); }}<?php// (index.php)require_once Controller.php;$controller = new Controller();
  • View<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>News</title></head><body><ul class="posts"><?php foreach ($this->newsList as $row): ?><li><a href="index.php?action=detail&amp;id=<?php echo intval($row[id]); ?>"><?php echo htmlspecialchars($row[title]); ?></a></li><?php endforeach; ?></ul></body> detail.php?id=<?php echo intval($row[id]); ?>
  • Web MVC• http request MVC• View Model Observer Pattern• View Controller http request Controller
  • Web MVC Dispatcher Multi-formatsRoute Template Controller View Model Business Logic Data Access
  • Web Framework MVC
  • Controller• Action Controller• Command Object
  • Web MVCWeb MVP
  • WebForms
  • JavaScriptMVC MVP
  • JavaScript MVC Framework• JavaScriptMVC (http://javascriptmvc.com/)• Backbone.js (http:// documentcloud.github.com/backbone/)• Spine (http://maccman.github.com/spine/)
  • JavaScript MVP
  • HTML<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>JavaScript MVP</title></head><body> <form action=""> <input type="text" id="num" value="0" /> <button type="button" id="increase">+</button> <button type="button" id="decrease">-</button> </form> <script src="jquery.js"></script> <script src="mvc.js"></script></body></html>
  • mvc.js (app)var myapp = {};
  • mvc.js (Model)myapp.Model = function () { var val = 0; this.add = function (v) { val += v; }; this.sub = function (v) { val -= v; }; this.getVal = function () { return val; };};
  • mvc.js (Presenter)myapp.Presenter = function () { var model = null; this.init = function () { model = new myapp.Model(); }; this.increase = function () { model.add(1); }; this.decrease = function () { model.sub(1); }; this.getModel = function () { return model; }};
  • mvc.js (View)myapp.view = { $increaseButton: null, $decreaseButton: null, $num: null, presenter: null, init: function () { this.presenter = new myapp.Presenter(); this.$increaseButton = $(#increase); this.$decreaseButton = $(#decrease); this.$num = $(#num); this.presenter.init(); this.bindEvents(); this.$num.val(this.presenter.getModel().getVal()); }, bindEvents: function () { var view = this; var presenter = this.presenter; this.$increaseButton.click(function () { presenter.increase(); view.$num.val(presenter.getModel().getVal()); }); this.$decreaseButton.click(function () { presenter.decrease(); view.$num.val(presenter.getModel().getVal()); }); }};
  • mvc.js ( )var myapp = {};myapp.Model = function () { // ...};myapp.Presenter = function () { // ...};myapp.view = { // ...};$(function () { myapp.view.init();})
  • UIMVP
  • MVC / MVP