随着前端Ajax兴起、前端开发工做进一步划分：js开发和ui页面制做、另外从整个前端项目的清晰明朗以可扩展性角度来看，MVC的应用也愈来愈必要，特别是对大的项目。html
例如 须要给一个页面上的button注册一个onclick事件。前端
一、咱们能够有以下最简洁的写法：（view和model control彻底混合）框架
<HTML>函数
<HEAD>性能
<TITLE> example </TITLE>ui
</HEAD>this
<BODY>spa
<input type="button" value="baidu" onclick="alert(this.value);"/>orm
</BODY>htm
</HTML>
说明：如上写法的好处：简单、直接；严重的弊端：若是都是这样写法，页面代码很大的时候，修改js代码还须要查找整个页面，致使整个页面很是混乱。
二、将html和js代码进行适当分离：（view和model control在同一页面适当分离）
修改以上的写法：
<HTML>
<HEAD>
<TITLE> example </TITLE>
</HEAD>
<BODY>
<input type="button" value="baidu" onclick="tipInfo(this);"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
function tipInfo(obj){
alert(obj.value);
}
//-->
</SCRIPT>
</BODY>
</HTML>
这是将页面上全部的js代码操做放到<script></script>标签中进行。使得js逻辑代码相对集中，易于后期修改。
可是咱们仍是须要在html标签中写tipInfo(this)的js调用代码。即html和js仍然有混合。
三、将html和js代码完全分离：（view和model control彻底分离）
修改写法：
视图view的html代码：
<HTML>
<HEAD>
<TITLE> example </TITLE>
</HEAD>
<BODY>
<input type="button" value="baidu" id="baidu"/>
</BODY>
<script src="example.js"></script>
</HTML>
分离出来的模型model和控制control的综合example.js代码：
var obj = document.getElementById("baidu");
obj.onclick = function(){
alert(this.value);
}
说明：button节点的操做和事件注册等工做彻底与html页面分离。可是仔细想一想，这还不是一个基于MVC的模式，control和model彻底混合在一块儿。
四、符合MVC框架的实现：（view、mode和control彻底分离）
View视图的view.html代码：
<HTML>
<HEAD>
<TITLE> example </TITLE>
</HEAD>
<BODY>
<input type="button" value="baidu" id="baidu"/>
</BODY>
<script src="model.js"></script>
<script src="control.js"></script>
</HTML>
实现control控制功能的control.js代码：
function Get(id){
return document.getElementById(id);
}
var UI = new Object();
UI.register = function(id,even,fun,arr){
if(Get(id)){
Get(id)["on"+even] = function(){ fun(arr);};
}
}
UI.register("baidu","click",tipInfo,[1,2]);
/*
第一参数：为button节点id
第二参数：为须要注册的触发事件
第三参数：事件触发函数
第四参数：须要传递的参数。
*/
说明：control.js的代码就是实现html页面节点事件的注册。使得节点的各类事件知道会触发什么函数去执行。
具体的函数操做，能够放到model模块中执行，在model中，才是真正处理逻辑操做。看model.js代码：
function tipInfo(arr){
alert(arr[1]);
//实现其余组件功能，例如popup、form等。都属于model模型
}
总结：
View：只管页面的显示和样式展现
Control：进行页面节点事件的注册和控制，以及页面加载性能的实现。
Model：真正的逻辑处理，