前端程序猿眼中的MVC,你了解多少?

Classic MVC 传统MVC

<br />

大概上世纪八十年代,Xerox PARC的Trygve提出了MVC的概念,并应用在Smalltalk系统中,为了和其它类型的MVC加以区分,历史上习惯的称之为Classic MVC。

那么什么是MVC?

<br />

模型(Model),用于存储程序中使用到的数据;
视图(View),用不同的表现形式来呈现数据;
控制器(Controller),更新模型。

在维基百科对 MVC 体系结构的定义中,它由如下三部分组成:
模型(Model) -“数据模型”(Model)用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。 “模型”有对数据直接访问的权力。 “模型”不依赖“视图”和“控制器”,也就是说,模型不关心它会被如何显示或是如何被操作。
视图(View) - 视图层能够实现数据有目的的显示,通常是一个用户界面元素。在视图中一般没有程序上的逻辑。在 Web 应用程序中的 MVC,通常把显示动态数据的 html 页面称为视图。
控制器(Controller) - 处理和响应事件,通常是用户操作,并监控模型上的变化,然后去修改视图。

注意:从依赖关系看,Model不依赖View和Controller,而View和Controller依赖Model。

View 传送指令到 Controller
Controller 完成业务逻辑后,要求 Model 改变状态
Model 将新的数据发送到 View,用户得到反馈

Web MVC

<br />
Java是Web MVC最早的实践者,开发出Model 2,使用JavaBean,JSP,Servlet分别对应MVC中的三个组成部分,紧接着Structs的出现开始让大众注意到Web MVC,不过真正让Web MVC流行起来的却是Ruby社区的Rails,其大致流程如下图所示:

图解:一个典型的Web MVC流程
1、Controller截获用户发出的请求
2、Controller调用Model完成状态的读写操作
3、Controller把数据传递给View
4、View渲染最终结果并呈献给用户
在Web MVC中,Controller变成了中继者,主要工作是协调Model和View
<br />

从PHP中去分析MVC架构设计

<br />
1、创建Controller文件 起名为testController.class.php

<?php
    class testController{
        function show(){
            $testModel = new testModel();
            $data = $testModel -> get();
            $testView = new testView();
            $testView ->display($data);
        }
    }
 ?>

<br />
2、创建Model文件 起名为testModel.class.php

<?php
    class testModel{
        function get(){
            return "hello world";
        }
    }
 ?>

<br />
3、创建View文件 起名为testView.class.php

<?php
    class testView{
        function display($data) {
            echo $data;
        }
    }
 ?>

<br />
**4、创建测试文件 起名为test.php **

<?php
    require_once("testController.class.php");
    require_once("testModel.class.php");
    require_once("testView.class.php");
    $testController = new testController();
    $testController->show();

 ?>

通过修改、添加Controller model view 我们可以看出:

PHP中MVC执行的步骤

    第一步   浏览者   ->  调用控制器,对他发出指令
    第二步   控制器   ->  按指令选取一个合适的模型
    第三步   模型     ->  按控制器指令取相应数据
    第四步   控制器   ->  按指令选取相应视图
    第五步   视图     ->  把第三步取到的数据按用户想要的样子显示出来

各个层的作用:

(1)控制器的作用是调用模型,并调用视图,将模型产生的数据传递给视图。并让相关视图去显示。
(2)模型的作用是获取数据并处理数据。
(3)视图的作用是将取得的数据进行组织、美化等,并最终向用户终端输出。

<br />

从Angular中去分析MVC架构设计

<br />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="demo.css" media="screen" title="no title" charset="utf-8">
    </head>
    <body>
        <div ng-app="app">
            <div ng-controller="myCtrl">
                <input type="text" ng-model="msg">
                <h1>{{msg}}</h1>
            </div>
        </div>
    </body>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('app',[]).controller('myCtrl',function ($scope) {
            $scope.msg="angular";
        })
    </script>
</html>

应用解析:

1、AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
2、首先在script中用module创建了一个angular的模块。
3、在模块里,每一个controller都是一个简单的MVC的结构。
4、myCtrl就是MVC中的C,$scope 就是MVC中的M,而div就是MVC中的V。

点击了解前端开发框架三剑客
<br />
通过本篇文章,你学到了什么?

身为前端工程师,如果有人问到你什么是MVC? 你该怎么回答,别着急,我已经帮你准备好了:

1、 什么是MVC (模型 视图 控制器)?
MVC是一个架构模式,它分离了表现与交互。它被分为三个核心部件:模型、视图、控制器。下面是每一个部件的分工:
视图是用户看到并与之交互的界面。
模型表示业务数据,并提供数据给视图。
控制器接受用户的输入并调用模型和视图去完成用户的需求。

2、你能解释下MVC的完整流程吗?
下面是MVC(模型、视图、控制器)架构的控制流程:
(1)所有的终端用户请求被发送到控制器。
(2)控制器依赖请求去选择加载哪个模型,并把模型附加到对应的视图。
(3)附加了模型数据的最终视图做为响应发送给终端用户。

