Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MVCJace Ju
MVC• http://huoding.com/2011/05/02/64•            Xerox PARC  Smalltalk
MVC•              UI•         UI
MVC
MVCController           View             Model
MVCController                    View                 Controller   Model             (                        )           ...
MVCController                           View             Controller     View                                   View   Mode...
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     ...
MVPPresenter                         View            Presenter     Model              Model
MVP                                    ViewPresenter                         View            View      Presenter          ...
MVP  Presenter            ViewPersenter     Model              Model
MVP                               ViewPresenter               View            Presenter            Model               Vie...
MVP•          View    View• Presenter          Controller              View•          WinForms•                    Supervi...
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•            ...
<?php//        (index.php)$link = mysql_connect(127.0.0.1, username, password);mysql_query(SET NAMES utf8);mysql_select_db...
<?php//        (detail.php)$link = mysql_connect(127.0.0.1, username, password);mysql_query(SET NAMES utf8);mysql_select_d...
View
View<?phpclass View {    private $_vars = array();    public function __set($name, $val) {        $this->_vars[$name] = $v...
<?php//       (index.php)$link = mysql_connect(127.0.0.1, username, password);mysql_query(SET NAMES utf8);mysql_select_db(...
Model
Model<?php// News.phpclass News {    private $_link = null;    public function __construct() {        $this->_link = mysql...
Model (           )    public function findAll() {        $sql = "SELECT * FROM news "             . "WHERE onlineDateTime...
Model<?php//      (index.php)require_once News.php;$newsModel = new News();$newsList = $newsModel->findAll();require_once ...
Controller
Controller<?phpclass Controller {    private $_action = index;    private $_newsModel = null;    private $_view = null;   ...
Controller (              )    public function index() {        $this->_view->newsList = $this->_newsModel->findAll();    ...
View<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>News</title></head><body><ul class="posts"><?php foreach ($t...
Web MVC•            http request              MVC•         View            Model         Observer Pattern• View          C...
Web MVC Dispatcher                               Multi-formatsRoute                                          Template     ...
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/backbo...
JavaScript MVP
HTML<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>JavaScript MVP</title></head><body>    <form action="">     ...
mvc.js (app)var myapp = {};
mvc.js (Model)myapp.Model = function () {    var val = 0;    this.add = function (v) {        val += v;    };    this.sub ...
mvc.js (Presenter)myapp.Presenter = function () {    var model = null;    this.init = function () {        model = new mya...
mvc.js (View)myapp.view = {    $increaseButton: null,    $decreaseButton: null,    $num: null,    presenter: null,    init...
mvc.js (   )var myapp = {};myapp.Model = function () {    // ...};myapp.Presenter = function () {    // ...};myapp.view = ...
UIMVP
MVC / MVP
深入淺出 MVC
深入淺出 MVC
深入淺出 MVC
深入淺出 MVC
Upcoming SlideShare
Loading in …5
×

深入淺出 MVC

32,130 views

Published on

Published in: Technology, Education
  • Be the first to comment

深入淺出 MVC

  1. 1. MVCJace Ju
  2. 2. MVC• http://huoding.com/2011/05/02/64• Xerox PARC Smalltalk
  3. 3. MVC• UI• UI
  4. 4. MVC
  5. 5. MVCController View Model
  6. 6. MVCController View Controller Model ( ) Model
  7. 7. MVCController View Controller View View Model Model
  8. 8. MVC ViewController View Model
  9. 9. MVC ControllerController View Model
  10. 10. MVC Controller ViewController Model View Model Model
  11. 11. MVC ViewController View Model
  12. 12. MVC• Controller• View Controller•
  13. 13. MVP
  14. 14. MVPPresenter View Model
  15. 15. MVP ViewPresenter View View Presenter Model
  16. 16. MVPPresenter View Presenter Model Model
  17. 17. MVP ViewPresenter View View Presenter Model
  18. 18. MVP Presenter ViewPersenter Model Model
  19. 19. MVP ViewPresenter View Presenter Model View Model
  20. 20. MVP• View View• Presenter Controller View• WinForms• Supervising Controller Passive View
  21. 21. Supervising Controller• View Model• MVC Controller
  22. 22. Passive View• Presenter Model View• View Model• Presenter• View
  23. 23. MVC / MVP
  24. 24. ...Web ApplicationMVC
  25. 25. Web MVC
  26. 26. • Web MVC Java Model 2• Java Struts• PHP PHPMVC• Ruby on Rails• Web Framework Web MVC
  27. 27. <?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);?>
  28. 28. <?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);?>
  29. 29. View
  30. 30. 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; }}
  31. 31. <?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>
  32. 32. Model
  33. 33. 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); }
  34. 34. 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); }}
  35. 35. 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);?>
  36. 36. Controller
  37. 37. 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(); }
  38. 38. 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();
  39. 39. 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]); ?>
  40. 40. Web MVC• http request MVC• View Model Observer Pattern• View Controller http request Controller
  41. 41. Web MVC Dispatcher Multi-formatsRoute Template Controller View Model Business Logic Data Access
  42. 42. Web Framework MVC
  43. 43. Controller• Action Controller• Command Object
  44. 44. Web MVCWeb MVP
  45. 45. WebForms
  46. 46. JavaScriptMVC MVP
  47. 47. JavaScript MVC Framework• JavaScriptMVC (http://javascriptmvc.com/)• Backbone.js (http:// documentcloud.github.com/backbone/)• Spine (http://maccman.github.com/spine/)
  48. 48. JavaScript MVP
  49. 49. 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>
  50. 50. mvc.js (app)var myapp = {};
  51. 51. 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; };};
  52. 52. 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; }};
  53. 53. 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()); }); }};
  54. 54. mvc.js ( )var myapp = {};myapp.Model = function () { // ...};myapp.Presenter = function () { // ...};myapp.view = { // ...};$(function () { myapp.view.init();})
  55. 55. UIMVP
  56. 56. MVC / MVP

×