理论篇 前端MVC、MVP、MVVM

关于MVC, MVP, MVVM三者的区别,参考的信息来自以下:

1. <<Learning Javascript Design Patters>>      http://addyosmani.com/resources/essentialjsdesignpatterns/book/

2. WIKI: MVP                     http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter

3. WIKI: MVVM                    http://en.wikipedia.org/wiki/Model_View_ViewModel

4. 从MVC在前端开发中的局限性谈起           http://www.infoq.com/cn/articles/starting-from-limitations-of-mvc-in-front-end-development

基于JAVA EE平台的后端MVC中,通常使用Struts或者Srping MVC框架来实现MVC,Modal代表数据库层面的原始数据,View代表展现层面的视图元素,一个项目下若干个的大功能通过不同的URL映射进行分解;

后端中的Controller从承担职责的角度来考虑分为两类:

1. 基于Router的路由:将项目的很多块功能分解;

2. 某一大功能下数据的展现:根据前端操作命令和相应的业务逻辑来展现;

前端MVC不同于后端MVC的地方在于:

1. 功能多少不一致:

  后端MVC从Modal层拿到数据后,进行渲染,返回一个全新的视图页面;

  前端在拿到数据后,在基于不刷新的情况下需要将原来的旧视图清除,渲染新数据,因此会有操作视图的逻辑;目的是为了最佳的用户体验,包括的逻辑有:

  0. 分析并查找与该操作相关的DOM节点模块,针对每一个模块执行如下操作:

  1. 根据业务逻辑,更改已存在的DOM节点;如:document.createElement, hide, show, etc. (较为原始)

  2. 加载视图模板            (以下步骤的效果:相对简洁、统一)

  3. 根据模板生成视图代码

  4. 将代码append到DOM树中

  5. 为节点节点绑定DOM事件

  (以上典型的案例有:操作、刷新列表)

  现在已经有很多的模板引擎(Underscore、Handler、EJS、JADE)可以完成渲染的操作,替代来原始的通过零散地编辑|添加DOM节点操作,这一思想可以说是借鉴于后端MVC的视图渲染;

  虽然模板渲染方式不错,但依然没有解决以下两个问题:

  1. controller与view牢牢绑定,无法解耦:因为获取数据逻辑、业务逻辑、渲染视图逻辑在一块;

  2. 事件需要绑定的问题,在复杂的业务逻辑中,仍需在JS中完成绑定的工作依然不可避免。

  MVP(Presenter)的出现,着重为了解决两个问题:

  1. 解耦和:view与presenter分离,view上的按钮操作,会触发Presenter中一个方法,该方法无参数无返回,但是Presenter会得到该view的数据,并更新view。

  2. 可测试性:通过自动化的单元测试来确保业务逻辑的正确性;

  由此看来,基于MVP的思想可以产生很多可以复用的组件,DOJO的dijit中的每一个类都封装好了属性、方法,使用者仅仅只需要调用方法即可完成,无需操作DOM;每个类中Presenter是这个类本身的JS逻辑,View是这个类对应的DOM template。所以基于DOJO开发的项目可以很好的达到以上两个目的:解耦、组件可测试。

  以下一段话转自MVP WIKI:

  The degree of logic permitted in the view varies among different implementations. At one extreme, the view is entirely passive, forwarding all interaction operations to the presenter. In this formulation, when a user triggers an event method of the view, it does nothing but invoke a method of the presenter that has no parameters and no return value. The presenter then retrieves data from the view through methods defined by the view interface. Finally, the presenter operates on the model and updates the view with the results of the operation. Other versions of model-view-presenter allow some latitude with respect to which class handles a particular interaction, event, or command. This is often more suitable for web-based architectures, where the view, which executes on a client‘s browser, may be the best place to handle a particular interaction or command.

  MVP思想不错,可是一个项目的开发往往需要很多不同的组件,许多时候组件MVP化的时候,减缓了项目的开发进度,极端时更多的精力在于开发新的业务组件、维护组件稳定性、扩展性;在追求快速、轻量级、需求不断迭代更新的项目中,这一方式不够理想。

  基于MVP思想的DOJO框架,个人感觉有点OOP化,同时也过于重量级;

  

  MVVM思想出自于MS的WPF(Windows Presentation Foundation)和Sliverlight,前端框架的典型体现是:Angular;它的典型特点是(案例:过滤查询列表):

  1. 分离页面渲染逻辑(页面中嵌入for|if根据数据来呈现)与业务逻辑(从后台拿到数据后的处理),两者分离;

  2. 双向的数据绑定    视图层不再被动,通过(框架内部实现的自动的)监听 数据的变更来动态更新视图;

  以下转子WIKI MVVM:

  MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back end logic known as the model (also known as the data model to distinguish it from the view model).

  Angular中的VM的M通过Controller来获取并持有数据、V通过Controller在页面的ng标签语法来表示页面逻辑;同时业务逻辑可以通过$service来完成;所以AngularJS可以完成如下的功能:

  1. 事件绑定页面化,不再混入JS中,避免掺杂页面逻辑;

  2. router、controller、service角色相当明确,代码可维护性非常强;错误很容易定位,一旦出现bug,就很容易找到属于那个角色,并找到代码根源;

  3. 可测试性,TDD的测试可以专门测试前端业务逻辑,在以后的web开发中,前端不再是一个简单的展现层,可以将后台更多的业务逻辑放到前台,减少与Server的交互成本;

  总结各自的特点:

  0. 原始方式:

  缺点:

    页面中保存数据,

    JS的代码逻辑混合:一个方法中既有对数据的获取操作、又有业务操作、还有页面渲染操作、最后事件绑定、append到DOM树;

    错误不易被定位:出错处难找、代码需要通篇阅读一边、复杂的逻辑需要断点跟踪多次;

  1. MVC

  优点:

    分离数据、视图;

    控制器介于MV之间,充当调停者、观察者;

  缺点:

    控制器层面的逻辑(基于Backbone实现的TODOMVC)跳转过多;

    需要事件绑定;

  2. MVP

  优点:

    Presenter将视图抽象,封装出相应的方法,OOP化;

    功能细化,可拆解性强,形成一系列组件的组合使用;

    组件可测试化;

  缺点:

    MVP需要组件化,导致项目开发速度相对缓慢;

    到最后不知道该维护的是项目?还是可复用的组件;

  3. MVVM

  优点:    

    分层思想明确,代码不会混淆;

    view <--> view modal  <--> controller(充当modal)  <--> service  <--> router

    页面渲染逻辑独立;

    事件绑定独立;

    可测试性更强:业务逻辑独立,更为专注,以后可以扩展更多的后端逻辑与前台,以减少交互,

