网络上有很多类似的讨论。包括一些大v,比如

阮一峰:MVC,MVP 和 MVVM 的图示

廖雪峰:MVVM

司徒正美: 各自用一句话来概括MVC、MVP、MVVM的差异特点

。。。

但是说的往往比较概念化、空泛,初学者很难理解。本篇用最简单的例子讲解这三者,看完本篇,你就不会再纠结这个问题了

框架的起源与目的

1.框架是一个可复用的设计构件

框架就是为大规模复用而生,为大型项目而生。小型项目由于不需要大规模复用,可不需要框架。

表现为组件的复用、项目的移植都应该非常容易。

2.框架规定了一种固定的、结构化的方式进行代码的组织。

框架的目标是进行有效的知识积累。为此,相关的技术当以固定的格式,以代码、文档、模型等方式固化下来。

表现为:框架规定了代码的结构层次(“高内聚、低耦合”),以及各个层次之间的关系;交互以及控制流程。

这块可能有点抽象,简单理解:框架就是规定了结构分层,每一层是干什么用的。然后你按照框架规定的范式进行编程,框架帮你处理层与层之间的交互与控制。

MVC

Model-View-Controller

view层:用户界面

controller层:业务逻辑、路由

model层:数据结构、数据存储

以jsp作为页面模板开发为例,其他asp/php等类似(为了方便,下面用V表示View,C表示controller, M表示Model。后面的例子同理)

view层:

   jsp页面模板是属于这一层。

controller层:

  响应jsp页面的用户操作并处理的Servlet。servlet需要从model获取一些数据结构和数据,以及传递数据到model层保存,所以数据流程是C到M,M也可以到C。

  Servlet处理中路由功能会告诉服务器处理完成之后下一个展示的该是哪个jsp页面。这块仅仅是路由功能,servlet和“下一个展示的jsp页面”没有交互和数据的传递。所以V到C是单项的。

model层:

  这一层主要定义基本数据结构和数据存储。jsp页面模板中,需要从M层获取最新的数据组装页面,所以是M到V。

到此,对MVC框架就应该比较了解了。

MVC框架有其他变种,都是基于这种模式的拓展。C和M层必然是双向的,那些认为是单向的模式,本人不敢苟同,也实在想不出单向能够解决所有问题的场景。

复杂的业务中,C层必然从M层读取数据处理业务。如果这一条不成立,那么C层能做的仅仅是路由功能。可以想象,C层将多么的单薄,M层将多么的厚重,这必然不是框架的目标,也不是好的框架。

MVP

Model-View-Presenter

view层:用户界面

presenter层:业务逻辑、路由

model层:数据结构、数据存储

为什么要MVP?从MVC的流程可以看到,V层数据是从M层获取的。最上层和最底层直接交互,意味着什么?

在前后端没有分工的时候没有问题,V层开发者就是M层开发者,所以对M的数据结构了如指掌,要什么数据知道怎么去获取。

但是V层越来越复杂、ajax做局部页面渲染的出现以及前后端分工导致V层开发者更专注于交互设计,已经没有精力去掌控M层的细节了。

这时,V层希望的是:有特定的接口返回约定好的数据。这些数据和M层的数据可能有很大的不同,应该有一个中间层来提供。之前的MVC的C层来干这件事比较合适。所以变成了P层,P层除了干C层的事,还多了为V层提供各种各样功能接口。

现在V层和M层完全分来了。前后端的开发人员都能将精力集中在该干的事上。

MVVM

Model-View-ViewModel

view层:用户界面、响应viewModel变化处理

viewModel层:界面业务逻辑、路由

model层:后台业务逻辑、数据结构、数据存储

MVVM更像是前端程序员的自嗨。当然它的出现也是有必要的,前端的复杂度指数级的上升。比如你可以看到类似Scratch这样纯前端的图形化编程系统,代码量以千万行为单位,是有必要为这样庞大的系统做框架设计的。MVVM就是为此而生。

在MVVM的视界里,M层不是关键,你可以把整个后台都看成M层。

V层是用户界面,并且感知到VM层数据的变化V层会跟随变化(你不需要知道V层怎么感知到VM层数据变化的,这就是框架帮你做的事)。

VM层才是重点。在框架中,VM层定义了V层需要的直接数据结构(所以才带Model字样),V层的事件以及数据变化都会经过框架,流入VM层进行处理,进行业务逻辑的处理、数据的变更以及和M层的交互。

Angular、Vue、React都是类似的。简单理解:前端开发中模板即V层,后台属于M层,按照框架的范式开发的部分就是VM层。

