《探讨——关于三层架构前在前端项目的应用》第一版

《探讨——关于三层架构在前端项目的应用》第一版

前言

本文的阅读需要具备一定的技术知识基础，特别是关于 MVVM 框架（如 Vue）的理解。若您对这些知识尚不熟悉，建议您先行进行相关知识的学习与探索。

本文名词说明：

接口：指一个模块对外暴露的方法，用于与自身通讯。例如类的方法。

HttpApi: 特指前后端交互的 HTTP 请求。

背景

在开发比较复杂的 Vue 项目的时候，我们常常会遇到这样一个问题：Vue 组件的代码容易变得异常庞大且复杂，这不仅降低了代码的可读性，也极大地影响了项目的可维护性。

常用优化方法与不足

针对这个问题，常用的优化方法有：

• 通用方法抽离到utils/目录：将项目中频繁使用的通用函数或方法集中抽离到utils/目录下，通过模块化的方式管理，既减少了代码的冗余，也便于复用和维护。
• <script>和<style>抽离成独立的文件：将 Vue 组件中的<script>逻辑代码和<style>样式代码分别抽离到独立的文件中，提高了代码的组织性。
• 业务组件和公用组件抽离：根据组件的功能和用途，明确区分业务组件和公用组件，将公用组件抽离出来进行统一管理；将复杂的业务组件从页面代码中分离。有助于减少代码的重复，提高组件的复用率，同时也使得项目结构更加清晰。
• 利用 Mixins 进行功能抽离：借助 Mixins 将组件的公共逻辑或选项抽离出来，以便多个组件中共享，从而避免在多个组件中重复编写相同的代码，简化组件结构，提高代码的可维护性。

综合运用上述优化方法，可以极大地改善 Vue 组件代码的可读性和可维护性。

然而，上述优化方法并不能很好的对业务逻辑错综复杂的组件进行优化，其<script>代码依然显得相当繁复。这主要是因为<script>内部承载了过多职责，包括但不限于调用外部接口、处理接口响应数据的转换、整理传递给接口的参数，以及实现复杂的业务逻辑等，从而导致了代码的冗余与难以理解。

如何更好的整理组织这部分代码呢？记得之前看过一遍文章，文中提到前端项目应借鉴后端开发中广泛采用的 B/C（业务逻辑层/控制层）架构设计模式，以实现代码的“高内聚、低耦合”目标。 这个想法启发了我。在对MVC、三层架构等 B/C 架构深入了解后，发现三层架构的项目组织模式可以很好的解决<script>臃肿问题。它不仅能够帮助我们清晰地划分代码职责，还能有效提升代码的可读性与可维护性。

下面我将从“三层架构的定义”、“MVVM 架构的定义”、“前端 MVVM 架构的说明以及存在的问题”、“三层架构在前端项目上的应用”、“优缺点”四个方面分享我的思路。

什么是三层架构（3-tier architecture）

三层架构是一种极其实用且广泛应用的软件设计方法。通过将功能代码进行分层，以便更好地组织代码，从而提高代码的可维护性和可扩展性。

详细定义如下：

三层架构就是为了符合“高内聚，低耦合”思想，把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，各层之间采用接口相互访问，并通过对象模型的实体类（Model）作为数据传递的载体，不同的对象模型的实体类一般对应于数据库的不同表，实体类的属性与数据库表的字段名一致。

——《百度百科——三层架构》

三层架构最核心的思想是根据业务流程不同阶段将代码进行拆分整合。一般来说，一个业务模块的大体流程如下：

从上图可以看到，业务流程主要划分为三个阶段：数据在数据库中的读取与存储操作、业务处理、用户交互。因此，三层架构将一个业务的实现代码划分为数据访问、业务逻辑、表示三个维度的模块，各个模块间通过接口进行通信。将所有业务进行划分并水平整合后，就形成了表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）。

各个层级的职责简述：

• 表示层：负责应用程序的用户界面和交互。
• 业务逻辑层：处理应用程序的核心业务规则和数据验证。
• 数据访问层：管理对底层数据源的访问和操作。

三层架构优点：

1. 高内聚、低耦合，可以降低层与层之间的依赖。
2. 容易移植、维护，如 B/S 转 C/S、SQL Server 转 Oracle、添加、修改、删除等。
3. 有利于标准化。
4. 有利于各层逻辑的复用。
5. 安全性高。用户端只能通过业务逻辑层来调用数据访问层，减少了入口点，把很多危险的系统功能都屏蔽了。

前端 MVVM 架构的说明以及存在的问题

现代前端项目的构建广泛依赖于采用 MVVM（Model-View-ViewModel）架构模式的框架。与三层架构一样，MVVM 同样是一种高效的软件设计架构模式，在前端开发领域占据着举足轻重的地位。那么，既然已经采用了 MVVM 架构，那为什么还需要三层架构呢？在回答这个问题前，我们需要先了解 MVVM 架构在前端中充当什么角色？发挥什么作用？

注：本文提及的前端项目特指前后端分离开发模式下的前端项目。

什么是 MVVM?

MVVM (Model-View-ViewModel) 是一种软件架构设计模式，它旨在将 View（用户界面）与 Model（业务逻辑和数据处理）分离，同时引入 ViewModel 作为它们之间的媒介串联起来。MVVM 架构特别适用于构建复杂的用户界面，特别是在数据绑定机制的支持下，能够显著提升开发效率与用户体验。

和三层架构一样，MVVM 也将功能代码进行分层。其中的 ：

• Mode 层：负责数据库数据的存储检索以及业务逻辑；
• View 层：负责 UI 界面的实现，展示数据给用户并接收用户的输入；
• ViewModel 层：是 Model 和 View 之间的桥梁，实现数据的双向流通、自动响应，负责将 Model 层的数据转换为 View 层可以展示的信息，同时也将 View 层的用户操作转换为 Model 层可以处理的数据变更。

最初的 MVVM 架构涵盖了整个开发流程（包括前端与后端）。随着前后端分离的兴起，以及 MVVM 架构在解决前端开发“痛点”方面的优秀表现，因此被广泛应用于前端项目中。

MVVM 在前端上的应用

在前端开发早期阶段，实现 JavaScript 中数据与页面展示内容之间的实时响应，不得不依赖于繁琐的手动编码，通过 JavaScript 直接操作 DOM 元素来完成。这一过程在处理简单交互倒还行，但一旦涉及构建复杂的表单页面，其代码量与复杂度飞速激增，严重制约了开发效率与可维护性。

好在，随着 MVVM（Model-View-ViewModel）架构的设计理念的出现和普及，人们发现得 MVVM 这个思路特别好。其核心思想——ViewModel 作为桥梁，实现数据与视图之间的双向绑定与自动响应，恰好能够解决前端开发中的这一“痛点”。基于这一思路，诸如 Vue.js、React、Angular 等现代前端框架应运而生，它们极大地简化了数据绑定与界面更新的流程，进一步提升了前端开发的效率与项目的可扩展性。

在前端的 MVVM 架构中，Model、View、ViewModel 三者的含义则发生了变化。 以 Vue.js 为例：