UI框架与MVC模式详解(1)——逻辑与数据分离

news2024/11/17 8:34:51

【效率最高的耦合方式】

以实际的例子来说明,更容易理解些。

这里从上到下,从左到右共有8个显示项,如果只需要显示这8个,不会做任何改变,数据固定,那么我们只需要最常规的思路去写就好,这是最简单省事,也即效率最高的方法

伪代码如下:

显示项1.背景Image = 图1,显示项1.人数Text = 人数1,显示项1.名字Text = 名字1
显示项2.背景Image = 图2,显示项2.人数Text = 人数2,显示项1.名字Text = 名字2

假如需要显示12个,按照原来的逻辑,要新增12行代码 这是界面表现改变导致逻辑改变

【逻辑和数据的简单分离】

我们需要将数据统合在一起构成数据集合,每次从中取出想要的数据。数据有基本的单位,这里数据单位 = 图+人数+名字

伪代码如下:

数据集合.Add(new 数据单位) //要4行 
数据单位 = 数据集合[显示项Id]
显示项.背景Image = 数据单位.图,显示项.人数 = 数据单位.人数,显示项.名字 = 数据单位.名字

按照最初的设计要增加4行代码,共12行代码;按照新的设计,只需增加4行代码,共6行代码

相比耦合方式的优点是:

1.减少了代码行数

2.界面新增显示便于修改逻辑

原因在于:

耦合的方式将界面显示的逻辑与显示需要的数据耦合在一起,当需要新增显示时,显示逻辑不变,但数据增加,即数据改变,导致需要修改显示逻辑,一个界面改变引起两处逻辑改变

分离的方式是显示的逻辑、获取数据的逻辑(耦合的方式没有该逻辑,其直接就有数据)、数据集合的逻辑,显示的逻辑和数据集合的逻辑不耦合,两者通过获取数据的逻辑关联起来,当新增显示时,显示的逻辑不变、获取数据的逻辑不变,数据集合需要新增数据,一个界面改变引起一处逻辑改变

我们这里只做了热门推荐栏目的8个显示项,如果华语、流行等栏目有各自不同的显示数据,那么耦合的方式是:

// if 热门推荐栏目
// 数据集合 = 热门推荐栏目的数据集合
// if 华语栏目
// 数据集合 = 华语的数据集合

分离的方式,是将不同栏目的所有数据合在一块,为此,显示逻辑仍然不变、获取数据逻辑改变、数据集合逻辑改变:

//数据集合 = 所有栏目的数据集合[栏目]
//数据单位 = 数据集合[显示项Id]
//显示项.背景Image = 数据单位.图,显示项.人数 = 数据单位.人数,显示项.名字 = 数据单位.名字

上述的改变都属于界面新增显示内容引起,如果是改变显示布局,如下图所示,那么需要修改显示逻辑,并增加数据,此时的数据单位 = 图+名字+人数+评论数+转载数+其他等等,获取数据的逻辑不需要改变

我们知道当同样的逻辑在很多不同的地方被使用时,可以将这段逻辑放到一个方法中,以便于之后修改逻辑时只在该方法内修改,而不用在很多地方修改

同样的,当我们发现同样的数据在不同的地方显示时,可以把数据放到同一个集合中,这样自然而然做到了简单的逻辑和数据分离。

由需求导致的界面改变,可以分为显示内容和显示布局的改变,在这里的例子看起来都会导致数据的改变,而实际中并不是这样的。

实际中,一个需求需要使用的数据,在需求通过评审后大致就确定了,需求的改变基本不会导致使用的数据的改变。如果需求改变导致数据改变,这是很大的改动,有必要再次评审需求。

界面的开发和数据开发本身是由不同的人负责的,做界面开发的人可以所用的数据本身是调用接口获取的,可以认为数据是不变的。

如此以来,当逻辑和数据分离时,需求改变所导致的逻辑改变就很少,也即便于扩展和维护。

【不同层次的数据和逻辑】

我们上面说的是需求的显示逻辑和数据,这是一个需求被提出来时首先就会被注意到的。

需求本身是会产生交互逻辑,用户的点击、拖拽、输入都属于交互逻辑,其也有与之对应的数据,我们称之为交互数据。交互会使得界面显示内容发生变化,交互的数据记录的是界面的状态。

例如示例界面有不同的栏目,当前显示的是哪个栏目就属于交互数据,每个交互都会有与之对应的数据,有以下情况:

  1. 交互数据可省略:例如点击按钮弹出一个界面,直接弹出即可,没有数据;而如果有个地方需要根据按钮是否点击过做什么逻辑处理,那么就得有数据
  2. 交互数据可合并:例如点击不同的栏目,一个字段记录当前点击的栏目即可,而不用记录多个
  3. 交互数据有层级:例如点击不同的显示项的交互数据B在点击不栏目的交互数据A后面出现,我们说A层级大于B

综合交互和显示,可以产生这样一个链路:交互逻辑->交互数据->显示逻辑->显示数据

