项目实战典型案例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. 细节决定成败,代码整洁度,结构型,以及页面的美观设计。需要我们具有微观体感,对细节足够重视。

相关内容

热门资讯

麦格米特:公司暂无核电业务 投资者提问:请问公司是否有切入核电/核聚变行业供应电源呢?有无技术专利储备,参与研发项目,签署订单?...
香山静宜园与路县故城上演“时空... 转自:北京日报客户端7月8日,由香山公园管理处与路县故城遗址公园联合主办的 “香山源脉 千年城韵”—...
麦格米特:回应GB300电源方... 投资者提问:2025 年 GTC 大会上展示的 GB300 电源解决方案,对公司业务发展有何战略意义...
ST奥维资金被关联方占用 1.... 中经记者 陈家运 北京报道承诺期已过,ST奥维(002231.SZ)股东及其关联方的巨额非经营性资金...
学习时节|铭记抗战历史,弘扬抗... 1937年7月7日,日本侵略者为了达到以武力吞并全中国的罪恶野心,悍然炮轰宛平城,制造了震惊中外的卢...
盐湖股份(000792.SZ)... 格隆汇7月8日丨盐湖股份(000792.SZ)公布,截至公告披露日,增持计划实施时间过半,中国五矿通...
秦韵教育·2025年全国沙滩排... 来源:环球网 7月8日,秦韵教育·2025年全国沙滩排球巡回赛(商洛站)暨第十五届全国运动会沙滩排球...
强势股追踪 主力资金连续5日净... 证券时报·数据宝统计,截至7月8日收盘,深沪北共57只个股连续5日或5日以上主力资金净流入。正帆科技...
防泄露有招了!首个数字水印国标... 快科技7月8日消息,近日,国家市场监督管理总局、国家标准化管理委员会正式发布首个数字水印国家标准GB...
福田汽车(600166.SH)... 格隆汇7月8日丨福田汽车(600166.SH)公布,2025年4月,北京汽车集团有限公司(简称“北汽...