深入淺出 MVC

MVC
• http://huoding.com/2011/05/02/64
• Xerox PARC
Smalltalk

MVC

Controller View

Model

MVC

Controller View

Controller Model
( )

Model

MVC

Controller View
Controller View

View Model

Model

MVC

View

Controller View

Model

MVC

Controller

Controller View

Model

MVC

Controller View

Controller
Model View
Model

Model

MVC
• Controller

• View Controller

•

MVP

Presenter View

Model

MVP

View

Presenter View
View Presenter

Model

MVP

Presenter View

Presenter Model

Model

MVP

Presenter View

Persenter
Model

Model

MVP

View

Presenter 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

• 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>
<?php
mysql_close($link);
?>

<?php
// (detail.php)
?>
<!DOCTYPE html>
<html>
<body>
<?php
$id = (int) $_GET['id'];
. "AND NOW() < offlineDateTime AND id = $id";
?>
<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>
<?php
mysql_close($link);
?>

View
<?php
class 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)


$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>
<body>
<ul class="posts">
<?php foreach ($this->newsList as $row): ?>
<li><a href="detail.php?id=<?php echo intval($row['id']); ?>">
</a></li>
<?php endforeach; ?>
</ul>
</body>

Model
<?php
// News.php
class News {

private $_link = null;

public function __construct() {
$this->_link = mysql_connect('127.0.0.1', 'username', 'password');
mysql_select_db('mvc', $this->_link);
}

public function __destruct() {
mysql_close($this->_link);
}

Model ( )
public function findAll() {

$result = mysql_query($sql, $this->_link);

$newsList = array();
while ($row = mysql_fetch_assoc($result)) {
$newsList[] = $row;
}
return $newsList;
}

public function find($id) {
. "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();

$view = new View();
$view->newsList = $newsList;
$view->display('index.tpl');
?>

<?php
// (detail.php)


$newsModel = new News();
$row = $newsModel->find($id);

$view = new View();
$view->row = $row;
$view->display('detail.tpl');
?>

Controller
<?php

class 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() {
$this->_newsModel = new News();

$this->_view = new View();
}

Controller ( )
public function index() {
$this->_view->newsList = $this->_newsModel->findAll();
$this->_view->display('index.tpl');
}

public function detail() {
$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>
<body>
<ul class="posts">
<?php foreach ($this->newsList as $row): ?>
<li><a href="index.php?action=detail&id=<?php echo intval($row
['id']); ?>">
</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-formats

Route Template
Controller View

Model

Business
Logic

Data Access

Controller

• Action Controller
• Command Object

JavaScript MVC Framework
• JavaScriptMVC (http://javascriptmvc.com/)
• Backbone.js (http://
documentcloud.github.com/backbone/)
• Spine (http://maccman.github.com/spine/)

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 (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();
})

深入淺出 MVC

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 深入淺出 MVC

Similar to 深入淺出 MVC (20)

More from Jace Ju

More from Jace Ju (14)

Recently uploaded

Recently uploaded (20)

深入淺出 MVC