当前位置: 首页 > news >正文

案例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.lryc.cn/news/36795.html

相关文章:

  • 弱监督参考图像分割:Learning From Box Annotations for Referring Image Segmentation论文阅读笔记
  • Linux进程和任务管理和分析和排查系统故障
  • 【满分】【华为OD机试真题2023 JAVA】最多几个直角三角形
  • PyQt5可视化 7 饼图和柱状图实操案例 ②建表建项目改布局
  • sonarqube指标详解
  • 耳机 喇叭接线分析
  • SpaceNet 建筑物检测
  • 蓝桥杯刷题第六天
  • Linux C++ 多线程高并发服务器实战项目一
  • QML ComboBox简介
  • uniapp使用webview嵌入vue页面及通信
  • 深度学习部署笔记(九): CUDA RunTime API-2.1内存管理
  • Idea+maven+spring-cloud项目搭建系列--11-2 dubbo鉴权日志记录数据统一封装
  • SOLIDWORKS免费培训 SW大型装配体模式课程
  • xxl-job registry fail
  • 【C#进阶】C# 反射
  • 公网NAT网关与VPC NAT网关介绍与实践
  • Windows中UWP、WPF和Windows窗体的区别
  • Flink从入门到精通系列(一)
  • 云原生应用风险介绍
  • 什么是测试用例设计?
  • 数据分析:基于K-近邻(KNN)对Pima人糖尿病预测分析
  • Kettle体系结构及源码解析
  • 大数据 | (二)SSH连接报错Permission denied
  • 前端——6.文本格式化标签和<div>和<span>标签
  • 浅谈Xpath注入漏洞
  • Oracle LogMiner分析归档日志
  • 趣味三角——第15章——傅里叶定理
  • 市场营销的核心是什么?
  • c/cpp - 多线程/进程 多进程