前端MV*框架之经典MVC

一、学习背景

由于公司业务日益庞大,很多老项目需要维护,由于这些项目的前端基本都是jQuery+jQuery plugins搞定的,编写的代码可谓是:无组织、无纪律,导致前端维护成本越来越高,为了解决这一难题,决定引入前端MV*框架。从浏览器兼容性、与其他组件方便集成的角度考虑,最终选择了backbone.js。因为之前接触过AngularJS,backbone.js我只看了一天文档,就能开发实际项目了;但是有个问题一直耿耿于怀,由于backbone.js没有明确指出自己的架构模式,所以它不属于MVC、MVP、MVVM中的任何一种,而是介于它们之间的某个变种,这一点让我极度郁闷,因为这导致我无法精确的组织JavaScript代码。而这一问题的根本原因是我对MV*架构模式的理解不够深刻,所以我决定:先将MVC、MVP、MVVM的定义与区别理解透彻,再回过头来审视backbone.js。

MVC是一种架构模式,说白了就是一种组织代码的方式,将代码根据职责划分成三块区域,这样的好处很明显:易于阅读、便于维护。回想一下没有引入MV*框架前的那一坨JavaScript代码,我相信大部分人都会表示:我碰都不想碰了。就算你引入了模块加载框架(requirejs、seajs等),你的代码仍然是“凌乱”的,只不过范围缩小到模块内部而已,前端MV*框架就是为了解决这个问题出现的。

二、经典MVC

2.1 MVC诞生

20世纪80年代,mvc作为smalltalk-80(传说中的“面向对象编程之母”)的一个类库走进人们的视野。那个年代浏览器还没出现,计算机的图形用户界面(GUI)还相当的简陋。为了将UI组件代码从业务逻辑代码中剥离出来,人们尝试对应用程序进行分层,产生了最初的MVC模式。当今的MVC(本文称为MVC的变种)已经与经典MVC大相径庭,由于经典MVC的某些特征并不适合如今的富客户端应用(后面会有解释),所以从某种意义上来说,经典MVC已经消失了,本文的描述针对的是经典MVC。

2.2 经典MVC的工作流程

经典MVC根据职责将代码划分为三个区域:Model(模型)、View(视图)、Controller(控制器)。不考虑特殊场景,大部分的工作流程是这样的:

"经典MVC"
"经典MVC"

首先从M、V、C各自的职责说起:

  • Model:代表业务逻辑层,它无视表现层的存在,只专注处理业务。
  • Controller:接受用户的输入,将输入转为相应的命令,执行进一步的操作。
  • View:向用户呈现展示的信息,与M建立观察者模式,根据M的改变自动重新渲染。

首先需要说的是,不要以浏览器的角度理解这个流程,因为那个时代浏览器还未出现。一个完整的MVC的工作流程是这样的:

  1. 首先C接受用户的刺激。
  2. (流程①)C将这种刺激转化为某种命令去调用M的接口,对M执行更新操作。
  3. (流程②)M发送状态改变的通知给V(由观察者模式完成)。
  4. (流程③)V调用M的接口获取最新数据,重新渲染V(由观察者模式完成)。

从调用流程我们发现经典MVC有以下几个特征:

  1. C与V共同组成一个表现层,即一个UI组件,两者是无法独立存在的,所以没有实质上的分离,这点与如今的MVC变种有很大区别。
  2. C与V没有直接的调用关系,各自处理自己的事务。
  3. 引入观察者模式实现数据绑定,C没有直接更新V,而是去更新M,然后通过观察者模式对V进行更新。由于一个M可以对应多个UI组件,当某个特定的C更新M时,会引起相关的多个V同时更新,这对于开发复杂的用户界面非常便利。
  4. 成功将“表现层(C+V)”从“业务逻辑层(M)”剥离出来。

2.2 经典MVC的缺陷

2.2.1 观察者模式的缺陷

观察者模式在给开发者带来便利的同时,也带来了一个问题,那就是:很难通过跟踪代码来获悉程序的流程走向,这直接导致了程序复杂度的提高,所以过多的使用观察者模式会使程序变的不易理解。

2.2.2 特殊表现层逻辑的尴尬位置

随时用户对图形界面的要求越来越高,GUI变得越来越复杂,表现层的逻辑已经不仅仅是将M的数据直接显示到屏幕上那么简单。我们需要对M的数据进行进一步的加工处理后才能呈现给用户。经典MVC的时代,图形用户界面是非常简单的,所以MVC能满足大部分场景的需求,就算有那么一小部分特殊的表现层逻辑(M数据的加工处理),也被放到M里进行处理了,虽然污染了M的纯度,但是影响并不大。但是对于当代的富客户端应用来说,这种“特殊表现层逻辑”是非常庞大的,如果都塞进M里,这显然是不能接受的。

2.2.3 smalltalk的对策

基于smalltalk-80 MVC的开发者也意识到了MVC的短板,他们采用的策略是对V进行拓展,将V拓展为一个全新的对象,它既包含V的全部内容(包括取代V,与M建立观察者模式),又含有对M数据进行加工处理的逻辑代码,他们把这种全新的对象叫作:Presentation Model。而这一切的改变都是为了更彻底的将“表现层”与“业务逻辑层”分离。

三、总结

经典MVC总起来说有两个关键点:分离表现层、通过观察者模式进行数据同步。虽然MVC已经不能满足当代富客户端应用的需求,但是它的两个关键点却被传承了下来,影响了一系列的MVC变种,比如MVP、MVVM等,而这些MVC变种也正是为了满足富客户端的需求进化而来,下篇文章介绍MVP与MVVM。

参考文献

<a href="https://en.m.wikipedia.org/wiki/Model–view–controller">wikipedia Model-view-controller</a>
<a href="http://martinfowler.com/eaaDev/uiArchs.html#ModelViewController">Martin Fowler GUI Architectures</a>
<a href="http://c2.com/cgi/wiki?ModelViewControllerHistory">Model View Controller History</a>

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

推荐阅读更多精彩内容

  • 前言 看了下上篇博客的发表时间到这篇博客,竟然过了11个月,罪过,罪过。这一年时间也是够折腾的,年初离职跳槽到鹅厂...
    西木柚子阅读 21,108评论 12 185
  • 一、学习背景 本文是继“前端MV*框架之经典MVC”的第二篇,学习动机是通过深入理解MVC、MVP、MVVM后,找...
    integrate阅读 4,431评论 3 23
  • SSY说: 原来我一直做的是MVP呀 2015年2月 1日 11:57|#|引用 Simba说: 很好。写的不错。...
    程序员之路阅读 3,717评论 4 7
  • 天台风 顶池瓦 风如虚 瓦如哑 我们犹如 钢筋森林里的流沙 散落一地 风吹无根 独走天涯
    lviy666阅读 136评论 0 0
  • 原创晨读随笔: 《即将逝去的念》 时光总在不经意间流逝,在温婉的掌心滑落,溜走了许多的念想,每时每刻的思念...
    飘逸1阅读 422评论 0 6