3、MVC同时适用于Windows应用和Web应用吗?
相比Windows应用,MVC架构更适用于Web应用。对于Windows应用,MVP(Model View Presenter )架构更好一点。如果你使用WPF和Silverlight,MVVM更适合。

4、使用MVC有哪些好处?
分离了关注点。后台代码被移到单独的类文件,我们可以最大限度的重复利用代码。
自动化UI测试成为可能,因为后台代码移到了.NET类。这让我们更容易做单元测试和自动化测试。

5、MVC的最新版本是哪个?(ASP.NET MVC)
MVC 5.1
发布日期:(2013年)
MVC 6.0
发布日期:(2016年?月)(正式版发布日期待定)

6、MVC的缺点?
MVC的缺点是由于它没有明确的定义,所以完全理解MVC并不是很容易。使用MVC需要精心的计划,由于它的内部原理比较复杂,所以需要花费一些时间去思考。
你将不得不花费相当可观的时间去考虑如何将MVC运用到你的应用程序,同时由于模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难。每个构件在使用之前都需要经过彻底的测试。一旦你的构件经过了测试,你就可以毫无顾忌的重用它们了。  根据开发者经验,由于开发者将一个应用程序分成了三个部件,所以使用MVC同时也意味着你将要管理比以前更多的文件,这一点是显而易见的。这样好像我们的工作量增加了,但是请记住这比起它所能带给我们的好处是不值一提。  MVC并不适合小型甚至中等规模的应用程序,花费大量时间将MVC应用到规模并不是很大的应用程序通常会得不偿失。

更多关于MVC的问题可以参考MVC面试问题与答案

了解一下由MVC衍生的 MVP 和 MVVM 架构

MVP
MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

  1. 各部分之间的通信,都是双向的。
  2. View 与 Model 不发生联系,都通过 Presenter 传递。
  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
    <br />
    MVVM
    MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。

    唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。AngularEmber 都采用这种模式。

<br />

最后让我们来了解一下基于MVC 框架设计理念开发的一些优秀框架

Struts

StrutsApache软件基金下Jakarta项目的一部分。Struts框架的主要架构设计和开发者是Craig R.McClanahan。Struts 是Java Web MVC框架中不争的王者。经过长达九年的发展,Struts已经逐渐成长为一个稳定、成熟的框架,并且占有了MVC框架中最大的市场份额。但是Struts某些技术特性上已经落后于新兴的MVC框架。面对Spring MVC、Webwork2这些设计更精密,扩展性更强的框架,Struts受到了前所未有的挑战。但站在产品开发的角度而言,Struts仍然是最稳妥的选择。
Struts有一组相互协作的类(组件)、Servlet以及jsp tag lib组成。基于struts构架的web应用程序基本上符合JSP Model2的设计标准,可以说是MVC设计模式的一种变化类型。根据上面对framework的描述,很容易理解为什么说Struts是一个web framework,而不仅仅是一些标记库的组合。但 Struts 也包含了丰富的标记库和独立于该框架工作的实用程序类。Struts有其自己的控制器(Controller),同时整合了其他的一些技术去实现模型层(Model)和视图层(View)。在模型层,Struts可以很容易的与数据访问技术相结合,包括EJBJDBC和Object Relation Bridge。在视图层,Struts能够与JSP, Velocity Templates,XSL等等这些表示层组件相结合。[8]

Spring

Spring实际上是Expert One-on-One J2EE Design and Development 一书中所阐述的设计思想的具体实现。在One-on-One 一书中,Rod Johnson倡导J2EE实用主义的设计思想,并随书提供了一个初步的开发框架实现(interface21 开发包)。而Spring 正是这一思想的更全面和具体的体现。Rod Johnson 在interface21 开发包的基础之上,进行了进一步的改造和扩充,使其发展为一个更加开放、清晰、全面、高效的开发框架。
Spring是一个开源框架,由Rod Johnson创建并且在他的著作《J2EE设计开发编程指南》里进行了描述。它是为了解决企业应用开发的复杂性而创建的。Spring使使用基本的JavaBeans来完成以前只可能由EJB完成的事情变得可能了。然而,Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言,任何Java应用都可以从Spring中受益。
简单来说,Spring是一个轻量的控制反转和面向切面的容
框架。当然,这个描述有点过于简单。但它的确概括出了Spring是做什么的。[8]

ZF

Zend Framework(简写ZF)是由 Zend 公司支持开发的完全基于 PHP5 的开源PHP开发框架,可用于开发 Web 程序和服务,ZF采用 MVC(Model–View-Controller) 架构模式来分离应用程序中不同的部分方便程序的开发和维护。
(MVC框架的详细使用及其相关具体操作可以阅读参考资料:[8]
或者扩展阅读第二,三,四条。)

ASP.NET

ASP.NET MVC
ASP.NET MVC 是微软官方提供的以MVC模式为基础的ASP.NET Web应用程序(Web Application)框架,它由Castle的MonoRail而来,目前最新版本是ASP.NET MVC 5.1

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

推荐阅读更多精彩内容