当界面刚开始显示时,并没有交互,这时的链路是:初始的(交互数据)->显示逻辑->显示数据

那么交互逻辑可以与交互数据分离吗?

显示逻辑都是读取显示数据,通过获取数据的逻辑分离;交互逻辑都是写入交互数据,通过设置数据的逻辑分离

交互逻辑和显示逻辑也应当分离,因为我们经常会将重复的代码抽出来形成一个方法,所以会自然而然的分离。

即使很简单的逻辑,我们也应该按照这样的思路去写代码,例如:

function 交互逻辑{
        function 设置数据{}
        function 显示逻辑{}
        }

简单的情况下,我们可以将这些逻辑和数据都放在同一个Panel中,也即写在同一个Panel类中.

复杂些情况下,需要拆开,情况有:

  1. 显示数据被多个界面使用:这时必须有个类来管理显示数据,例如叫UserData,其提供获取数据的方法GetData,不同界面根据参数取获取获取,显示逻辑本身不复杂,获取数据的逻辑变得复杂
  2. 交互数据不跟随界面生命周期:一般来说,交互数据都是和界面相关的(我们称之为界面自身的数据),界面隐藏或者销毁后,当前交互数据就没了,再次进入界面时用初始的交互数据,但有些需求使得某些交互数据和界面生命周期无关,或者其他界面需要使用当前界面的交互数据,那么也需要将特殊的交互数据拿出来放在UIPanelData中,提供get\set方法,和界面的交互数据的设置分开(我们称之为界面相关的数据)。界面的生命周期是由UIManager管理的
  3. 交互逻辑异步:这种一般是界面相关的数据,通过同步的回调函数或者接收消息来执行上面示例所说的设置数据{}和显示逻辑{}
  4. 显示逻辑依赖交互数据:这里的依赖主要是指根据不同的交互数据显示不同的内容,也即显示逻辑中包含了交互数据,而简单的情况是根据交互数据直接显示交互逻辑,进一步的其实是显示逻辑依赖交互逻辑
  5. 交互逻辑依赖显示数据:这里主要是指交互跳转时需要根据显示数据走不同的逻辑,注意这里说的显示数据不一定是当前界面显示出来的数据

一般来说,一个需求多多少少包含上述情况之一,更复杂的情况是上述情况交织在一起。这是我们就需要使用一些模式来处理更复杂的情况,例如MVC、MVP、MVVM。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1799980.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

antdv 穿梭框

antd的穿梭框的数据貌似只接收key和title,而且必须是字符串(我测试不是字符串的不行), 所以要把后端返回的数据再处理一下得到我们想要的数据 除了实现简单的穿梭框功能,还想要重写搜索事件,想达到的效果是…

时间序列新范式!多尺度+时间序列,刷爆多项SOTA

当我们面对复杂模式和多变周期的应用场景(比如金融市场分析)时,采用多尺度时间序列来做分析和预测是个更好的选择。 这是因为:传统时序方法通常只用固定时间窗口来提取信息,难以适应不同时间尺度上的模式变化。但多尺…

opencv实战小结-银行卡号识别

实战1-银行卡号识别 项目来源:opencv入门 项目目的:识别传入的银行卡照片中的卡号 难点:银行卡上会有一些干扰项,如何排除这些干扰项,并且打印正确的号码是一个问题 最终效果如上图 实现这样的功能需要以下几个步骤…

蓝桥云课第12届强者挑战赛

第一题&#xff1a;字符串加法 其实本质上就是一个高精度问题&#xff0c;可以使用同余定理的推论 &#xff08;ab&#xff09;%n((a%n)(b%n))%n; #include <iostream> using namespace std; const int mod1e97; int main() {string a,b;cin>>a>>b;ab;int …

GAN网络理论和实验(二)

文章目录 一、说明二、什么是生成对抗网络&#xff1f;三、判别模型与生成模型四、生成对抗网络的架构五、你的第一个 GAN六、准备训练数据七、实现鉴别器八、实现生成器九、训练模型十、检查 GAN 生成的样本十一、使用 GAN 生成手写数字十二、准备训练数据十三、实现鉴别器和生…

LabVIEW减压阀和温控阀综合测试系统

在使用LabVIEW开发阀门测试软件时&#xff0c;特别是针对减压阀和温控阀&#xff0c;测试内容和注意事项包括以下方面&#xff1a; 测试内容 压力测试&#xff1a; 入口压力&#xff1a;测量阀门在不同入口压力下的表现。 出口压力&#xff1a;确保减压阀能够将出口压力控制在…

【TIPs】 Visual Stadio 2019 中本地误使用“git的重置 - 删除更改 -- hard”后,如何恢复?

环境&#xff1a; VS 2019Windows10本地版本管理&#xff08;非远程&#xff09; 前言&#xff1a; git 在Visual Stadio 2019中集成了git的版本管理&#xff0c;在本地用来做版本管理&#xff0c;本来比较好用。 不过有一次&#xff0c;由于拿最初始的版本的时候&#xf…

