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

【效率最高的耦合方式】

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

这里从上到下,从左到右共有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.mzph.cn/news/849519.shtml

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

相关文章

【JSP】如何在IDEA上部署JSP WEB开发项目

以我的课设为例,教大家拿到他人的项目后,如何在IDEA上部署。 需要准备: JDK17(或者JDK13)IntelliJ IDEA 2023.2.6MySQL 8.0Tomcat 9.0 一,新建项目添加文件 1.1复制“位置”的路径 1.2找到该文件夹 1.3…

linux嵌入式设备测试wifi信号强度方法

首先我们要清楚设备具体链接在哪个wifi热点上 执行:nmcli dev wifi list rootubuntu:/home/ubuntu# nmcli dev wifi list IN-USE BSSID SSID MODE CHAN RATE SIGNAL BARS > * 14:EB:08:51:7D:20 wifi22222_5G Infr…

米尔NXP i.MX 93开发板的Qt开发指南

1. 概述 Qt 是一个跨平台的图形应用开发框架,被应用在不同尺寸设备和平台上,同时提供不同版权版本供用户选择。米尔 NXP i.MX 93 开发板(MYD-LMX9X开发板)使用 Qt6.5 版本进行应用开发。在 Qt 应用开发中,推荐使用 Qt…

NSSCTF CRYPTO MISC题解(一)

陇剑杯 2021刷题记录_[陇剑杯 2021]签到-CSDN博客 [陇剑杯 2021]签到 下载附件压缩包,解压后得到 后缀为.pcpang,为流量包,流量分析,使用wireshark打开 {NSSCTF} [陇剑杯 2021]签到 详解-CSDN博客 选择统计里面的协议分级 发现流…

Vxe UI vxe-table 实现自定义列拖拽,列拖拽排序功能

Vxe UI vue vxe-table 实现自定义列拖拽&#xff0c;列拖拽排序功能 开启自定义列 vxe-toolbar 工具栏&#xff0c;通过 custom 启用后就可以开启自定义列功能 <template><div><vxe-toolbar ref"toolbarRef" custom></vxe-toolbar><vx…

【java基础】内部类

1、 非静态成员内部类可以访问所在类的全部方法和对象&#xff08;就相当于一个对象方法&#xff08;属于对象阶层和非静态方法同时加载在类加载之后&#xff09;&#xff09; 2、非静态成员内部类无法在该类&#xff08;就是非静态成员内部类所在的类&#xff09;的静态方法中…

MS1112驱动开发

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…

java版B/S架构UWB人员定位系统源码spring boot+vue技术架构uwb定位装置-工业级UWB室内定位系统源码

java版B/S架构UWB人员定位系统源码spring bootvue技术架构uwb定位装置-工业级UWB室内定位系统源码 本套系统运用UWB定位技术&#xff0c;开发的高精度人员定位系统&#xff0c;通过独特的射频处理&#xff0c;配合先进的位置算法&#xff0c;可以有效计算复杂环境下的人员与物…

自动驾驶仿真(高速道路)LaneKeeping

前言 A high-level decision agent trained by deep reinforcement learning (DRL) performs quantitative interpretation of behavioral planning performed in an autonomous driving (AD) highway simulation. The framework relies on the calculation of SHAP values an…

流批一体计算引擎-10-[Flink]中的常用算子和DataStream转换

pyflink 处理 kafka数据 1 DataStream API 示例代码 从非空集合中读取数据&#xff0c;并将结果写入本地文件系统。 from pyflink.common.serialization import Encoder from pyflink.common.typeinfo import Types from pyflink.datastream import StreamExecutionEnviron…

[网鼎杯 2020 青龙组]jocker

运行程序,发现是要我们自己输入 那么肯定是拿到enc慢慢还原 32位,无壳 进来就红一下报错 这里可以看见长度为24 动调一下看看 这里进行了大量的异或 这里是对地址开始的硬编码进行异或,从而达到smc的效果 所以你也可以发现在进行这一步操作之前 encry函数全是报错 你点开…

