项目实战典型案例14——代码结构混乱 逻辑边界不清晰 页面美观设计不足
创始人
2024-05-28 19:29:49
0

代码结构混乱 逻辑边界不清晰 页面美观设计不足

  • 一:背景介绍
    • 问题1 代码可读性差,代码结构混乱
    • 问题2 逻辑边界不清晰,封装意识缺乏示例
    • 3.展示效果上的美观设计
  • 二:思路&方案
    • 问题一,代码可读性差,代码结构混乱。
    • 问题一方案
    • 效果
    • 问题二 逻辑边界不清晰,封装意识缺乏示例
      • div块级元素
      • v-if 条件渲染
      • v-else
      • v-else-if
    • 问题二 方案
    • 效果
    • 问题三 展示效果上的美观设计
      • 问题三 方案
      • 效果
  • 四:总结
  • 五:升华

一:背景介绍

本篇博客是对对项目开发中出现的代码结构混乱、逻辑编写不清晰、页面美观不足进行的总结并进行的改进。目的是将经历转变为自己的经验。通过博客的方式分享给大家,大家一起共同进步和提高。

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

在这里插入图片描述

问题2 逻辑边界不清晰,封装意识缺乏示例

在这里插入图片描述

3.展示效果上的美观设计

在这里插入图片描述

二:思路&方案

问题一,代码可读性差,代码结构混乱。

1.可以看出如果对于具体业务不够熟悉,其实是很难知道那一块是干什么的,基本上没有注释,代码可读性太差。
2.代码结构混乱,不够条理清晰和层次分明。

问题一方案

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

效果

在这里插入图片描述
代码层次结构相当清晰,代码可读性较强。

问题二 逻辑边界不清晰,封装意识缺乏示例

  1. 问题点在于对于v-if 的运用没有足够的了解,导致逻辑边界不清晰
  2. 以及div的运用不够了解,导致没有体会到和使用到封装。

div块级元素

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。

标签可以把文档分割为独立的、不同的部分,具有封装的思想。

特点

块级元素:
霸占一行,不能与其他任何元素并列。
能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。

v-if 条件渲染

基于表达式值的真假性,来条件性地渲染元素或者模板片段。
详细信息

当 v-if 元素被触发,元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假,那么其内部的内容根本都不会被渲染。
可用于 表示仅包含文本或多个元素的条件块。
当条件改变时会触发过渡效果。
当同时使用时,v-if 比 v-for 优先级更高。

v-else

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。不需要传入表达式
详细信息

上一个兄弟元素必须有 v-if 或 v-else-if。
可用于 表示仅包含文本或多个元素的条件块。

示例

0.5">Now you see me
Now you don't

v-else-if

表示 v-if 的“else if 块”。可以进行链式调用。
详细信息

限定:上一个兄弟元素必须有 v-if 或 v-else-if。
可用于 表示仅包含文本或多个元素的条件块。

示例

A
B
C
Not A/B/C

问题二 方案

根据div块级元素封装性,可以将用一个div标签将81行的代码与89行的代码封装起来,再通过一个v-if进行判断,一样可以完成功能。这样做的好处是能够很好的提高封装性,以及代码简洁逻辑明确。

在这里插入图片描述

效果

在这里插入图片描述

问题三 展示效果上的美观设计

问题点在于前面的圆圈没有与字进行对齐。对于用户来说体验较差,虽然差别很小但是看着很别扭。

问题三 方案

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

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

效果

在这里插入图片描述

四:总结

1.对于问题三的解决方案,应该还有更好的处理方式,如将< img>标签放入到< span>标签中应该也可以解决这个问题,但是博主没有进行验证。
2. 对例如div 以及 v-if这类基础知识点需要进行掌握,还有可能写出符合逻辑以及封装性强的代码。
3. 对于代码的整洁度,结构性,一直都是诟病的问题。好的代码不仅需要自己看懂,也需要别人欣赏。

五:升华

  1. 对于一些基础知识缺失,遇到了就不要放过,及时进行总结及时进行思考。这也是n+1,1+n的体现方式,成长型思维的体现。
  2. 细节决定成败,代码整洁度,结构型,以及页面的美观设计。需要我们具有微观体感,对细节足够重视。

相关内容

热门资讯

新还珠格格,欣荣和永琪有个孩子... 新还珠格格,欣荣和永琪有个孩子?不是说永琪从来都没碰过她吗?绵忆到底是他和小燕子的还是欣荣的啊求正解...
中级会计怎么备考?今年几月考试... 中级会计怎么备考?今年几月考试?您好,很高兴为您解答中级会计师考试,教材是根本和基础,所有的题目都是...
继兴业、招商、中信后,邮储银行... (来源:现代商业银行杂志)金融资产投资公司(AIC)队伍再添新员。邮储银行近日发布公告称,该行拟以自...
中央巡视组对陕西开展两个半月常... 转自:北京日报客户端日前,中央第十五巡视组进驻陕西省,将开展为期两个半月左右的常规巡视,并会同陕西省...
柳州幻境空间在哪里 柳州幻境空间在哪里柳州幻境空间是位于广西柳州市城中区华联商闷郑城4楼的室内主题乐园,提供了各种游戏和...
中央巡视组进驻山东 联动巡视济... 转自:央视新闻客户端经党中央批准,二十届中央第六轮巡视将对16个省(自治区、直辖市)开展常规巡视,并...
继续发布暴雨蓝色预警!北京等地... 转自:央视新闻客户端中央气象台19日早6时继续发布暴雨蓝色预警。预计,19日早8时至20日早8时,青...
降妖伏魔篇演员有哪些 降妖伏魔篇演员有哪些文章舒淇程小东黄勃
晚上十一点在河边抓鱼听到有人叫... 晚上十一点在河边抓鱼听到有人叫我小名声音跟我一个朋友一样,电筒照却没有发现有人而且我女朋友也听见了不...
属猴的为什么吸引属狗的人 属猴的为什么吸引属狗的人属相狗虽不善甜言蜜语,为人多有情感之被捉,然其铅轮内心却多有向往甜蜜幸福之生...