细心的你可能看到了一点:VM层居然包含了“路由”功能。在MVC、MVP框架中,路由都是属于服务器功能,单页面的兴起,让路由纳入了前端的功能圈。聪明的你应该想到,MVVM框架也是为单页面而生

当然这些MVVM框架都支持在服务端渲染,一旦用在服务端渲染,框架就失去了V层的响应式,直接就编程练一个模板引擎了,不能再称之位MVVM框架了。

到此,你应该对三种框架有了足够的认识了。

MVC和MVP都主要为简化服务端渲染视图而设计的。MVVM则是为了简化前端页面开发而设计的。

上面的示例以Web页面来描述的。同理推广到其他视图交互应用都是可以的。

说一个题外话,框架和库的区别就比较明显了。库只是提供拓展的功能,而框架则是规定了代码分层,并让你必须按它的结构进行代码编写。这就是Jquery不是框架的原因。

不要再问我MVC、MVP、MVVM了的更多相关文章

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

    相关:http://www.cnblogs.com/wytiger/p/5996876.html 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于 ...

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

    MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...

  3. MVC, MVP, MVVM比较以及区别

    MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...

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

    MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...

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

    MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新的模式,MVP与MVC有着一 ...

  6. 前端mvc mvp mvvm 架构介绍(vue重构项目一)

    首先 我们为什么重构这个项目 1:我们现有的技术是前后台不分离,页面上采用esayUI+jq构成的单页面,每个所谓的单页面都是从后台胜场的唯一Id 与前端绑定,即使你找到了那个页面元素,也找不到所在的 ...

  7. Android App的设计架构:MVC,MVP,MVVM与架构AAAAA

    1. 架构设计的目的1.1 通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合.1.2 这样做的好处是使得程序在开发的过程中,开发人员只需要专注于一点,提高程序开发的效率,并且更容易进行后续 ...

  8. 用户界面编程模式 MVC MVP MVVM

    用户界面编程模式 MVC MVP MVVM 程序 = 数据 + 算法 数据:就是待处理的东西 算法:就是代码 涉及到人机交互的程序,不可避免涉及到界面和界面上显示的数据原始方式是界面代码和逻辑代码糅合 ...

  9. [1] MVC & MVP &MVVM

    开发架构之MVC & MVP & MVVM  

  10. 第四十五课:MVC,MVP,MVVM的区别

    前端架构从MVC到MVP,再到MVVM,它们都有不同的应用场景.但MVVM已经被证实为界面开发最好的方案了. MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/P ...

随机推荐

  1. Swift解算法——台阶问题

    题目:一个台阶总共有n级,如果一次可以跳1级,也可以跳2级. 求总共有多少总跳法,并分析算法的时间复杂度.   首先对题目进行分析: 台阶一共有n级 因此当n = 1时——只有一种跳法       当 ...

  2. 【百度SEO优化】如何让蜘蛛爬行你的网站

    大家都知道,现在做网站简单,但是推广就比较困难了,可能一些商家引入投资,直接烧钱做广告来推广,但是对于一些小站长,是没有那么多资金的.因此我们就要懂得一些SEO优化的知识了,简单介绍一下: 怎么让百度 ...

  3. COJ 删除数字

    试题描述 输入正整数N和M,在N中删除掉M位,能留下的最大整数是多少? 输入 正整数N和M 输出 留下的最大整数 输入示例 233390323 5 输出示例 9323 其他说明 1<=N< ...

  4. light oj 1205 - Palindromic Numbers 数位DP

    思路:搜索的时候是从高位到低位,所以一旦遇到非0数字,也就确定了数的长度,这样就知道回文串的中心点. 代码如下: #include<iostream> #include<cstdio ...

  5. PHP: 深入pack/unpack 字节序

    http://my.oschina.net/goal/blog/195749?p=1 目录[-] 写在前面的话 什么是字节序 MSB和LSB 大端序 小端序 网络字节序 主机字节序 总结 pack/u ...

  6. Java基础知识强化23:Java中数据类型转换(面试题)

    1. 以下代码输出结果是( D ).                     public  class  Test   {                                       ...

  7. HDU--3487 Play with Chain (Splay伸展树)

    Play with Chain Problem Description YaoYao is fond of playing his chains. He has a chain containing ...

  8. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  9. LVS集群之工作原理和调度算法(2)

      LVS的工作机制 LVS里Director本身不响应请求,只是接受转发请求到后方,Realservers才是后台真正响应请求. LVS 工作原理基本类似DNAT,又不完全相像,它是一种四层交换,默 ...

  10. Python学习笔记(3)-字符串

    创建字符串 一对单引号或双引号 >>> 'hello world' 'hello world' >>> "hello world" 'hello ...