前端小蜗

# 程序设计的层次

# MVCS

MVCS是一种基于MVC架构的设计模式，它在MVC的基础上增加了服务层（Service layer）。

MVCS的四个组成部分分别是：

  • 模型（Model）：模型是应用程序中用于表示数据和状态的部分。模型负责处理数据的读取、写入和处理，以及应用程序的业务逻辑。模型并不关心数据的展示方式或者用户界面的细节。

  • 视图（View）：视图是应用程序中用户界面的部分。视图显示模型的数据和状态，并与用户进行交互。视图并不关心数据在模型中是如何表示的或者模型中的业务逻辑。

  • 控制器（Controller）：控制器是应用程序中连接模型和视图的部分。控制器负责处理用户的交互行为并作出相应的响应，包括读取和更新模型中的数据、更新视图的状态、和协调模型和视图之间的关系。

  • 服务层（Service layer）：服务层是应用程序中处理业务逻辑的部分。服务层通常包含了一些业务逻辑的方法，例如用户认证、数据验证、数据处理和数据库访问等。服务层和模型之间可以互相调用，但是服务层并不关心数据在模型中的具体实现方式。

MVCS的优点在于将应用程序的业务逻辑分离开来，使得应用程序更加灵活和可维护。另外，MVCS还可以实现数据缓存和分层的数据访问，从而提高应用程序的性能和可扩展性。

MVCS可以被认为是MVC模式的一种扩展，适用于大型和复杂的应用程序。它被广泛应用于Web开发和桌面应用程序开发中。例如，ASP.NET MVC和Rails框架就是基于MVCS的。

# MVVM

MVVM 是一种前端开发的架构模式，用于将应用程序的用户界面（View）、应用程序逻辑（ViewModel）和数据（Model）分离开来。

MVVM 的三个组成部分分别是：

  • 视图（View）：视图是应用程序中用户界面的部分。视图显示应用程序的状态，并接收用户的输入。视图并不关心数据的来源或数据如何处理。

  • 视图模型（ViewModel）：视图模型是应用程序中的中间层，负责处理视图的数据和用户交互行为。视图模型将视图需要的数据从模型中提取出来，并将用户的输入转化为模型能够理解的格式。视图模型不关心视图的具体实现方式。

  • 模型（Model）：模型是应用程序中用于表示数据和状态的部分。模型负责处理数据的读取、写入和处理，以及应用程序的业务逻辑。模型并不关心数据的展示方式或者用户界面的细节。

MVVM 的优点在于将数据和用户界面的处理逻辑分离开来，使得应用程序更加容易维护和扩展。另外，MVVM 还可以实现数据绑定和命令绑定，从而实现更加灵活的数据交互和用户交互。

MVVM 最初是由微软提出的，用于开发 WPF 和 Silverlight 应用程序。随着 Web 前端技术的发展，MVVM 也被广泛应用于 Web 前端开发中，例如 Vue.js、AngularJS 和 Knockout.js 等框架都是基于 MVVM 的。

# 在Vue.js中不要过度层次设计

Vue.js 采取的是MVVM的设计架构

而在开发中我们可能会遇到这种情况

这种情况在原有的MVVM层级上增加了Pinia来存储数据，又通过StoreToRefs() 来完成响应式的转换。

这样会导致：

  1. 层级太多，导致开发和维护起来页面太多，阅读困难
  2. 每一个页面都有一个对应的Store保存数据，增加性能消耗。
  3. 背离Pinia的初衷，为了跨页面/组件共享数据

# 总结

在我们开发工作中使用MVVM的模式就完全够用。

如果程序逻辑很复杂的话我们可以引入服务层（Service layer）来做到功能的分离