黄金猛涨周大福却狂跌600亿搬厂裁员,年轻人血脉觉醒?

今年以来&#xff0c;有两样东西一直被吃瓜群众们津津乐道&#xff0c;一是AI的进化速度&#xff0c;二是黄金涨价的速度&#xff0c;并且时常霸占社交媒体热搜。‍‍‍‍‍‍‍‍‍ 尤其是黄金市场&#xff0c;更是一路上涨&#xff0c;快窜出天际了&#xff0c;不少吃瓜群众…

[CLIP] Learning Transferable Visual Models From Natural Language Supervision

通过在4亿图像/文本对上训练文字和图片的匹配关系来预训练网络&#xff0c;可以学习到SOTA的图像特征。预训练模型可以用于下游任务的零样本学习 ​​​​​​​ ​​​​​​​ 1、网络结构 1&#xff09;simplified version of ConVIRT 2&#xff09;linear …

麒麟v10系统arm64架构openssh9.7p1的rpm包

制作openssh 说明 理论上制作的多个rpm在arm64架构&#xff08;aarch64&#xff09;都适用 系统信息&#xff1a;4.19.90-17.ky10.aarch64 GNU/Linux 升级前备份好文件/etc/ssh、/etc/pam.d等以及开启telnet 升级后确认正常后关闭telnet 在之前制作过openssh-9.5p1基础上继续…

1.Linux入门

文章目录 一、介绍1.1 操作系统1.2 Linux1.3 虚拟机1.4 安装 CentOS7 二、远程连接 Linux2.1 FinalShell2.2 远程连接Linux 三、扩展3.1 WSL3.2 虚拟机快照 一、介绍 1.1 操作系统 我们平常所用的电脑是个人桌面操作系统&#xff0c;也就是Windows或者是macOS 目前我们要学的…

【YOLOv10改进[CONV]】使用DualConv二次创新C2f模块实现轻量化 + 含全部代码和详细修改方式 + 手撕结构图 + 全网首发

本文将使用DualConv二次创新C2f模块实现轻量化,助力YOLOv10目标检测效果的实践,文中含全部代码、详细修改方式以及手撕结构图。助您轻松理解改进的方法。 改进前和改进后的参数对比: 目录 一 DualConv 1 结合33卷积和11卷积核 2 DualConv 3 可视化 二 C2f_DualConv助…

el-dialog给弹框标题后加图标,鼠标悬停显示详细内容

效果&#xff1a; 代码&#xff1a; <div slot"title" class"el-dialog__title">标题<el-tooltip effect"dark" placement"right"><div slot"content">鼠标悬停显示</div><i class"el-icon…

水务设备数字化管理

在数字化浪潮席卷全球的今天&#xff0c;水务行业也迎来了数字化转型的重要契机。传统水务管理模式中&#xff0c;设备监控、数据收集、运行维护等环节往往存在效率低下、成本高昂、安全隐患多等问题。而HiWoo Cloud平台的出现&#xff0c;以其强大的设备接入能力、高效的数据处…

外贸自动化脚本编写会用到的源代码!

随着全球化的加速推进&#xff0c;外贸行业正迎来前所未有的发展机遇&#xff0c;为了提高工作效率、减少人为错误&#xff0c;并更好地把握市场机遇&#xff0c;越来越多的外贸企业开始关注自动化脚本的编写与应用。 自动化脚本不仅可以帮助企业实现业务流程的自动化&#xf…

派单软件,改变服务业未来的神秘武器!

随着人们生活质量的提升&#xff0c;对于日常生活、工作中的售后维修服务响应时间、服务质量十分的在意。即使现在信息化时代快速发展&#xff0c;但还是有不少人们面临着以下问题。 你是否曾经因为等待维修服务而焦急万分&#xff1f; 你是否曾经因为繁琐的报修流程而倍感烦恼…