Angular 设计模式：MVC、MVVM 还是 MV*？

Posted 2023-02-22

【中文标题】Angular 设计模式：MVC、MVVM 还是 MV*？

【英文标题】：Angular design pattern: MVC, MVVM or MV*?

【发布时间】：2016-08-25 08:06:16

【问题描述】：

Angular 1.x (AngularJS) 或多或少遵循 MV* 设计原则，因为它具有双向数据绑定功能。

Angular2 正在采用基于组件的 UI，这是 React 开发人员可能熟悉的概念。从某种意义上说，Angular 1.x 控制器和指令模糊为新的 Angular 2 组件。

这意味着在 Angular 2 中没有控制器和指令。取而代之的是，组件有一个选择器，该选择器对应于该组件将表示的 html 标记和一个 @View，用于指定要填充的组件的 HTML 模板。

Angular2 仍然实现双向数据绑定，但不包含模型，例如，如果我有一个显示文章列表的 @Component 和一个定义文章对象的 class：

class Article 
title: string;
link: string;
votes: number;

constructor(title: string, link: string, votes?: number)
    this.title = title;
    this.link = link;
    this.votes = votes || 0;

这在 MVC 模式中将被视为模型。

那么考虑到这一点，Angular 最接近哪种设计模式？

【参考方案1】：

Angular 2 并不是真正的 MVC（但我想你可以得出相似之处）。它是基于组件的。让我解释一下：

Angular 1 是 MVC 和 MVVM (MV*)。 Angular 1 具有开创性的原因有几个，但主要原因之一是它使用了依赖注入。与 Backbone 和 Knockout 等其他 JS 框架相比，这是一个新概念。

然后 React 出现并彻底改变了前端架构。它让前端更多地考虑除了 MVC 和 MVVM 之外的其他选项。相反，它创造了基于组件的架构的想法。这可以说是自 HTML & javascript 以来前端架构最重大的变革之一。

Angular 2（和 Angular 1.5.x）决定采用 React 的方法并使用基于组件的架构。但是，您可以在 MVC、MVVM 和 Angular 2 之间画出些许相似之处，这就是为什么我认为它可能有点令人困惑。

话虽如此，Angular 2 中没有控制器或视图模型（除非你手工制作它们）。相反，有组件，它们由模板（如视图）、类和元数据（装饰器）组成。

例如，模型是保存数据的类（例如，保存由 http 服务使用 @angular/http 返回的数据的数据协定）。我们可以创建一个添加方法和属性（逻辑）的新类，然后合并模型和类。这会创建类似于 ViewModel 的东西。然后我们可以在我们的组件中使用这个 ViewModel。

但是将组件的类或服务称为 ViewModel 或 Controller 是不正确的。组件包含模板和类。 IMO 这有点像 Liskov 的理论——鸭子不是鸭子——不要试图将 MVC 或 MVVM 模式强制转换为组件，因为它们是不同的。将 Angular 2 视为组件。但我可以理解为什么人们会通过类比来帮助他们初步理解。

Angular 还使用模块，这是即将推出的 JavaScript 版本（ECMAScript 6）的一部分。这非常强大，因为 JavaScript 在命名空间和代码组织方面一直存在问题。这是组件的导入和导出。

有用的链接：

https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

Is angular2 mvc?

【讨论】：

我不确定是否有必要假设组件层次结构和单个组件结构是排他的，并且它们不在 Ext JS 之类的框架中。即使 Angular 不是 MVVM，将视图绑定组件类属性视为视图模型对我来说也是有用的，以便将实现实现为状态随时间的变化，而不是 DOM 的方法或过程操作。与其他 MVVM 框架一样，这有助于减少意大利面条式代码和一般复杂性。

【参考方案2】：

Angular 1 和 Angular 2 都遵循 MVC（模型、视图、控制器）模式。

在 Angular 1 中，HTML 标记是视图，控制器是控制器，而服务（用于检索数据时）是模型。

在 Angular 2 中，模板是视图，类是控制器，服务（用于检索数据时）是模型。

由于 Angular 是一个客户端框架，Angular 遵循的 MVC 模式可以称为 MVVC（模型、视图、视图控制器）。

【讨论】：

能解释一下为什么MVVC吗？谢谢。

服务不是模型。模型就是模型。通常在 MVC 相关框架中，您实际上有两种类型的模型 (1) 领域模型 (2) 使领域模型适应视图的模型（有时称为 ViewModel）。

@gusgorman Service 是 Angular 2+ 中的模型，因为它检索数据，这是 MVC 架构中应该做的模型。

服务不是模型，服务只是一个可注入的逻辑，可能会或可能不会检索数据。

无效答案 :(

【参考方案3】：

我不太热衷于使用 M** 表示法（有点被滥用和模糊）。 无论如何，在我看来，最简单和最有效的方式是在 Angular2 中：

类（在您的情况下为文章）代表模型

组件合并视图（在模板中）和控制器（Typescript 逻辑）

希望对你有帮助

【参考方案4】：

MVC 和 MVVM 与 AngularJS

MVC 设计模式

首先，MVC 设计模式并非特定于 AngularJS，您一定已经在许多其他编程语言中看到/实现过这种模式。

在 AngularJS 中可以看到 MVC 设计模式，但在进入之前，让我们看看 MVC 设计模式都包括哪些内容：

模型：模型不过是数据。 视图：视图表示此数据。 控制器：控制器介于两者之间。

在 MVC 中，如果我们对视图进行任何更改，它不会在模型中更新。但是在 AngularJS 中，我们听说有一种叫做 2-way binding 的东西，这种 2-way 绑定支持 MVVM 设计模式。

MVVM 基本上包括 3 个东西：

型号 看法 查看模型 在 MMVM 设计模式中，Controller 实际上被 View Model 取代。 View Model 只不过是一个 JavaScript 函数，它又像一个控制器，负责维护视图和模型之间的关系，但这里的区别是，如果我们更新视图中的任何内容，它会在模型​​中更新，更改模型中的任何内容，它出现在视图中，也就是我们所说的 2-way binding。

这就是为什么我们说 AngularJS 遵循 MVVM 设计模式。

【讨论】：

错误：“模型只不过是数据。”其实就是数据、元数据、业务逻辑、数据库接口。错误：“控制器在两者之​​间进行调解。”事实上，控制器并没有做这样的事情。视图对模型中的更改事件做出反应，而控制器没有提示。控制器的任务从用户事件开始，你甚至没有提到。

“视图模型只不过是一个 JavaScript 函数，它又像一个控制器”状态是错误的

@GuidoMocha 请编辑和更新答案，我喜欢批准它。

【参考方案5】：

以我的拙见，如果你想使用一些约定，你可以使用 MVVM 在 Angular 2 中进行开发：

组件包含视图（模板）和视图模型（类）。 您只会错过模型，您可以将其创建为普通的 TypeScript 类，并将其作为构造函数参数传递给视图模型。

该技术与 PRISM 和 WPF 中可用的技术非常相似，您可以使用 MVVM 开发所有内容（如果您愿意的话）。

【参考方案6】：

在 Angular（不包括版本 2 及更高版本）中，我们使用数据绑定功能。此数据绑定功能在 ng 应用程序中强制执行 MVVM 模式，因为在这种情况下，控制器会导致 V&M 之间的绑定（视图更改会导致模型更改，反之亦然）因此在 MVC 术语中，我们可以将 'C' 替换为 'VM' 给出'MVVM'