职责分离,相互不影响,不论是界面设计师、图形处理人员、还是编码人员,都希望如此。好的设计模式会使后期维护变得轻松,只需少量的工作就可达到事半功倍的效果。即使在开发阶段,好的设计模式使各个部分相互不干扰,相互通信通过API,降低了耦合性。当需求改变的时候,在API不变的情况下只需改变相应的部分而不需要更改其他的部分。笔者认为模型-视图-控制器MVC模式是非常棒的一种。
MVC视图负责:1.为用户提供一个可视的页面,以便触发事件与控制器对话;
2.在模型改变时做出响应,更新自己,通常需要与控制器再次通信;
MVC模型:业务层,负责业务流程的处理;
MVC控制器:作为视图和模型的中间交互媒介,主要是事件处理函数,响应用户操作。
我们一起来看下面的这个例子,是一个ajax的简单例子,由html、css、js三个文件构成。Html页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Two KeyBoards </TITLE>
<link rel="stylesheet" type="text/css" href="test.css"/>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
window.οnlοad= assignKeys;
</script>
</HEAD>
<BODY>
<div id="keyboard-top" class="top musicalKeys"></div>
<div id="keyboard-side" class="sidebar musicalKeys"></div>
<div id="console" class="console"></div>
</BODY>
</HTML>
Css负责页面的显示,作为视图:
.musicalKeys{
background-color:#ffe0d0;
border:solid maroon 2px;
position:absolute;
overflow:auto;
margin:4px;
}
.toplong{
width:536px;
height:68px;
top:24px;
left:24px;
}
.sidebar{
width:70px;
height:530px;
top:24px;
left:570px;
}
.musicalButton{
border:solid navy 1px;
width:60px;
height:60px;
position:relative;
margin:2px;
float:left;
}
.do{background-color:red;}
.re{background-color:orange;}
.mi{background-color:yellow;}
.fa{background-color:green;}
.so{background-color:blue;}
.la{background-color:indigo;}
.ti{background-color:violet;}
Js文件是事件处理函数,是控制器,源码如下:
var notes=new Array("do","re","mi","fa","so","la","ti","do");
function assignKeys(){
var candidates=document.getElementsByTagName("div");
if(candidates){
for(var i=0;i<candidates.length;i++){
var candidate=candidates[i];
if(candidate.className.indexOf('musicalKeys')>=0)
makeKeyBoard(candidate);
}
}
}
function makeKeyBoard(el){
for(var i=0;i<notes.length;i++){
var key=document.createElement("div");
key.className=notes[i]+" musicalButton";
key.note=notes[i];
key.οnclick=playNote;
var value=document.createTextNode(notes[i]);
key.appendChild(value);
el.appendChild(key);
}
}
function playNote(event){
var note=this.note;
var console=document.getElementById('console');
if(note&&console){
console.innerHTML+=note+",";
alert("you play the note:"+note);
}
}
页面的最终效果是在顶部和右部显示8个不同颜色的方块,当单击的时候提示单击的方块并在页面显示出操作的结果。如果页面设计师想在原有的页面上插入其他的元素,或者美工人员想显示另外的效果,或者编码人员想改变功能,只需在自己负责的文件上更改就够了,而不会干涉到其他的部分。这是一个不错的处理方式。之所以没有把window.onload放在js文件里面,是因为也许其他的页面会用到这个js,我们仅仅是想提高复用性。
这种处理方式非常便捷。试想,我们把js里面的代码放在html里面,而后来其他的页面也采用了相同的javascript代码,如果需求改变了,如果是少量的文件,更改起来也许不是很麻烦,当很多的时候呢?这个工作量将是很累人的。采用这种方式,只需要更改一下js,工作量就比较乐观些。或者我们在js文件里面用编码的方式添加html元素或者样式,一旦需求改变了,我们不得不很小心的一一的去查找要修改的地方。这是我们最不想要做的事情但又不得不做。相比之下,我们会做出明智的选择以不至于陷于混乱之中。
注:本文所采用的案例来源ajax in action