MVC,大家都知道的模式……不太好

MVC,大家都知道的模式……不太好

“MVC 是引用最多(也是最错误引用)的模式之一”——Martin Fowler

Peinture abstraite multicolore

Crédit photo: 史蒂夫·约翰逊

与许多关于这个主题的文章和评论相反, MVC 不是全栈或后端模式, 这是一个仅限前端的模式。

作为初级开发人员,我们经常会掉入陷阱……但要完全了解 MVC 的真正含义,让我们首先了解一些基本原理。

一个 Web 应用程序通常分为 3 个部分,也称为 3 层架构。

数据表示层

它负责转换和显示要返回给用户的数据。这是应用程序的整个 UI 部分。这取决于业务层

业务层

这包含公司活动的所有逻辑和业务规则。它通常位于服务器端,不像表示层可以驻留在服务器端(服务器端渲染)或客户端(客户端渲染)。

数据持久层

该层负责持久化业务层希望“保存”的数据。她抽象出 “如何保存数据” 对于业务层。它与数据库、API 和其他连接器交互,以保存和检索上层所需的数据。

在这个架构中,有一个重要的概念需要记住:这些是层之间的依赖规则。业务层(应用程序的核心)理论上没有依赖关系。它完全抽象出知道如何使用其数据(由表示层)以及如何保存其数据(由持久层)。*

因此,Model Vue Controller (MVC) 模式错误地与 3 层架构相关联,如下所示:

  • View = 数据表示层
  • 控制器 = 业务层
  • 模型 = 数据层

您必须承认,这两个概念很好地结合在一起,但是...

这是错的 ! ❌

但是 Jamy,MVC 是如何成为仅前端模式的?

让我们谈谈控制器,它是故事中的罪魁祸首......

控制器 MVC 的模式元素是控制 Vue .这意味着他与后者强烈耦合,因为他……控制着她。小学我亲爱的华生。

或者,si le C 控制器 认识她 Vue ,它不能驻留在业务层,因为让我们记住: 业务层独立存在 .所以 控制器 MVC 在数据表示层上运行良好,因为它依赖于 Vue ! CQFD

但是为什么我们(错误地)认为 MVC 控制器与业务层相关联呢?

从历史上看,Web 应用程序在服务器端呈现 HTML 页面。因此,客户端发送一个 HTTP 请求,服务器返回一个 HTML 格式的响应,浏览器简单地显示在用户的屏幕上。

在此配置中,HTTP 控制器是 控制器 MVC 因为它收到来自客户端的请求,所以查询 模型 检索数据,然后构建 Vue (HTML)发送回客户端。

最近,随着 Angular 或 React 等框架的到来,整个表示层现在都在客户端。渲染在浏览器中完成;这是著名的 客户端渲染 .除了我们忘记移动所有与之相关的概念外,这就是产生歧义的地方!

因此,在应用程序中 客户端渲染 , HTTP 控制器不是 MVC 控制器。 在这种配置中,HTTP 控制器有一个完全不同的功能:它只是通过 HTTP 协议上的 API 来打开业务层。它的唯一作用是接收客户端请求、查询业务层和呈现数据,通常以 JSON 格式呈现。它不再在数据呈现中扮演任何角色,只在业务层的边缘运行。

所以,混淆了 控制器 MVC 与 HTTP 控制器,我们扭曲了基本概念。我们将业务层定义为 “C” 来自 MVC。这就是混乱的地方!

模型,附带损害

通过将 HTTP 控制器错误识别为 控制器 MVC,它歪曲了对模式的整体理解。事实上,通过这个棱镜,我们可以很自然地将持久层识别为这个著名的理想候选者 模型 ,由我们使用 控制器 ,正如 MVC 向我们展示的那样。

正如您已经可以想象的那样……这是一个错误! 模型不等同于持久层。 根据 MVC, 模型 应该包含业务逻辑,这就是业务层的角色。这 模型 因此是由后者渲染的!

具体来说,在所谓的“经典”Web 应用程序中, ** 模型** 因此被使用 ** 控制器** 客户端。当。。。的时候 ** 控制器** “更新” ** 模型** ,这将转换为对公开业务层的 API 的 http 调用。为了应对变化 ** 模型** , 这 ** 控制器** 所以更新 ** Vue** ,它将被呈现到最终用户的屏幕上。

而这一切的观点?

为了 MVC,我们已经有点赢家了,这部分已经在正确的层了。 — 伊皮!

介于两者之间 客户端渲染 或者 服务器端渲染 , 原理不变;这 控制器 从中检索项目 模型 ,然后构建它的 Vue 和。这 Vue 然后仅限于 HTML 部分。它由 控制器 ,具体取决于您要呈现给用户的数据和逻辑。

如果你使用 反应 或者 ,你可能在不知不觉中做 MVC。

在角度

  • 组件 .TS 包含控制器的所有逻辑
  • 组件 .HTML 是你的看法
  • 服务(API 等)是允许您阅读和更新您的 楷模

并做出反应

  • React 组件包含 控制器
  • render() 函数渲染 Vue
  • 服务(API 等)是允许您阅读和更新您的 楷模

所以 !希望对 MVC 的真正含义有所启发,我希望您不再使用这个词来指定 3 层架构!

很好的一天!

来源

https://martinfowler.com/eaaCatalog/modelViewController.html

Robert C Martin — 清洁架构和设计

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/37434/55361802

posted @ 2022-09-18 02:57  哈哈哈来了啊啊啊  阅读(45)  评论(0编辑  收藏  举报