前端架构:MVC以及MVVM MVP介绍

1、mvc

  Model-View-Controller(模型-视图-控制器):用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑.它强制性的使应用程序的输入、处理和输出分开。最典型的MVC就是JSP +servlet+javabean的模式。

 

2、MVP

  Model-View-Presenter:是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理Model提供数据View负责显示。作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller。

 

3、MVVM

  Model-View-ViewModel:和MVC模式一样,主要目的是分离视图(View)和模型(Model);在概念上是真正将页面与数据逻辑分离的模式,在开发方式上,它是真正将前台代码开发者(JS+HTML)与后台代码开发者分离的模式(asp,asp.net,php,jsp)。

 

  1、低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  2、可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
  3、独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。
  4、可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

下面从一个简单的页面实例讲讲mvc模式的使用:

  • 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、将js代码与html代码适当的分离:(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脚本标签中,使得js逻辑代码相对集中,易于后期修改。但是我们还是会在html页面混着有对js函数的调用,依旧没有分离;

  • 3.讲html和js彻底分离(view 和 model control完全分离):
<html>
<head>
<title> example </title>
</head>
<body>
<input type="button" value="baidu"/>
<script src="example.js"></script>
</body>
</html>

 //分离出来的模型model和控制control的综合example.js代码:
    var o = document.getElementById("baidu");
    o.onclick = function(){
           alert(this.value);
    }

  此时button节点的操作和时间注册等工作已经完全与html页面分离,但是control和model还混合在一起,所以还不是一个基于mvc的模式;类似于jsp中的javabean实现类似;

  • 4.符合mvc的框架:(model,view,control完全分离)
<html>
<head>
   <title> example </title>
</head>
<body>
       <input type="button" value="baidu"/>
       <script src="model.js"></script>
       <script src="control.js"></script>
</body>
</html>

//1. control.js
function getObj(id){
  return document.getElementById(id);
}
var ui=new Object();
ui.register=funtion(id,even,fun,arr){
  if(getObj(id)){
        getObj(id)["on"+even]=funtcion(){
             fun(arr);
        }
  }
}
ui.register("baidu","click",tipInfo;[1,2]);
     /*    第一参数:为button节点id
           第二参数:为需要注册的触发事件
           第三参数:事件触发函数
           第四参数:需要传递的参数。*/

/* 说明:control.js的代码就是实现html页面节点事件的注册。使得节点的各种事件知道会触发什么函数去执行。
     具体的函数操作,可以放到model模块中执行,在model中,才是真正处理逻辑操作*/

//2. model.js
function tipInfo(arr){
  alert(arr[1]);
  //实现其他组件功能,例如popup、form等。都属于model模型
}

  以上模式就类似于jsp中的struts框架,Struts标签的实现方式。

总结:

01-04 05:10