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

核心提示： 从上面的代码可以看出，除了一些html代码外，通过MVC模式将Web视图和逻辑代码分离(4)，没有任何和业务逻辑有关的javascript代码，但使用<script>引用了一个叫addevents.js的文件，动作装载事件是通过window的onload事件完成的，代码如下：w

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

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

window.onload = onLoad;　// 为onload指定事件函数
function onLoad()
{
　　var text = document.getElementById("numbers");
　　if(text)
　　{　　　
　　　　text.onkeyup = onKeyup;　// 为文本框指定onkeyup事件
　　}
　　var button = document.getElementById("changeColor");
　　if(button)
　　{
　　　　button.onclick = stopAndStartTimer;　// 为按钮指定onclick事件
　　}　
　　addButton();　// 用于在<div>中加入10个<div>标签作为小方块，并指定onclick事件
}

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

function addButton()
{
　　var div = getNumberKeysDiv();　// 获得id为nubmerKeys的<div>标签
　　try
　　{
　　　　if(div)
　　　　{
　　　　　　// 删除<div>中的所有子元素
　　　　　　for(var i = div.childNodes.length - 1; i >= 0; i--)
　　　　　　{
　　　　　　　　try
　　　　　　　　{　
　　　　　　　　　　div.removeChild(div.childNodes[i]);
　　　　　　　　}
　　　　　　　　catch(e)
　　　　　　　　{　　　　　　　　　　
　　　　　　　　}　　　　　　
　　　　　　}
　　　　　　// 为<div>标签加10个子<div>标签
　　　　　　for(var i = 0; i < 10; i++)
　　　　　　{
　　　　　　　　var button = document.createElement("div");
　　　　　　　　button.className = "button";　　　　
　　　　　　　　button.style.left = i * 61 + "px";
　　　　　　　　button.style.backgroundColor = getRandomColor();
　　　　　　　　button.style.border="solid 1px";
　　　　　　　　button.style.textAlign = "center";
　　　　　　　　button.style.lineHeight = "50px";　　　
　　　　　　　　button.style.color = getRandomColor();
　　　　　　　　button.onclick = buttonOnClick;
　　　　　　　　div.appendChild(button);　　　　　　　
　　　　　　　　button.innerHTML　="<b>" +i + "</b>";　　　　　　　　
　　　　　　}　　　　　　
　　　　}
　　}
　　catch(e)
　　{
　　}　　　　　　
}