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

2024-09-01 13:44

本文主要是介绍《探讨——关于三层架构前在前端项目的应用》第一版,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

前言

本文的阅读需要具备一定的技术知识基础,特别是关于 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 架构在解决前端开发“痛点”方面的优秀表现,因此被广泛应用于前端项目中。

交互\反馈
数据绑定
接口请求
响应数据
Model
Database
业务逻辑
用户
View
ViewModel
MVVM 在前端上的应用

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

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

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

这篇关于《探讨——关于三层架构前在前端项目的应用》第一版的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1127099

相关文章

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

mysql中的服务器架构详解

《mysql中的服务器架构详解》:本文主要介绍mysql中的服务器架构,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、mysql服务器架构解释3、总结1、背景简单理解一下mysqphpl的服务器架构。2、mysjsql服务器架构解释mysql的架