模板引擎:

Underscore    http://underscorejs.org/#template

Moustache    http://mustache.github.io/

EJS        https://github.com/tj/ejs

JADE      https://github.com/jadejs/jade

时间: 2024-10-05 06:18:23

理论篇 前端MVC、MVP、MVVM的相关文章

理论篇 前端MVC、MVP、MVVM思考2

MVC设计模式从代码分离的角度来考虑软件的架构和组织,最初源于SmallTalk语言,后来在GoF中有了深入的讲解: SmallTalk时的MVC架构有如下特点: M 代表业务数据的来源: P Presentation展现由View和Controller同时维护,缺一不可:对于每一个Model都有相对应的VC对,因此VC没有真正的分离: C Controller处理用户的输入,并执行相应的业务逻辑: O Observer pattern观察者模式被使用到,因为每当Model变化时,需要通知对应的

浅析前端开发中的 MVC/MVP/MVVM 模式

MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法,一种架构模式往往使用了多种设计模式. 要了解MVC.MVP和MVVM,就要知道它们的相同点和不同点.不同部分是C(Controller).P(Presenter).VM(View-Model),而相同的部分则是MV(Model-View). Model&View 这里有一个可

MVC, MVP, MVVM比较以及区别

MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下对于这三种模式思想的理解,以及它们的区别.欢迎各位高手拍砖. 阅读目录: 一. MVC, MVP, MVVM诞生的需求? 二. 一段典型的耦合代码 三. MVC模式 3.1 主动MVC 3.2 被动MVC 3.3 Web应用中的MVC框架 3.4 MVC总结 一,MVC, MVP, MVVM诞生的需

[转]MVVM架构~mvc,mvp,mvvm大话开篇

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

MVC, MVP, MVVM比较以及区别(上)

原文:MVC, MVP, MVVM比较以及区别(上) MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下对于这三种模式思想的理解,以及它们的区别.欢迎各位高手拍砖. 阅读目录: 一. MVC, MVP, MVVM诞生的需求? 二. 一段典型的耦合代码 三. MVC模式 3.1 主动MVC 3.2 被动MVC 3.3 Web应用中的MVC框架 3.4

Android App的设计架构:MVC,MVP,MVVM与架构经验谈

来源: Android App的设计架构:MVC,MVP,MVVM与架构经验谈 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于App的架构如何设计: 我的App需要应用这些设计架构吗? MVC,MVP等架构讲的是什么?区别是什么? 本文就来带你分析一下这几个架构的特性,优缺点,以及App架构设计中应该注意的问题. 1.架构设计的目的 通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合.这样做的好处是使得程序在开发的过程中,开发人员

前端mvc与mvvm

框架与库的最大区别就是代码的风格确认,库只是页面级别的选择,而架构则关注于整个程序的设计 MVC 作为软件中的99口诀,软件设计要是没个mvc就好像不是正规军一样,前端也是这样,将html理解为view,js理解为controller,js的通讯(主要指ajax)交互理解为model的获取,那么前端就是一个标准的mvc架构,其写法大致是这样的 html/view: <button class="btn btn-info" id='save'>提交</button>

热门前沿知识相关面试问题-MVC/MVP/MVVM架构设计模式面试问题详解

MVC: MVC的定义:M:业务逻辑处理.[业务MODEL]V:处理数据显示的部分.[如xml布局文件]C:Activity处理用户交互的问题.[也就是Activity在MVC中扮演着C的角色] MVC的特点:①.耦合性低.②.可扩展性好.③.模块职责划分明确. MVC的实例详解: 总结:①.利用MVC设计模式,使得项目有了很好的可扩展和维护性.②.controller(控制器)是一个中间桥梁的作用.③.什么时候适合使用MVC模式呢?当一个项目很小, MVP: MVVM: 原文地址:https:

浅谈iOS中的MVC MVP MVVM

MVP MVVM都源自MVC. 传统的MVC,业务逻辑放在Model层,UI在View层,Controller只是Model和View的粘合剂. 实际情况,Model层只存放从json解析的数据模型,Controller层(ViewController)有很多UI逻辑,导致Controller里面既包含业务逻辑(请求数据.处理数据)又包含控制UI逻辑,因此Controller巨大无比. 所以衍生出MVP和MVVM. MVP:把Controller中的业务逻辑抽出来放到Presenter层,Vie