小皆学前端—MVC&MVP&MVVM

什么是MVC ?

MVC是一个架构模式,全称:Model View Controller。

由三部分组成,模型(model)-视图(view)-控制器(controller)。

优点:

1、按照职责将应用划分为多层,让每个层只关注并做好一件事情,便于我们对每个层进行独立开发、测试和维护。

2、后台代码被移到单独的类文件,提高代码复用率以及便于进行单元测试。

缺点:

1、原理复杂,需要花费大量时间去部署、调试和测试。

2、由于将一个应用程序分成了三个部件,所以使用MVC同时也意味着将要管理更多的文件。

3、不适合中小型规模的应用程序。

模型(model):用于封装与应用程序业务逻辑相关的数据以及对数据的处理方法。(存储程序中使用到的数据)

“模型”有权利直接访问数据。 “模型”不依赖“视图”和“控制器”,也就是说,模型不关心它会被如何显示或是如何被操作。将业务逻辑聚集到一个部件里面,在修改界面及用户交互的同时,不需要重新编写业务逻辑。

视图(view):用户看到并与之交互的界面。

在 Web 应用程序中的 MVC,通常把显示动态数据的 html 页面称为视图。在视图中一般不包含逻辑。

控制器(controller):处理和响应事件,通常是用户操作,并监控模型上的变化,然后相应地更新视图。

当页面加载时,控制器会给视图添加事件监听,比如监听表单提交或按钮点击。然后,当用户和你的应用产生交互时,控制器中的事件触发器就开始工作了。

一个事件的发生过程:

首先用户和应用产生交互,控制器获取到事件后触发事件处理器,控制器根据请求选择去向指定的模型请求数据,得到数据之后就去更新视图,最后视图将数据结果按用户想要的样子呈现给用户。

下面来说说,架构、框架、设计模式的区别

架构:简单的说架构就是一个蓝图,是一种设计方案。架构可以通过多种框架和多个设计模式来实现。

框架:为了解决特定问题而存在的,框架是一个半成品不能直接使用,提供了诸多服务,需要二次开发以实现具体功能。包含多种设计模式。

设计模式:针对单一问题的设计思路和解决方法。就是告诉你针对特定问题如何组织类、对象和接口之间的关系,是前人总结的经验。一个模式可应用于不同的框架和被不同的语言所实现。

所以我们在做一个项目的时候首先出来的应该是架构,是对整个问题的一个总体上的设计,之后再会考虑运用什么样的框架和设计模式来实现我们的架构;当然,只使用框架和设计模式中的一种也是经常遇到的。

MVC框架指MVC模式下的一种框架。典型的MVC框架有:Angular.js,Ember.js,Backbone.js

由MVC衍生出来的两大模式:

MVP:模型(model)-视图(view) - 表现类(Presenter)。

MVVM:模型(model)-视图(view) - 视图模型(ViewModel)

1、MVP:Model提供数据,View负责数据显示与用户交互,Presenter负责逻辑的处理。

过程:用户操作View发生改变,通知Presenter,Presenter操作Model,Model获取到数据后回传给Presenter,Presenter更新视图,然后回馈给用户。

MVP与MVC的区别:

(1)各部分之间的通信是双向的。

(2)MVP中View并不直接使用Model,它们之间的通信是通过Presenter来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不通过 Controller。

(3)MVP模式中的 View 非常薄,不存在任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

2、MVVM: 最近前端很火的模式,常见的Angular.js,Ember.js都采用的这种模式。

Model提供数据,View负责数据显示与用户交互,Presenter负责逻辑的处理。

过程:用户操作View发生改变,通知 ViewModel ,ViewModel操作Model发生数据改变,Model获取到数据后通过事件告诉ViewModel,ViewModel通知View渲染页面,然后回馈给用户。

MVVM与MVP模式几乎一致,唯一区别在于View和ViewModel之间采用了双向绑定,也就是说View的变化会自动反映在ViewModel,ViewModel的变化也会相应反映在View上。无需互相通知,相互就能感应到。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容