深入理解 MVC 在实际开发中和thinkPhp、angular、vue框架关系

MVC 简介

MVC(Model View Controller),是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。主要目的提高了软件可维护性、可复用性,也因为把 模型-视频-控制器,进行抽象分离开发,有助于管理复杂的应用程序,因为您可以在一个时间内专门关注一个方面。例如,您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。

  • Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
  • 通常模型对象负责在数据库中存取数据,前端表现为和后端之间接口调用。
  • View(视图)是应用程序中处理数据显示的部分。
  • 通常视图是依据模型数据创建的。
  • Controller(控制器)是应用程序中处理用户交互的部分。
  • 通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
深入理解 MVC 在实际开发中和thinkPhp、angular、vue框架关系

我们以web前端为例,来解释一下 M-V-C 三者之间的关系,当用户打开一个网站后

  • 加载静态文件 html、css、js
  • View 渲染出第一次视图,这时候是没有数据的,View 调用 Model 方法
  • Model 调用后端接口,获取到初始化数据并缓存在本地,通知 View 进行数据填充
  • 用户操作界面,发起事件 => Controller 接收到事件
  • 如果是切换页面的,则进行视图选择,View 改变之后,发现需要有数据没有,则调用 model 方法,进行重新获取数据
  • 如果是数据增、删、改,则调用 Model 方法进行修改,Model 通知视图做相应调整

到这里大家还是会感觉到比较抽象,没有实际的感觉,下面我们用后端一个框架(php 中的 thinkPHP)前端中的 vue 来理解这三者之间的关系

MVC 从后端到前端简单发展历程

没有前端工程师的年代

在很多年前,当时 js 刚起步,由于性能问题,前后端分离还没开始等因素,但是网站开发仅仅是后端一个人的事,他们不写接口,而是使用数据塞入html方式进行开发。

最早以 php 为例,是 php + html + css 开发模式,但是也同样遇到 php 和 html 混编,导致代码可以维护性、复用性、开发的专注性、协作性,都非常低,为了改变这种现状,出现了很多解决方案,而 thinkPHP 提供了 MVC 开发模式的解决方案,大大的改变了那种垃圾代码的现状,让开发者感受到了爽的感觉。

thinkPHP 中的 MVC

在 thinkPHP 中

  • Model 就是作为,数据库直接的增、删、改、查,四个部分的,其它事情都不做,而且也只有 Model 可以直接和数据库进行打交道
  • Controller 比真实的控制器能力要强,它不仅仅承载用户操作事件接受者、视图选择、数据库状态改变,它还把数据库通知视图渲染数据的能力交给了它
  • View 根据 Controller 选择的视图,Controller 给与的数据进行视图渲染,并把用户操作的事件通知给 Controller 进行处理
深入理解 MVC 在实际开发中和thinkPhp、angular、vue框架关系

可以看出和 MVC 概念里面不同的是,Model 没有直接通知 View 改变的能力,全部需要经过 Controller 进行处理加工,然后放入到 View 进行渲染(也就是另一种开发模式 MVP)

前端工程师崛起

后来因为互联网的发展,业务开发的业务复杂度日益增长,用户对于也没的体验要求越来越高(体验式经济)纯服务端渲染的形态体验肯定不可能非常好,也由于 js 的快速发展(得益于 Google 的 v8 引擎)使得前端工程师崛起了。

js 的崛起使得,用户对 web 交互操作的时候,可以立马可以得到相应,且可以做动画,而不是傻不拉几的开始请求新的页面,在哪等待浏览器的加载、

而后为了使得前端开发更便捷,dom操作更方便,也出现了 jq 为代表的很多框架,但是依然没有从软件设计模式上去解决 好维护、好协同、更专注的问题,这个阶段主要是对于常用的操作进行封装阶段。

这个阶段在前端抽象层来说,Model View Controller 三者相当耦合。

而后出现了 angular 改变了这种格局,angular 的 MVC 的抽象

  • View 很清晰,就是 HTML + CSS
  • Controller 里面进行业务逻辑处理 & 后端数据、状态的缓存
  • Model 比较不清晰,没有明确说明,其实在 angular 中 Model 就是调接口的 ajax 但由于框架本身没有明确的定义,所以有很多时候,开发者又耦合到 C 中

angular的出现简直算是跨时代的产物,从此前端 jq 独大的局面开始变化。angular 中除了使用了 MVC 开发模式外,还引入很多比较好的概念,比如:依赖注入、双向数据绑定等,具体这边不做说明,今天的主题不是说这个。

angular 虽然使用了 MVC ,但是对于很多东西的定义的不够清晰,比如 Model,比如 Controller 中存在数据的缓存 + 业务逻辑的处理,这时候我们中国的开发者就有重新定义了一下 MVC,也就是现在中国很流行的 vue

vue 中 的实际上有两个 MVC,第一个 MVC,是相对于后端的,第二个MVC是前端内部的数据和视图直接的MVC关系

首先我们来说第一个,相对于后端的MVC

  • Model 是指调接口的 ajax,框架中没有明确的定义,但是在样例中却表达的很清楚,Model 需要单独建立文件夹,进行基于 promise 的 ajax 的封装,Controller 中如果使用则进行调用
  • Controller 负责业务逻辑,视图选择,数据初始化等(在这个抽象里面 C 应该称作 P,MVP 的 P 和 php 中的 C 很像,因为 Model 不直接和 View 进行打交道)
  • View 就是 HTML + CSS 对于数据的渲染,事件钩子调用 C

第二个,纯前端内部的 MVC 抽象吗,后来称作 MVVM

  • Model 就是 vue 中的 data ,data 变化 由 VM 引擎 自动同步至视图
  • Controller 就是 vue 中的 methods,负责业务逻辑处理、视图选择
  • View 就是 HTML + CSS 对于视图的渲染,时间钩子调用 methods 函数(当然提供的其它功能这边就不做介绍啦)

到这里基本就把东西介绍完啦,感谢大家读完,我没有多写细节上的介绍,也没有对框架的作者背景,为啥会开发这个框架等方面进行介绍,只是简单的发展历程稍微介绍,更多的是让大家理解 MVC MVP MVVM 和框架之间的关系,并且知道他们的抽象层,分别负责什么。

相关推荐