案例14-代码结构逻辑混乱,页面设计不美观

news2025/1/8 12:51:14

目录

目录

一:背景介绍

二:思路&方案

三:过程

        问题1:代码可读性差,代码结构混乱

        问题2: 代码逻辑混乱,缺乏封装的意识

        问题3:美观问题:问题和图标没有对应上

四:总结


一:背景介绍

        在项目开发的过程中会出现结构混乱、逻辑编写不清晰、页面设计不美观的问题,看似不是什么大的问题,但是正是这些细节之处才能体现开发人员的专业程度,细节决定成败。下面和大家分享一下开发中的问题,下次避免类似的情况发生。

问题1:结构混乱,可读性差

问题2: 逻辑不清晰,封装意识缺乏

 问题3:美观问题:图标和问题没有对齐

二:思路&方案

        1.调整代码的整体结构和层次关系,让不是此业务的工程师也能一目了然。

        2.将相同的模块进行封装而不是写多遍,合理使用v-if语句

        3.调整前端样式,体现我们的专业性。

三:过程

        问题1:代码可读性差,代码结构混乱

        解决方案:添加足够多的注释,以及对代码结构进行分层。保证从宏观上让读代码的人一看就看出来整个代码是做什么的

        

        问题2: 代码逻辑混乱,缺乏封装的意识

        解决方案:把182、183和191这三个类似的div模块封装成一个组件,我们可以通过组件引用的方式,再添加对应的v-if 或者v-else的方式进行判断。对于nextActiveIsShow这一个变量的判断可以使用ture、fasle的形式。

        

         问题3:美观问题:问题和图标没有对应上

        解决方案:只需要将< img>标签与< span>标签对齐就可以解决美观问题,给< img>标签附上样式。

height: 1.5em;
vertical-align: -0.3em;

四:总结

        1.明确概念,明确边界。只有我们对v-if足够明确我们在使用过程中才不会出现只使用v-if的情况。对于同一个变量的判断可以使用true和false的方式。

        2.封装的重要性,我们把类似的代码封装了之后,我们代码的复用性才强。在后期维护的过程中才会更加的容易。如果同样的代码写了很多份。维护起来很困难,花费时间也长。

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

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

相关文章

最短路专题——Dijkstra、Floyd、Bellman-Ford、SPFA

目录前言一、全源最短路1.1 Floyd二、单源最短路2.1 Dijkstra2.1.1 堆优化版的Dijkstra2.2 Bellman-Ford2.2.1 队列优化版的Bellman-Ford&#xff1a;SPFA前言 BFS是一种朴素的最短路算法&#xff0c;它可以找到无权图或边权都相同的图的最短路&#xff0c;但是对于边权不完全…

AbstractQueuedSynchronizer从入门到踹门

概念设计初衷&#xff1a;该类利用 状态队列 实现了一个同步器&#xff0c;更多的是提供一些模板方法&#xff08;子类必须重写&#xff0c;不然会抛错&#xff09;。 设计功能&#xff1a;独占、共享模式两个核心&#xff0c;state、Queue2.1 statesetState、compareAndSetSta…

LayerNormalization

目录 1.BN的问题 1.1 BN与batch size 1.2 BN与RNN 2.LN详解 2.1 MLP中的LN 2.2 RNN中的LN 2.3 LN与ICS和损失平面平滑 BN不适用于RNN等动态网络和batchsize较小的时候效果不好。LayerNormalization的提出有效的解决BN的这两个问题。LN和BN不同点是归一化的维度是互相垂直…

SQL总结-排名的使用

##一、通过排名或者范围条件连表筛选特殊行 第一行最后一行区间&#xff08;第一行到第二行或者连续区间&#xff09;找中位数通过排名进行分组或者连续区间 ######1.使用条件筛选连表找区间 Employee 表保存了一年内的薪水信息。 请你编写 SQL 语句&#xff0c;来查询每个…

基于ChatRWKV智能问答和内容创作

ChatRWKV是对标ChatGPT的开源项目,希望做大规模语言模型的Stable Diffusion,测试很一段时间确实很像ChatGPT,从使用方法和内容结果上都很相似,但是还有一些差异。 文章目录 准备工作环境配置创建虚拟环境激活虚拟环境pip安装匹配版本ChatRWKV 使用模型替换常用参数设置使用…

手机磁吸背夹散热器制冷快速方案

手机散热器是什么&#xff1f;手机散热器分为几种类型&#xff1f;手机散热的方式都有哪些&#xff1f; 因为经常玩游戏&#xff0c;手机发热得厉害&#xff0c;都可以煎鸡蛋了&#xff0c;心想着要买个东西给手机散散热&#xff0c;没想到还真的有手机散热器。 不知道手机散…

mysql锁分类大全

前言 为什么会出现锁 MySQL中的锁是为了保证并发操作的正确性和一致性而存在的。 当多个用户同时对同一份数据进行操作时&#xff0c;如果不加控制地进行读写操作&#xff0c;就可能导致数据不一致的问题。例如&#xff0c;当多个用户同时对同一行数据进行写操作时&#xff…

uniapp使用webview嵌入vue页面及通信

