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

相关内容

热门资讯

超图软件:实际控制人钟耳顺计划... 转自:财联社【超图软件:实际控制人钟耳顺计划减持不超2%公司股份】财联社7月8日电,超图软件(300...
长城汽车面向35岁以上人才开启...   7月8日,长城汽车宣布面向全球35岁以上人才开启专场招聘。长城汽车董事长魏建军在微博发文表示:“...
“福建机场集团”:最牛的机场集...   来源:民航之翼  翼哥最近写了几个机场集团的业绩,大多亏损金额巨大。  许多大型机场集团,由于新...
长沙一五星级酒店摆摊卖卤味,2... “摆地摊”这一传统赛道,近日迎来了不少“大佬”玩家。济南一知名酒店董事长上街掌勺,郑州一五星级酒店摆...
余承东回应开车睡着了:被扣了三...   Hehson科技讯 7月8日晚间消息,今日举办的2025享界用户星享之夜上,华为常务董事、终端B...
中科江南:截至6月30日公司合... 证券日报网讯中科江南7月8日在互动平台回答投资者提问时表示,截至6月30日公司合并普通账户和融资融券...
2025“未来能源领袖”两岸青... 中新网北京7月8日电 由中国石油大学(北京)发起并主办的2025“未来能源领袖”两岸青年交流营6月2...
带孩子们走入军营,还有党建服务... 转自:上观新闻在浦东康桥镇的百礼社区,一群孩子今天走进了驻地部队参观。当近距离感受军人的飒爽英姿和严...
恒指放量反弹重回24000点 ... 财联社7月8日讯(编辑 冯轶)今日港股震荡反弹走强,三大指数午后持续冲高。截至收盘,恒生科技指数收涨...
朗特智能监事苟兴荣拟减持不超1... 朗特智能于7月8日发布公告,公司监事苟兴荣计划减持公司股份。苟兴荣持有公司股份582.31万股,占总...