简而言之，MVC模式

软件设计中最常见的模式之一称为MVC模式（模型—视图—控制器）。 这种模式（及其许多变体）存在于广泛的编程语言和框架中。 MVC模式的目标是在应用程序的不同部分之间提供关注点分离。

概念化MVC模式最简单的方法之一就是考虑一个由三个部分组成的Web应用程序：一个用于存储信息的数据库，一个呈现视图的客户端代码以及一个处理两者之间通信的服务器。 这些部分中的每一个都应妥善处理自己的责任。

在此示例中，模型不需要了解有关视图的任何信息。 它只与数据有关。 该视图不编辑数据； 它唯一关心的是以用户可以理解的方式呈现数据。

这是香草javascript中的MVC模式的一个非常基本的示例：

  const model = { 
 购物清单： [] 
  } 

  const view = { 
  readList：function（list）{ 
  console.log（`这是您的$ {list}`） 
 模型[列表] .forEach（项目=> console.log（项目）） 
  } 
  } 

  const controller = { 
 删除：function（itemName，list）{ 
 模型[列表] =模型[列表] .filter（ 
 名称=>名称！== itemName 
  ）}， 
 添加：function（itemName，list）{ 
 模型[列表] .push（itemName） 
  } 
  } 


  controller.add（'apples'，'groceryList'）; 
  controller.add（'milk'，'groceryList'）; 
  controller.add（'eggs'，'groceryList'）; 
  view.readList（'groceryList'）; 
  //这是您的食品杂货清单： 
  // 苹果 
  // 蛋 
  // 牛奶 


  controller.remove（'eggs'，'groceryList'）; 
  view.readList（'groceryList'）; 
  //这是您的食品杂货清单： 
  // 苹果 
  // 牛奶 

让我们仔细看看应用程序的每个部分：

  const model = { 
 购物清单： [] 
  } 

在这种情况下，所有模型所做的就是保存数据。 在实际的应用程序中，模型肯定比这要复杂得多，但是仍然存在相同的想法-模型不知道也不关心数据的显示方式。 可能有一个视图或一千个视图； 该模型独立于它们运行。

  const controller = { 
 删除：function（itemName，list）{ 
 模型[列表] =模型[列表] .filter（ 
 名称=>名称！== itemName 
  ）}， 
 添加：function（itemName，list）{ 
 模型[列表] .push（itemName） 
  } 
  } 

我们应用程序中的控制器接受用户输入并更改模型中的数据。 它不负责渲染视图； 它只是告诉模型根据用户输入进行更改。 我们的控制器具有两个功能： remove从所需列表（第二个参数）中删除item（第一个参数），而add将添加到指定列表（第二个参数）中的item（第一个参数）。

  const view = { 
  readList：function（list）{ 
  console.log（`这是您的$ {list}`） 
 模型[列表] .forEach（项目=> console.log（项目）） 
  } 

我们的视图不会跟踪数据或对该数据执行任何操作； 它只是负责以用户可以理解的方式呈现它。 在这种情况下，视图的唯一功能是readList，它会console.log记录具有列表名称的标题，然后console.log记录列表中的每个项目。

视图应该直接从模型中读取还是通过控制器访问模型？ 在更复杂的应用程序中，视图可能最好通过控制器访问模型（从而使我们能够执行更改不同模型之类的功能），但是对于视图视图来说，它也是MVC模式的有效应用程序，直接从模型中读取； 它只是不能对模型执行任何操作。

跨不同软件生态系统存在MVC的许多变体。 其中包括MVP和MVVM，以及许多其他更细微的变化。

随着应用程序执行诸如网络调用和数据转换之类的复杂操作，很难将所有内容整齐地放在三个区域内。 因此，将MVC背后的基本概念（即有意分离的关注点）应用到您的应用程序体系结构中会更有效率。

---

最初于 2018年8月15日 发布在 www.johndpotts.com 上。