代驾公司在市场竞争中如何保持优势?

在竞争激烈的市场中&#xff0c;代驾公司可以通过多种策略保持其竞争优势&#xff0c;包括利用市场潜力、创新服务模式、提高服务效率以及加强品牌建设等。以下是具体的策略&#xff1a; 利用市场潜力 汽车产业空间巨大&#xff1a;随着汽车保有量的增加&#xff0c;代驾行业…

centos官方yum源不可用 解决方案(随手记)

昨天用yum安装软件的时候&#xff0c;就报错了 [rootop01 ~]# yum install -y net-tools CentOS Stream 8 - AppStream 73 B/s | 38 B 00:00 Error: Failed to download metadata for repo appstream: Cannot prepare internal mirrorlis…

Intel VT-x怎么开启?如何解决VMware打开虚拟机报错问题?

许多小伙伴在安装完VMware不能打开虚拟机&#xff0c;每次打开都会出现一个“此主机支持 Intel VT-x&#xff0c;但 Intel VT-x 处于禁用状态”的报错&#xff0c;然后因此启动不了虚拟机。今天小编就带来如何解决这个报错的方法。 什么是Intel VT-x&#xff1f; 这是英特尔cp…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战六(引入pinia,注册成功返回的信息在主页显示)

简介 pinia是多页面之间共享数据的一个组件&#xff0c;用法比较简单&#xff0c;具体参照以下。 安装Pinia pnpm install pinia引入Pinia main.ts 新增store src目录下新建stores目录&#xff0c;stores目录下新增user.ts文件 import { ref } from vue; import { define…

论文代码解读STPGNN

1.前言 本次代码文章来自于《2024-AAAI-Spatio-Temporal Pivotal Graph Neural Networks for Traffic Flow Forecasting》&#xff0c;基本模型结构如下图所示&#xff1a; 文章讲解视频链接 代码开源链接 接下来就开始代码解读了。 2.代码解读 class nconv(nn.Module):de…

离散数学答疑 3

&#xff5e;A&#xff1a;A的补集 有时候空集是元素&#xff0c;有时候就是纯粹的空集 A-B的定义&#xff1a; 笛卡尔积&#xff1a; 求等价关系&#xff1a;先求划分再一一列举 不同划分&#xff1a;分几块。一块&#xff1a;两块&#xff1a;三块&#xff1a;分别计算 Ix是…

2024-5-7 石群电路-26

2024-6-7&#xff0c;星期五&#xff0c;15:00&#xff0c;天气&#xff1a;阴转小雨&#xff0c;心情&#xff1a;晴。今天虽然是阴雨天&#xff0c;但是心情不能差哦&#xff0c;离答辩越来越近了&#xff0c;今天学完习好好准备准备ppt&#xff0c;加油学习喽~ 今日观看了石…

Vue 学习笔记 总结

Vue.js 教程 | 菜鸟教程 (runoob.com) 放一下课上的内容 Vue练习 1、练习要求和实验2的用户注册一样&#xff0c;当用户输入后&#xff0c;能在下方显示用户输入的各项内容&#xff08;不需要实现【重置】按钮&#xff09; 2、实验报告中的实验小结部分来谈谈用JS、jQuery和…

接口幂等性设计(5 大方案罗列)

结合案例、列举场景的接口幂等性设计方案。 方案 1. 状态机 业务场景&#xff0c;数据审核成功后进行短信通知&#xff0c;或者是订单状态变成已支付后&#xff0c;短信通知用户订单生成的详细信息&#xff0c;等等和状态有关的操作。 假设 status&#xff1a;0&#xff08;待…

vue改造四级树状可输入table

vue改造四级树状可输入table <template><div class"dimension_wary"><div class"itemHeader"><div class"target"></div><div class"sort">X2</div><div class"weight">…

xiaolingcoding 图解网络笔记——基础篇

文章目录 参考一、网络模型有哪几层DMANAPI 机制二、键入网址到网页显示&#xff0c;期间发生了什么&#xff1f;1. HTTP2. DNS3. 协议栈4. TCP5. IP6. MAC7. 网卡8. 交换机9. 路由器10. 服务器 与 客户端的互相扒皮&#xff08;添加、删除头部信息&#xff09;参考图HTTP 请求…

部署kubesphere报错

安装kubesphere报错命名空间terminted [rootk8smaster ~]# kubectl apply -f kubesphere-installer.yaml Warning: apiextensions.k8s.io/v1beta1 CustomResourceDefinition is deprecated in v1.16, unavailable in v1.22; use apiextensions.k8s.io/v1 CustomResourceDefini…

【数据结构初阶】--- 顺序表

顺序表&#xff0c;好像学C语言时从来没听过&#xff0c;实际上就是给数组穿了层衣服&#xff0c;本质是一模一样的。 这里的顺序表实际是定义了一个结构体&#xff0c;设计各种函数来实现它的功能&#xff0c;比如说数组中的增删改查插入&#xff0c;这些基本操作其实平时就会…