深入淺出 MVC

30,241 views
30,876 views

Published on

Published in: Technology, Education
0 Comments
28 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
30,241
On SlideShare
0
From Embeds
0
Number of Embeds
21,543
Actions
Shares
0
Downloads
256
Comments
0
Likes
28
Embeds 0
No embeds

No notes for slide

深入淺出 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

×