码迷,mamicode.com
首页 > Web开发 > 详细

前端Web开发MVC模式-入门示例

时间:2016-08-12 23:33:42      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

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 type="text/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模块。

 

前端Web开发MVC模式-入门示例

标签:

原文地址:http://www.cnblogs.com/wyaocn/p/5766734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!