前端web开发的MVC模式 - 从一个简单实例讲起
MVC概论起初来之桌面应用开发。其实Java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;control为servlet程序控制跳转和工作流。
随着前端Ajax兴起、前端开发工作进一步划分:js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看,MVC的应用也越来越必要,特别是对大的项目。
例如 需要给一个页面上的button注册一个onclick事件。
1、我们可以有如下最简洁的写法:(view和model control完全混合)
<HTML>
<HEAD>
<TITLE> example </TITLE>
</HEAD>
<BODY>
<input type="button" value="baidu" onclick="alert(this.value);"/>
</BODY>
</HTML>
说明:如上写法的好处:简单、直接;严重的弊端:如果都是这样写法,页面代码很大的时候,修改js代码还需要查找整个页面,导致整个页面非常混乱。
批注:类似与 jsp中直接嵌入java片段语句。
2、将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(o){
alert(o.value);
}
//-->
</SCRIPT>
</BODY>
</HTML>
这是将页面上所有的js代码操作放到<script></script>标签中进行。使得js逻辑代码相对集中,易于后期修改。
但是我们还是需要在html标签中写tipInfo(this)的js调用代码。即html和js仍然有混合。
3、将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 o = document.getElementById("baidu");
o.onclick = function(){
alert(this.value);
}
说明:button节点的操作和事件注册等工作完全与html页面分离。但是仔细想想,这还不是一个基于MVC的模式,control和model完全混合在一起。
批注:与jsp中的javabean实现类似。
4、符合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 G(id){
return document.getElementById(id);
}
var UI = new Object();
UI.register = function(id,even,fun,arr){
if(G(id)) G(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模型
}
批注:类似jsp中的struts框架、struts标签实现方式。
总结:
View:只管页面的显示和样式展示
Control:进行页面节点事件的注册和控制,以及页面加载性能的实现(例如方荣的硬盘缓存)。
Model:真正的逻辑处理,例如jslib库中的form、popup、drag等功能组件都属于model模块。
MVVM架构的简单解析
图1 View、ViewModel、Model之间的关系
在SilverLight或者WPF开发中,为什么要用MVVM架构
使用MVVM架构最大的好处是:开发人员在写程序的时候不需要做UI,而设计人员可以使用Microsoft Expression Blend 4+设计全部的UI并且不需要写任何代码。
主要的好处如下:
1、设计人员可以用设计工具很容易的设计UI,而且不需要写任何代码
2、你可以更好的设计UI,而且可以让即使不是开发人员使用。
3、可以先设计UI或者与开发同时设计。
4、当UI全部改变时,代码可以不改变。
为了达到以上要求。当你设计UI时,后台不能有任何代码。并且UI与应用程序通过Bindings和Commands相互交互,其中Bindings和Commands在ViewModel中设计。
The Model
图2 Model结构
Model层主要为应用程序提供数据。其主要包含
1、Web Services:SilverLight应用程序的特点就是必须通过Web service取得数据,你可以调用Web Service中的方法。
2、Rest Services:和Web Services一样
3、Generic Collections:任何类型的数据集合
The View Model
图3 View Model结构
View Model一般有以下三个部分组成
1、属性:一个事物,它的类型可以是一个字符型,也可以是一个对象。实现接口INotifyPropertyChanged,那么任何UI元素绑定到这个属性,不管这个属性什么时候改变都能自动和UI层交互。
2、集合:事物的集合,它的类型一般是ObservableCollection,因此,任何UI元素绑定到它,不管这个集合什么时候改变,都可以自动的与UI交互。
3、Commands:一个可以被触发的事件,并且可以传递一个类型为Object的参数。但是前提是要实现接口ICommand。
The View
图4 View层结构
这一层可以用Expression Blend设计,不用写任何代码。
主要有以下三个部分组成
1、把View Model层的属性绑定到 text box, radio button, toggle button, MediaElement, trigger an animation or ViewState change
2、把View Model层的集合绑定到ListBox,TreeView,DataGrid
3、Commands
使用InvokeCommandAction实现以下behavior
A、绑定View Model层的ICommand
B、指出你需要实现的ICommand(比如Click事件,Selected事件。。。)
C、传递参数