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

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