最近刚做的一个需求&#xff0c;web端&#xff08;Vue&#xff09;使用了FormMaking库&#xff0c;FormMaking是一个拖拉拽的动态设计表单、快速开发的一个东西&#xff0c;拖拽完之后最终可以导出一个很长的json&#xff0c;然后通过json再进行回显&#xff0c;快速开发&#…

【Spring Boot】Spring Boot经典面试题分享

文章目录1. SpringBoot 简介2. SpringBoot 的优缺点3. SpringBoot 固定版本4. SpringBoot 的使用方式5. SpringBoot 自动配置原理6. PropertySource7. ImportResource8. springboot 的 profile 加载9. SpringBoot 激活指定 profile 的几种方式10. SpringBoot 项目内部配置文件加…

项目中用到的责任链模式

目录 1.什么是责任链&#xff1f;它的原理是什么&#xff1f; 2.应用场景 ​3.项目中的应用 传送门&#xff1a;策略模式&#xff0c;工作中你用上了吗&#xff1f; 1.什么是责任链&#xff1f;它的原理是什么&#xff1f; 将请求的发送和接收解耦&#xff0c;让多个接收对象…

NetApp AFF A900:针对任务关键型应用程序的解决方案

NetApp AFF A900&#xff1a;适用于数据中心的解决方案 AFF A 系列中的 AFF A900 高端 NVMe 闪存存储功能强大、安全可靠、具有故障恢复能力&#xff0c;提供您为任务关键型企业级应用程序提供动力并保持数据始终可用且安全所需的一切。 AFF A900&#xff1a;针对任务关键型应…

关于BLE的一些知识总结

数据包长度对于BLE4.0/4.1来说&#xff0c;一个数据包的有效载荷最大为20字节对于BLE4.2以上&#xff0c;数据包的有效载荷扩大为251字节传输速率在不考虑跳频间隔的情况下&#xff0c;最大传输速率为&#xff1a;1&#xff09;BLE4.0/4.1的理论吞吐率为39kb/s&#xff1b;2&am…

523-(ZCU102E的pin兼容替代卡) 基于 XCZU15EG的双 FMC通用信号处理板

&#xff08;ZCU102E的pin兼容替代卡&#xff09; 基于 XCZU15EG的双 FMC通用信号处理板 一、板卡概述 本板卡基于Xilinx Zynq Ultrascale MPSOC系列SOC XCZU15EG-FFVB1156架构&#xff0c;PS端搭载一组64-bit DDR4&#xff0c;容量32Gb&#xff0c;最高可稳定运行在240…

solidworks调用toolbox出现未配置怎么办

问题背景 本人最近在跟随B站恶补solidworks&#xff0c;学习链接如下 https://www.bilibili.com/video/BV1iw411Z7HZ/?spm_id_from333.337.search-card.all.click 但是在学习的过程中遇到了这样的问题 智能点现在配置&#xff0c;正常的应该是这样的 扒拉了网上所有的解决办…

04从零开始学Java之可能是最详细的Java环境配置教程

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者前言在上一篇文章中&#xff0c;壹哥给大家重点讲解了Java实现跨平台的原理&#xff0c;不知道你现在有没有弄清楚呢&#xff1f;如…

window vscode编辑appsmith源码

前言 本来最开始用的idea打开wsl中的appsmith&#xff0c;卡得一批。最后没办法&#xff0c;用自己的电脑装成ubuntu server&#xff0c;然后vscode的远程开发对appsmith源码进行编辑。如果自己电脑内存16个G或者更大可能打开wsl中的估计会还好&#xff0c;我公司电脑只有8g所…

Virtualbox Vagrant 迁移与恢复

前 言 window10电脑重新安装C盘。重装前正常使用的VirtualBox虚拟机&#xff0c;启动失败&#xff0c;先是启动报各种找不到{uuid.vmdk}文件的错误&#xff0c;使用原来的虚拟机配置文件虽然能正常启动&#xff0c;但是关闭虚拟机后&#xff0c;xxx.vbox配置文件的快照顺序又被…

MySQL主从复制,读写分离

目录 一、MySQL主从复制介绍 MySQL复制过程分成三步 二、主库配置master 1、步骤1 2、第二步:重启Mysql服务 3、第三步&#xff1a;登录Mysql数据库&#xff0c;执行下面SQL 4、第四步&#xff1a;登录Mysql数据库&#xff0c;执行下面SQL&#xff0c;记录下结果中File和…

vue2 使用 cesium 【第二篇-相机视角移动+添加模型】

vue2 使用 cesium 【第二篇-相机视角移动添加模型】 搞了一阵子 cesium&#xff0c;小白入门&#xff0c;这东西很牛逼&#xff0c;但是感觉这东西好费劲啊&#xff01;网上资料不多&#xff0c;每个人的用法又不一样&#xff0c;操作起来真的是绝绝子。之前写了一篇 vue2 使用…

【C#进阶】C# 反射

序号系列文章11【C#基础】C# 预处理器指令12【C#基础】C# 文件与IO13【C#进阶】C# 特性文章目录前言1&#xff0c;反射的概念2&#xff0c;使用反射访问特性3&#xff0c;反射的用途4&#xff0c;反射的优缺点比较4.1 优点&#xff1a;4.2 缺点&#xff1a;5&#xff0c;System…