浅谈前端开发中的MVC模式
2011-10-11 13:59
197 查看
MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;control为servlet程序控制跳转和工作流。
随着前端Ajax兴起、前端开发工作进一步划分:js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看,MVC的应用也越来越必要,特别是对大的项目。
例如 需要给一个页面上的button注册一个onclick事件。
1、我们可以有如下最简洁的写法:(view和model
control完全混合)
说明:如上写法的好处:简单、直接;严重的弊端:如果都是这样写法,页面代码很大的时候,修改js代码还需要查找整个页面,导致整个页面非常混乱。
批注:类似与 jsp中直接嵌入java片段语句。
2、将html和js代码进行适当分离:(view和model
control在同一页面适当分离)
修改以上的写法:
这是将页面上所有的js代码操作放到<script></script>标签中进行。使得js逻辑代码相对集中,易于后期修改。
但是我们还是需要在html标签中写tipInfo(this)的js调用代码。即html和js仍然有混合。
3、将html和js代码彻底分离:(view和model
control完全分离)
修改写法:
视图view的html代码:
分离出来的模型model和控制control的综合example.js代码:
说明:button节点的操作和事件注册等工作完全与html页面分离。但是仔细想想,这还不是一个基于MVC的模式,control和model完全混合在一起。
批注:与jsp中的javabean实现类似。
4、符合MVC框架的实现:(view、mode和control完全分离)
View视图的view.html代码:
实现control控制功能的control.js代码:
说明:control.js的代码就是实现html页面节点事件的注册。使得节点的各种事件知道会触发什么函数去执行。
具体的函数操作,可以放到model模块中执行,在model中,才是真正处理逻辑操作。
看model.js代码:
批注:类似jsp中的struts框架、struts标签实现方式。
总结:
View:只管页面的显示和样式展示
Control:进行页面节点事件的注册和控制,以及页面加载性能的实现(例如方荣的硬盘缓存)。
Model:真正的逻辑处理,例如jslib库中的form、popup、drag等功能组件都属于model模块。
随着前端Ajax兴起、前端开发工作进一步划分:js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看,MVC的应用也越来越必要,特别是对大的项目。
例如 需要给一个页面上的button注册一个onclick事件。
1、我们可以有如下最简洁的写法:(view和model
control完全混合)
1 2 3 4 5 6 7 8 | <HTML> <HEAD> <TITLE> example </TITLE> </HEAD> <BODY> <input type="button" value="baidu" onclick="alert(this.value);"/> </BODY> </HTML> |
批注:类似与 jsp中直接嵌入java片段语句。
2、将html和js代码进行适当分离:(view和model
control在同一页面适当分离)
修改以上的写法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
但是我们还是需要在html标签中写tipInfo(this)的js调用代码。即html和js仍然有混合。
3、将html和js代码彻底分离:(view和model
control完全分离)
修改写法:
视图view的html代码:
1 2 3 4 5 6 7 8 9 | <HTML> <HEAD> <TITLE> example </TITLE> </HEAD> <BODY> <input type="button" value="baidu" id="baidu"/> </BODY> <script src="example.js"></script> </HTML> |
1 2 3 4 | var o = document.getElementById("baidu"); o.onclick = function(){ alert(this.value); } |
批注:与jsp中的javabean实现类似。
4、符合MVC框架的实现:(view、mode和control完全分离)
View视图的view.html代码:
1 2 3 4 5 6 7 8 9 10 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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 第二参数:为需要注册的触发事件 第三参数:事件触发函数 第四参数:需要传递的参数。 */ |
具体的函数操作,可以放到model模块中执行,在model中,才是真正处理逻辑操作。
看model.js代码:
1 2 3 4 | function tipInfo(arr){ alert(arr[1]); //实现其他组件功能,例如popup、form等。都属于model模型 } |
总结:
View:只管页面的显示和样式展示
Control:进行页面节点事件的注册和控制,以及页面加载性能的实现(例如方荣的硬盘缓存)。
Model:真正的逻辑处理,例如jslib库中的form、popup、drag等功能组件都属于model模块。
相关文章推荐
- 浅谈我对几个Web前端开发框架的比较
- 浅谈Web前端开发中的Touch事件
- 前端开发 之动画浅谈
- 浅谈我对几个Web前端开发框架的比较
- 【自爆系列】浅谈我前端开发的那些糗事
- 浅谈前端开发行业背景
- 浅谈前端移动端页面开发(布局篇)
- 浅谈前端组件的开发思路
- 浅谈web前端开发
- 浅谈:使用Java基于MVC模式开发一个简单商品管理系统
- 浅谈对前端开发时对html中一些招数的运用
- 浅谈前端项目发展的四个阶段——库/框架、构建优化、模块化开发、组件化开发和资源管理
- 浅谈前端移动端页面开发(布局篇)
- 浅谈前端移动端页面开发(布局篇)
- 浅谈JavaScript前端开发的MVC结构与MVVM结构
- 浅谈前端移动端页面开发(布局篇)
- ERP浅谈之前端开发指南一
- 浅谈前端开发需不需要学习SEO优化
- 浅谈前端开发工程师与美工的区别
- 浅谈JavaScript前端开发的MVC结构与MVVM结构