百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

VUE前端编程:浅谈前端架构模式(vuejs前端开发实战)

ccwgpt 2024-09-23 04:26 24 浏览 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,并暴露给数据视图层面,由其按需调度。


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

相关推荐

定时任务工具,《此刻我要...》软件体验

之前果核给大家介绍过一款小众但实用的软件——小说规则下载器,可以把网页里的小说章节按照规则下载到本地,非常适合喜欢阅读小说的朋友。有意思的是,软件作者当时看到果核写的体验内容后,给反推荐到他的帖子里去...

前端定时任务的神库:Node-cron,让你的项目更高效!

在前端开发中,定时任务是一个常见的需求。无论是定时刷新数据、轮询接口,还是发送提醒,都需要一个可靠且灵活的定时任务解决方案。今天,我要向大家介绍一个强大的工具——Node-cron,它不仅能解决定时任...

Shutter Pro!一款多功能定时执行任务工具

这是一款可以在电脑上定时执行多种任务的小工具,使用它可以根据时间,电量等来设定一些定时任务,像定时打开程序、打开文件,定时关机重启,以及定时弹窗提醒等都可以轻松做到。这是个即开即用的小工具,无需安装,...

深度解析 Redis 缓存击穿及解决方案

在当今互联网大厂的后端开发体系中,Redis缓存占据着极为关键的地位。其凭借高性能、丰富的数据类型以及原子性操作等显著优势,助力众多高并发系统从容应对海量用户的访问冲击,已然成为后端开发从业者不可或...

从零搭建体育比分网站完整步骤(比较好的体育比分软件)

搭建一个体育比分网站是一个涉及前端、后端、数据源、部署和维护的完整项目。以下是从零开始搭建的详细流程:一、明确项目需求1.功能需求:实时比分展示(如足球、篮球、网球等)支持多个联赛和赛事历史数据查询比...

告别复杂命令行:GoCron 图形界面让定时任务触手可及

如果你是运维人员或者经常接触一些定时任务的配置,那么你一定希望有一款图形界面来帮助你方便的轻松配置定时任务,而GoCron就是这样一款软件,让你的配置可视化。什么是GoCron从名字你就可以大概猜到,...

Java任务管理框架核心技术解析与分布式高并发实战指南

在当今数字化时代,Java任务管理框架在众多应用场景中发挥着关键作用。随着业务规模的不断扩大,面对分布式高并发的复杂环境,掌握其核心技术并进行实战显得尤为重要。Java任务管理框架的核心技术涵盖多个方...

链表和结构体实现:MCU软件定时器(链表在单片机中的应用)

在一般的嵌入式产品设计中,介于成本、功耗等,所选型的MCU基本都是资源受限的,而里面的定时器的数量更是有限。在我们软件设计中往往有多种定时需求,例如脉冲输出、按键检测、LCD切屏延时等等,我们不可能...

SpringBoot定时任务(springboot定时任务每小时执行一次)

前言在我们开发中,经常碰到在某个时间点去执行某些操作,而我们不能人为的干预执行,这个时候就需要我们使用定时任务去完成该任务,下面我们来介绍下载springBoot中定时任务实现的方式。定时任务实现方式...

定时任务新玩法!systemd timer 完整实战详解

原文链接:「链接」Hello,大家好啊!今天给大家带来一篇使用systemdtimer实现定时任务调度的详细实战文章。相比传统的crontab,systemdtimer更加现代化、结构清晰...

Celery与Django:打造高效DevOps的定时任务与异步处理神器

本文详细介绍了Celery这一强大的异步任务队列系统,以及如何在Django框架中应用它来实现定时任务和异步处理,从而提高运维开发(DevOps)的效率和应用性能。下面我们先认识一下Cele...

订单超时自动取消的7种方案,我用这种!

前言在电商、外卖、票务等系统中,订单超时未支付自动取消是一个常见的需求。这个功能乍一看很简单,甚至很多初学者会觉得:"不就是加个定时器么?"但真到了实际工作中,细节的复杂程度往往会超...

裸机下多任务框架设计与实现(gd32裸机配置lwip 网络ping不通)

在嵌入式系统中,特别是在没有操作系统支持的裸机环境下,实现多任务执行是一个常见的挑战。本文将详细介绍一种基于定时器的多任务框架设计,通过全局时钟和状态机机制,实现任务的非阻塞调度,确保任务执行中不会出...

亿级高性能通知系统构建,小白也能拿来即用

作者介绍赵培龙,采货侠JAVA开发工程师分享概要一、服务划分二、系统设计1、首次消息发送2、重试消息发送三、稳定性的保障1、流量突增2、问题服务的资源隔离3、第三方服务的保护4、中间件的容错5、完善...

运维实战:深度拆解Systemd定时任务原理,90%的人不知道的玩法

运维实战:深度拆解Systemd定时任务原理,90%的人不知道的高效玩法一、Systemd定时任务的核心原理Systemd定时任务是Linux系统中替代传统cron的现代化解决方案,通过...

取消回复欢迎 发表评论: