通过MVC模式将Web视图和逻辑代码分离-阿里云开发者社区

MVC 模式 (Model-View-Controller) 常被用在 Web 程序中。如 Struts 框架就是一个基于 MVC 模式的 Web 框架。所谓 MVC 模式，就是将视图（也就是客户端代码，包括 html 、 javascript 等）和模型（和数据库及业务逻辑相关的 Java 代码）分开。并通过控制器将两者联系起来。这样做的好处可以使客户端开发人员和服务端开发人员的工作尽量分开，以使他们之间的干扰降到最低。虽然象 Struts 这样的框架可以很好地 Model 和 View 分离。但是对于客户端的代码，仍然存在着一定的视图和逻辑混合的现象。如下面的代码所示：

}
function fun2() {

}
         </ script >
     </ head >
     < body >
         < input type ="button" value ="按钮1 " onclick ="fun1(this)" />
         < input type ="button" value ="按钮2 " onclick ="fun2()" />

</ body >
</ html >

从上面的代码可以看出，html 代码和javascript 代码都混在了同一个html 文件中。在一般情况下，客户端的界面是由美工设计的，而对于javascript 代码，美工一般是不参与实现的。这些代码一般也应属于业务逻辑代码的一部分，虽然它们都在客户端运行，但可能也会处理一定的业务逻辑，如验证数据的正确性。尤其在AJAX 应用中，在客户端还会通过http 协议从服务端获取数据。这样就和业务逻辑绑定得更紧了。因此，如果将用于描述界面的html 和用于处理业务逻辑的javascript （渲染界面的javascript 除外）混在一起，非常不利于团队中负责这两方面的人员进行协调。

最好的可能就是将这些javascript 代码从html 代码中分离。也许有很多人马上就会想到，将这些javascript 放到.js 文件中，然后使用<script> 标签引用一下就ok 了。代码如下：

fun.js 文件

function fun1(obj) { ... }

function fun2() {... }

index.html文件

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
     < head >
         < title ></ title >
         < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< script type ="text/javascript" src ="fun.js" >
</ script >
     </ head >
     < body >
         < input type ="button" value ="按钮1 " onclick ="fun1(this)" />
         < input type ="button" value ="按钮2 " onclick ="fun2()" />

</ body >
</ html >

虽然上面的代码从某种程度上达到了视图和逻辑分离的效果。但仍然有着一定的联系。我们可以看到，两个<input> 标签的onclick 事件不还是引用着fun1 和fun2 函数吗！其实美工人员是不关心这两个函数到底是做什么的，甚至并不需要知道它们的存在。那么是否有更高的方法呢？答案当然是肯定的，就是通过动态的方式指定onclick 事件，而这一切美工人员是完全没有感觉的。

我们在文章的开头提到了 MVC 模式。其实在客户端也存在着一个 MVC 体系结构。我们可以将视图 (V) 看成是描述界面的 html 、 css 和 javascript 代码，而模型（ M ）可以看成是处理业务逻辑的 javascript 代码，而控制器（ C ）就是将这两类代码连接起来的代码（一般也是 javascript 代码）。

在本文中给出了一个小例子来演示一下如何通过动态的方法将V 和M 分离。这个例子是通过<div> 实现的10 个小方块，点击其中的某一个，会将相应的数字追加到下方的文本框架中，并且加入了一些用javascript 实现的效果，如以一定间隔随机更新方块和数字的颜色，直接在文本框中输入数字后，相应的文本框和数字的颜色也会随机发生变化。界面效果如图1 所示。

图1

下面先来实现View 。先看看如下的代码：

numberKeys.html

   <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
   < html >
       < head >
           < title ></ title >
           < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
           < link   rel ="stylesheet"   type ="text/css" href ="my.css" />
           < script type ="text/javascript" src ="addevents.js" >
           </ script >

       </ head >
       < body >
           < input id ="changeColor" type ="button" value ="开始变换颜色" />
           < br />< br />

           < div id ="nubmerKeys" class ="numberKeys"    >

           </ div >
           < br />< br />
           < br />< br />
           < input id ="numbers" type ="text" size ="80" />

       </ body >
   </ html >

从上面的代码可以看出，除了一些html 代码外，没有任何和业务逻辑有关的javascript 代码。但使用<script> 引用了一个叫addevents.js 的文件。在这个文件中将为这个程序添加相应的逻辑代码，也就是说，这个文件相当于MVC 中的M 和C 。

动作装载事件是通过 window 的 onload 事件完成的，代码如下：

下面先来看一下 addButton 函数是如何实现的，代码如下：

addButton 函数的基本实现原理是先将<div> 中的所有元素删除，再向其中加入10 个<div> 标签。在addButton 函数中有几个关键的函数需要讲解一下。

getNumberKeysDiv 函数

这个函数用于获得叫 numberKeys 的 <div> 标签，实现代码如下：

这个函数并不是直接通过<div> 的id 找到这个<div> ，而是通过<div> 的class 属性，这样可能更灵活，因为如果通过id 找<div> ，就必须要求美工必须将这个<div> 命名为numberKeys ，而如果通过查找包含numberKeys 的class 属性的<div> 会对美工的限制更少。因为，只有这个<div> 才会使用css 中的numberKeys 。

getRandomColor 方法

这个方法获得了一个随机的演示，返回了字符串类型，格式 #FFFFFF 。实现代码如下：

function getRandomArbitary(min, max)
{
     return Math.round(Math.random() * (max - min) + min);
}
function getRandomColor()
{
     var red = getRandomArbitary( 0 , 255 ).toString( 16 );
     var green = getRandomArbitary( 0 , 255 ).toString( 16 );
     var blue = getRandomArbitary( 0 , 255 ).toString( 16 );
     if (red.length == 1 ) red = " 0 " + red;
     if (green.length == 1 ) green = " 0 " + green;
     if (blue.length == 1 ) blue = " 0 " + blue;

     return " # " + red.toString( 16 ) + green.toString( 16 ) + blue.toString( 16 );
}

getRandomColor 通过getRandomArbitary 函数获得了三个十进制的随机数（0-255 ），并将其转换为16 进制，并返回最终结果。

buttonOnClick 函数

这个函数是<div> 标签的onclick 事件函数，实现代码如下：

function buttonOnClick()
{
     var text = document.getElementById( " numbers " );
     if ( typeof this .innerText == " #ff0000 " )
        text.value = text.value + this .textContent;
     else
        text.value = text.value + this .innerText;
     this .style.backgroundColor = getRandomColor();
     this .style.color =   getRandomColor();

}

这个函数实现很简单，它的功能是将相应<div> 标签中的数字追加到numbers 文本框中。只是考虑了firefox 和ie 的不同。在firefox 中，获得<div> 中的文本要使用textContext ，而在ie 中要使用innerText 。最后再将当前点击的<div> 和数字的颜色再次变换。

到现在为止，还有两个事件函数代码没有给出，这两个事件函数是onKeyup 和stopAndStartTimer 。

onKeyup 函数

当 numbers 文本框输入一个字符后，发生这个事件，实现代码如下：

这个函数的实现代码也很简单。只是根据用户在文本框中输入的数字来找到相应的<div> 标签，并再次随机变换<div> 背景和数字的颜色。

stopAndStartTimer 函数

这个函数是用来控制定时器的，如果启动定时器，浏览器会每隔3 秒重新使<div> 随机变化一次颜色。实现代码如下：

var time;

function stopAndStartTimer()
{
     if ( this .value.toString().indexOf( " 停止 " , 0 ) > - 1 )
    {
         this .value = " 开始变换颜色 " ;
        clearInterval(time);
    }
     else
    {
         this .value = " 停止变换颜色 " ;
        time = setInterval(onLoad, 3000 );
    }
}

从上面给出的代码可以看出，在View 层，除了<script> 引用了一个javascript 文件外，并未涉及任何和逻辑有关的代码。而设计界面的美工也并不知道开发人员会为<div> 及其他的按钮和文本框添加什么动作。而美工要做的是调整和界面有关的东西，如颜色，位置，分割等。只要使用<script> 引用了这个js 文件，就可以很容易加入相应的动作，而要将这些动作去掉，删除或注释掉这个<script> 标签即可。

尤其要提一下<div> 标签，美工在设计界面时可以向这个<div> 标签添加任何子元素。而在加入addevents.js 后，程序会自动将由美工向<div> 标签中的加入的内容都删除，而加入由业务逻辑需要的元素。这样美工用来设计界面的元素就不会影响开发人员需要加入的和业务逻辑有关的元素了。

根据上面的代码不难看出，numberKeys.html 属于视图层，所有的事件函数属性模型层，而其他的javascript 代码都属性控制器(Controller) 。

本文转自 androidguy 51CTO博客，原文链接：http://blog.51cto.com/androidguy/215345，如需转载请自行联系原作者

通过MVC模式将Web视图和逻辑代码分离

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件