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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【小海实习日记】Git使用规范

1.Git使用流程 1.1 从master分支拉一个分支,命名要符合规范且清晰。 1.2 commit到本地,push 到远端。 1.3 在Gitlab创建MR,选择develp分支。 1.4 如果要修改的话,先把Gitlab上的MR修改为Draft(修改态),然后在本地修改代…

SwiftUI获取用户的位置信息(CLLocationManager,CLLocationManagerDelegate)

本篇文章将会介绍一下在SwiftUI中如何通过CorLocation框架获取用户的位置信息,因为获取位置信息属于用户的隐私信息,所以需要在Info.plist文件里面加上访问位置权限的说明。 关于位置信息,可以请求两种级别的许可:always和when i…

图的创建和BFS,DFS遍历

图的创建 图是一种用于表示对象及其关系的抽象数据结构,由节点(也称为顶点)和连接节点的边组成。图可以分为有向图(Directed Graph)和无向图(Undirected Graph),以及加权图&…

Redis的事务与关系型数据库事务有何不同?

引言:关于 Redis 的事务很多人可能都是一知半解,大多数人只了解数据库的事务,并且是单体事务,对于 Redis 事务和常见关系型数据库的事务的区别还没有去了解过,本文就来详细进行介绍。 题目 Redis的事务与关系型数据库…

git【工具软件】分布式版本控制工具软件

一、Git 的介绍 git软件的作用:管理软件开发项目中的源代码文件。 常用功能: 仓库管理、文件管理、分支管理、标签管理、远程操作 功能指令: add,commit,log,branch,tag,remote…

UE5 Mod Support 思路——纯蓝图

原创作者:Chatouille 核心功能 “Get Blueprint Assets”节点,用于加载未来的mod。用基础类BP_Base扩展即可。打包成补丁,放到Content\Paks目录下,即可让游戏访问到内容。 与文中所写不同的地方 5.1或者5.2开始,打…

mysql optimizer_switch : 查询优化器优化策略深入解析

码到三十五 : 个人主页 在 MySQL 数据库中,查询优化器是一个至关重要的组件,它负责确定执行 SQL 查询的最有效方法。为了提供DBA和开发者更多的灵活性和控制权,MySQL 引入了 optimizer_switch 系统变量。这个强大的工具允许用户开…

自动驾驶仿真(高速道路)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…

Go微服务: 基于使用场景理解分布式之二阶段提交

概述 二阶段提交(Two-Phase Commit,2PC)是一种分布式事务协议,用于在分布式系统中确保多个参与者的操作具有原子性即所有参与者要么全部提交事务,要么全部回滚事务,以维持数据的一致性它分为两个阶段进行&…

3038. 相同分数的最大操作数目 I

题目 给你一个整数数组 nums,如果 nums 至少包含 2 个元素,你可以执行以下操作: 选择 nums 中的前两个元素并将它们删除。一次操作的分数是被删除元素的和。 在确保所有操作分数相同的前提下,请你求出最多能进行多少次操作。 …

数字IC后端物理验证PV | TSMC 12nm Calibre Base Layer DRC案例解析

基于TSMC 12nm ARM A55 upf flow后端设计实现训练营将于6月中旬正式开班!小班教学!目前还有3个名额,招满为止!有需要可以私信小编 ic-backend2018报名。吾爱IC社区所有训练营课程均为直播课! 这个课程支持升级成双核A…

李廉洋:6.7黄金亚盘洗盘暴跌,美盘最新分析策略。

黄金消息面分析:美联储降息可能是经济出现麻烦的信号。自去年10月以来,美国股市一直在上涨,原因是尽管利率持续走高,但美国经济和企业盈利仍保持强劲。如果市场对2024年下半年降息的信心增强,那么硬着陆的可能性就会增…

python-df的合并与Matplotlib绘图

1 数据连接 concat merge join (append 作为了解) append 竖直方向追加, 在最新的pandas版本中已经被删除掉了, 这里推荐使用concat 1.1 pd.concat 两张表, 通过行名、列名对齐进行连接 import pandas as pd df1 …

MS1112驱动开发

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

【电路笔记】-分贝

分贝 分贝是以 10 为底的对数比,用于表示电路中功率、电压或电流的增加或减少。 1、概述 一般来说,分贝是响度的度量。 在设计或使用放大器和滤波器电路时,计算中使用的一些数字可能非常大或非常小。 例如,如果我们将两个放大器级级联在一起,功率或电压增益分别为 20 和…

嵌入式Linux系统编程 — 2.1 标准I/O库简介

目录 1 标准I/O库简介 1.1 标准I/O库简介 1.2 标准 I/O 和文件 I/O 的区别 2 FILE 指针 3 标准I/O库的主要函数简介 4 标准输入、标准输出和标准错误 4.1 标准输入、标准输出和标准错误概念 4.2 示例程序 5 打开文件fopen() 5.1 fopen()函数简介 5.2 新建文件的权限…

全程自动化操作 自动生成图文发布,矩阵批量软件系统 日产1-3万篇

一、简介 图文发布对于现代网站运营至关重要,然而手动创建和发布图文内容效率低下且易出错。全自动化图文生成发布流程可以解决这个问题。本文将详细说明如何以编程方式实现这一流程。 二、模块设计 该流程主要包含三个模块:图像生成,文本生成…

前端解析文件流格式数据异常时并给提示

把后端返回的文件流格式转换成正常数据格式 断点调试返回值 network查看返回值 一、blob类型 let stringData:any await this.blobToString(res); blobToString(blob) { return new Promise((resolve, reject) > { const reader new FileReader(); reader.onloadend (…

通过U盘将第三方软件安装到各大品牌电视的方法

在本教程中,小武给大家整理了通过U盘的方式安装第三方软件到电视盒子上,可直接使用通用U盘的方式来进行安装。 如果您相应电视品牌按通用方式无法完成需求,下面为您也贴心整理了20款主流智能电视和电视盒子的U盘安装指南。这些步骤适用于小米…

Vxe UI vxe-form 实现折叠表单,当表单很多时实现自动收起与展开

Vxe UI vue vxe-form 实现折叠表单&#xff0c;当表单很多时实现自动收起与展开 代码 folding 用于将当前表单项设置为默认隐藏 collapse-node 设置折叠按钮&#xff0c;加上之后会自动在该表单项的右侧显示一个折叠按钮 <template><div><vxe-formtitle-colo…