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

核心提示： 这个函数的实现代码也很简单，只是根据用户在文本框中输入的数字来找到相应的<div>标签，通过MVC模式将Web视图和逻辑代码分离(7)，并再次随机变换<div>背景和数字的颜色，stopAndStartTimer函数这个函数是用来控制定时器的，numberKeys.

这个函数的实现代码也很简单。只是根据用户在文本框中输入的数字来找到相应的<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)。

文章来源:http://www.cnblogs.com/nokiaguy/archive/2008/05/18/1202196.html