客户端的 MVC
MVC 模型是在实际应用中使用的较多的一种模式,它在很大程度上降低了整个应用开发的复杂度。在 J2EE 应用中，使用了 MVC 的框架不计其数，比如 structs，JSF 等等。当 然 MVC 作为一种应用程序的模型并不限制其使用的场景,比较著名的 Swing 工具包也是建立在 MVC 模型上的。
在 MVC 模型中，应用被分为三个功能块，M 表示模型(Model)，通常为后台的数据； V 表示视图(View)，表示数据的展现，如 Web 页面或者 2D 库渲染出来的其他 UI 组件，而 C 表示控制器(Controller)，负责逻辑部分的控制，协调模型和视图的关系。使用这个模型,可以降低个层次之间的耦合度，使得软件可以较大程度上得到重用。
一般而言，MVC 是构建在整个系统中的，比如应用的数据来自于远程数据库或本地的文件系统，视图则在前端，直接展示给用户，控制器部分则运行在容器端。我们这个小节要 讨论的并不是这个结构，而是纯粹建立在前端的 MVC。
图 MVC 模型示意图
既然 MVC 模型的目的是降低层次间的耦合，降低开发的复杂度，使得软件尽量的到重用，我们不妨建立这样一套规则：
- 用HTML表示模型
- 用CSS来负责渲染视图
- 用JavaScript负责控制前两者
在 HTML 中，只是将文档的结构和内容组织起来，通过 CSS 进行渲染，布局等工作，而与 用户交互的部分则由 JavaScript 来控制，我们来看这样一个例子：我们有一个页面，其中 有一个 panel，当点击这个 panel 时其背景色会发生变化。
这个 HTML 文件看起来应该是这样的：
<html>
<head>
<script src="jquery-1.3.2.js" type="text/javascript" ></script>
<script src="controller.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="contentGray" id="content">
This is the content of a panel
</div>
</body>
</html>
它引入了两个脚本文件(控制器)和一个样式表文件(视图风格)，而 HTML 本身只不过定义 了 div 的结构和其位于 body 中的层次关系。
我们的视图渲染部分，样式表的内容是这样的：
.contentGray{
background :#cc;
color : blue;
border : 1px solid black;
font: 13px 'Courier New';
width : 300px;
height : 30px;
padding-top : 10px;
padding-left : 10px;
}
.contentDark{
background :##66;
color : white;
border : 1px solid black;
font : 13px 'Courier New';
width : 300px;
height : 30px;
padding-top : 10px;
padding-left : 10px;
}
CSS 文件定义了类(contentGray)的样式及另外一个类(contentDark)的样式，这样 HTML 文件就可以看起来比较漂亮：
我们的需求是，当我们点击这个 panel 的时候，它的背景色加深，文字变成白色，当再次 点击的时候又恢复之前的颜色和背景色。这种“动态”的就交给 JavaScript 来处理了：
$(document).ready(function(){
$("div#content").click(function(){
$(this).toggleClass("contentDark");
})
});
使用 jQuery 可以为我们带来很多便利，我们选择 id 为 content 的 div，然后注册事件处 理函数，当 click 事件发生的时候,我们就切换 CSS 类 contentDark：
当然，这个只是一个简单的例子，如果你的应用所涉及的页面比较多，而且控制器部分 (JavaScript 脚本)的工作量比较大，那么你会发现,客户端的 MVC 模型对你有很大的帮助，不但是界面的统一风格，而且 JavaScript 代码会更加模块化，从而可能一定程度上提高应 用程序的效率，同时降低维护的难度。
{$ activeFileHint $}