职责分离，相互不影响，不论是界面设计师、图形处理人员、还是编码人员，都希望如此。好的设计模式会使后期维护变得轻松，只需少量的工作就可达到事半功倍的效果。即使在开发阶段，好的设计模式使各个部分相互不干扰，相互通信通过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
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
