百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 优雅编程 > 正文

VUE前端编程:浅谈前端架构模式(前端架构图开发vue)

sinye56 2024-10-22 16:25 4 浏览 0 评论

这里所谓的前端架构模式,是指基于VUE的技术,如何组织和编排这些前端编程能力以形成一个有体系的架构,从而指导前端编程设计的一种思路。




目标

1 以相对合理的双L结构:横向Layer和纵向Lane形成的矩阵,约束和管理数据传递方式和组件管理模式

2 通过数据视图(Data View)建立增强的数据驱动的设计理念,并建立本地缓存机制,适当减少API交互频率

3 为微服务模式下的业务装配场景提供技术便利,从不同的技术层面划分业务颗粒度,从而快速实现前端到后端的业务切割和按需组合


构建的架构设计图如下,横向一共分为5个层(Layer),每个业务通道(Lane)从前端组件开始,通过数据代理去访问数据视图,数据视图则统一通过引入API服务簇去访问特定的API。



以数据视图为核心的数据驱动机制

VUE因为是MVVM模型,因此,数据映射的这个模型的核心,那么回归业务角度再看,利用这种机制的核心是构建统一的业务视图,在业务视图中达成应该实现的所有业务变化,并通过合适的渠道进行数据分发。在该层面,我们通过Vuex的状态管理实现,且状态管理可以方便的实现数据缓冲机制,减少CRUDA等资源维护页面切换时对API资源的消耗。


因此,基于上述我们构建了两段数据链路,一是从API端到数据视图,该链路由数据视图的容器管理,从而规避数据视图上方前端组件和数据代理对API层面的穿透;二是数据视图到前端组件,我们通过数据代理负责单一职责的业务处理,从而使数据代理单元横向可以继承和叠加,纵向上可以组合。



单一职责的数据代理机制

单一职责在业务上我们锚定的是一个业务维度的处理,在技术上则锚定的是单一职责模式,它实际上是把组件的数据的要求和常见的操作和事件进行了剥离和组装,从而使数据的处理和前端的交互构建在更加稳定的机制之上。在该层面,我们通过Mixins机制实现。


最典型的是我们对资源CRUDA的封装处置,即可以设计 resource-agent 代理对象,为创建、浏览、更新、删除、审批构建可复用的单一代理,原则上,它具备以下职责:

1 从数据视图映射ActiveRecord,这是一个活动记录的概念,即由resource-agent维护一个数据视图中正在活动的数据快照,并供给前端组件进行交互,典型的,我们会构建v-model结构,用以完成前端组件和数据视图间的数据传导


2 将前端的交互需求在进行自身的解析处置后交由数据视图进行后续处置,如C、U、D、A等操作

另外,常见的数据代理有POOL,FILTER、CATEGORY、ACCOUNT等,在业务上我们不难发现,这分别代表的都是特定的业务维度。


API簇

API簇完成对微服务架构的前端对应机制,推荐的做法是把一个微服务的api独立封装成独立handler,并暴露给数据视图层面,由其按需调度。


在基于上述结构设计后,前端的编程框架实现成本上有明显的降低,相对依赖关系也较之前合理有效,感兴趣的朋友可以做一下尝试,其中若有任何问题,也欢迎一起讨论交流。

相关推荐

Linux两种光驱自动挂载的方法

环境:CentOS6.4西昆云服务器方式一修改fstab文件/etc/fstab是系统保存文件系统信息?静态文件,每一行描述一个文件系统;系统每次启动会读取此文件信息以确定需要挂载哪些文件系统。参...

linux系统运维,挂载和分区概念太难?在虚机下操作一次全掌握

虚拟机的好处就是可以模拟和学习生产环境的一切操作,假如我们还不熟悉磁盘操作,那先在虚机环境下多操作几次。这次来练习下硬盘扩容操作。虚拟机环境:centos8vm11linux设备命名规则在linux中...

Linux 挂载 NFS 外部存储 (mount 和 /etc/fstab)

mount:手工挂载,下次重启需再重新挂载,操作命令:mount-tnfs-ooptionsserver:/remote/export/local/directory上面命令中,本地目录...

在Linux中如何设置自动挂载特定文件系统(示例)

Linux...

Linux环境中的绑定挂载(bind mount)

简介:Linux中的mount命令是一个特殊的指令,主要用于挂载文件目录。而绑定挂载(bindmount)命令更为特别。mount的bind选项将第一个目录克隆到第二个。一个目录中的改变将会在...

Linux挂载CIFS共享 临时挂载 1. 首先

如何解决服务器存储空间不足的问题?大家好,欢迎回来。在上一期视频中,我为大家介绍了如何利用Linux挂载来扩容服务器存储空间。这一期视频,我将以Linux为例,教大家如何进行扩容。群辉使用的是Linu...

Linux 硬盘挂载(服务器重启自动挂载)

1、先查看目前机器上有几块硬盘,及已挂载磁盘:fdisk-l能够查看到当前主机上已连接上的磁盘,以及已经分割的磁盘分区。(下面以/dev/vdb磁盘进行分区、挂载为例,挂载点设置为/data)df...

linux 挂载磁盘

在Linux中挂载硬盘的步骤如下:...

笨小猪教您Linux磁盘挂载

本教程针对Linux系统比较熟悉或者想学习Linux基础的用户朋友,本教程操作起来比较傻瓜式,跟着步骤就会操作,本文使用的工具是XShell同时多多注意空格(文中会有提示)。【问答】什么是磁盘挂载?答...

Linux 磁盘挂载和docker安装命令

本篇给大家介绍Linux磁盘挂载和docker安装的相关内容,Linux服务器的操作是一个手熟的过程,一些不常用的命令隔断时间就忘记了,熟话说好记性不如烂笔头,还需在平时的工作中多练习记录。...

Linux设置开机自动挂载分区

有时候,我们在安装完Linux系统之后,可能在使用过程中添加硬盘或者分区进行使用,这时候就需要手动把磁盘分区挂载到某个路径,但是开机之后就会消失,需要重新挂载,非常麻烦,那么我们应该如何设置开机自动挂...

在linux挂载一个新硬盘的完整步骤

以下是在Linux中挂载新原始磁盘的完整步骤,包括分区、创建文件系统以及使用UUID在/etc/fstab中启动时挂载磁盘:将新的原始磁盘连接到Linux系统并打开电源。运行以下命令,...

Linux系统如何挂载exFAT分区

简介:Linux系统中不能像Windows系统那样自动识别加载新设备,需要手动识别,手动加载。Linux中一切皆文件。文件通过一个很大的文件树来组织,文件树的根目录是:/,从根目开始录逐级展开。这些文...

Linux系统挂载硬盘

fdisk-l查看可挂载的磁盘都有哪些df-h查看已经挂载的磁盘...

WSL2发布,如何在Win10中挂载Linux文件系统

WSL2是最新版本的架构,它为Windows子系统提供支持,使其能够在Windows上运行ELF64Linux二进制文件。通过最近的更新,它允许使用Linux文件系统访问存储在硬盘中的文件。如果你...

取消回复欢迎 发表评论: