从MVC到现代Web框架

模型 - 视图 - 控制器（MVC）是软件架构中最广泛和最有影响力的模式之一。尽管MVC的传闻 死亡 ，它仍然是一个有用的模式来 理解 。在这篇文章中，我将重点介绍它如何演变成我们今天所熟知和喜爱的现代Web框架，而不是控制MVC的各种定义。

盗梦空间

1978年，Trygve Reenskaugh和Adele Goldberg创造了“模型 - 视图 - 控制器”的名称。Trygve相信MVC及其变体形成了一种模式语言，一种让人们谈论问题及其解决方案的共享语言。软件模式语言的概念也影响了Gang of Four编写Design Patterns一书。如果MVC被包含在Design Patterns一书中，我们可能会在 Behaviora l Pattern部分找到它，并在Mediator和Observer等模式中使用。

这是Trygve在2003年的回顾性论文， MVC，它的过去和现在 。Trygve列举了构成MVC模式语言的11种模式。

原生MVC

在接下来的几十年中，随着这些系统的发展和快速发展，MVC在Smalltalk和Mac OS和Windows应用程序中的使用寿命更长。后来，当智能手机开始出现时，Windows Mobile和 早期版本iOS的 原生移动应用程序也依赖于MVC及其变体。在微软，MVC后来发展成为 MVVM ，它为WPF，Silverlight和Xamarin等项目提供支持。

Web MVC​​​​​​​

在2000年代早期，几个重要的Web框架采用了MVC的模式语言：Spring，Ruby on Rails，PHP和ASP.net。这些框架为Controller添加了新的责任：处理初始HTTP请求。它是这样的：

Controller现在是应用程序的入口点，而不是View。

View的职责也发生了变化：它不是直接向用户呈现内容并处理输入，而是为浏览器组装一组HTML，JS和CSS以进行渲染。

HTML / JS将包含按钮单击处理程序之类的逻辑，它将通过XMLHttpRequest将操作发送回控制器。

请注意，浏览器中没有明显的MVC模式。随着现代网络框架的出现，这很快就会改变。

现代Web框架

随着浏览器大战的解决，我们终于得到了很好的东西：XMLHttpRequest，稳定的DOM API，ES6等。随着这种增强的功能和灵活性，公司开始构建越来越复杂的Web应用程序（有时称为 单页 应用程序 -SPA ），而不是相关的简单网页集。现代Web框架有助于组织这种日益增加的客户端复杂性，并使应用程序开发保持可预测和高效。

通常，这些框架引入了额外的构建步骤来创建HTML，JS和CSS的静态包，通过简单的“视图控制器”（通常是/或/index.html处理程序）直接托管。这些资源的静态特性意味着我们可以设置缓存控制头并依赖CDN来帮助以更低的延迟提供服务。这些单页应用程序包含用于针对“API控制器”服务的一组资源发出HTTP API请求的逻辑（在JS中），这些资源通常使用JSON进行响应：

这就把我们带到了今天： React ， Vue 和 Angular 是最受欢迎的现代网络框架。这些框架对MVC的组织模式有多相似？所有都有某种“视图”，因此任何比较都需要在下一层完成：状态（=模型），中介逻辑（=控制器）和绑定同步。

Vue是最直接的：它的文档明确指出Vue是MVVM的一个实现。Angular 默认也是MVVM-ish。然而，React是使用一种名为Flux的超级模式从垂死之星的核心锻造的：

Flux是关于单向数据流的。回想一下，MVC中的Model表示将由View呈现的持久数据。Flux分割MVC模型的职责; 它使用Actions / API来处理业务逻辑，使用“Store”来处理状态。您可以将Store视为整个应用程序的整体被动Passiv模型。

为什么Flux采用单向数据流？理由如下：随着应用程序的复杂性增加，使用视图更新管理状态更改变得越来越困难，特别是如果这些更改来自不同的来源。

与数据绑定相反，View会观察ViewModel的可变实例以进行属性更改， React会创建一个新的View作为不可变State / props的函数 ，View永远不必担心本地状态的变化。应用程序只能通过在状态树中创建新的Model实例来更改，当React想要更新应用程序时，它会用新对象替换其状态树的一部分，从而触发创建新的View。

虽然单向数据流是一个强大的概念，但它不是一个装满银子弹的免费午餐盒，也不会将React / Flux提升到与Angular / Vue 不同的强大水平 。

banq注：作者显然没有从函数式编程去理解React.JS，Angular / Vue还是属于面向对象OO世界，包括MVC模型。