前端web开发的MVC模式

转载 2016年09月07日 17:50:34

前端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代码还需要查找整个页面,导致整个页面非常混乱。

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完全混合在一起。

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模型
    }

总结:
View:只管页面的显示和样式展示
Control:进行页面节点事件的注册和控制,以及页面加载性能的实现(例如方荣的硬盘缓存)。
Model:真正的逻辑处理,例如jslib库中的form、popup、drag等功能组件都属于model模块。

相关文章推荐

web页面实现拨打电话,发短信等功能

最近逍遥乐在寻找手机网页调用系统短信发送短信的功能,用于分享和发送信息。找了一圈,找到了,这里分享出来,记录一下! 如果需要在移动浏览器中实现拨打电话,调用sms发短信,发送email等功能,移动手...

Chrome浏览器前端开发常用的插件和扩展程序

1.谷歌访问助手(访问谷歌的各种服务包裹gmail 谷歌搜索  chrome应用商店 安装的时候需要采用一些科学上网的手段) 2.clear cache (一键清缓存 让开发远离缓存的困扰) ...

前端web开发的MVC模式 - 从一个简单实例讲起

前端web开发的MVC模式 - 从一个简单实例讲起 MVC概论起初来之桌面应用开发。其实Java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view...

一个简单实例——快速理解前端web开发的MVC模式

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;control为servlet程序控制跳转和...
  • ifanyic
  • ifanyic
  • 2014年05月25日 18:07
  • 441

前端web开发的MVC模式

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;Controller为servlet程序控制...

前端web开发的MVC模式 - 从一个简单实例讲起

前端web开发的MVC模式 - 从一个简单实例讲起 MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给...

前端web开发的MVC模式-从一个简单的实例讲起

原文链接:http://blog.csdn.net/guoyankun/article/details/19335065 前端web开发的MVC模式 - 从一个简单实例讲起 ...

Spring MVC 4.1.3 + MyBatis 零基础搭建Web开发框架(注解模式哦)

这是一个不一样的技术贴,比较适合已有spring mvc开发过的人来提升,也适合那些想学习架构设计的朋友,小弟不才,希望大家能提供更好的方案和建议。...
  • yakson
  • yakson
  • 2015年04月02日 17:03
  • 45338

WEB开发三层架构及MVC设计模式概述

关于   三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI)、业务逻辑层(BLL)、数据访问层(DAL)。区分层次的目的即为了“高内聚,低耦...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端web开发的MVC模式
举报原因:
原因补充:

(最多只允许输入30个字)