项目实战典型案例14——代码结构混乱 逻辑边界不清晰 页面美观设计不足

一：背景介绍

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

问题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。
可用于 表示仅包含文本或多个元素的条件块。

示例

<div v-if="Math.random() > 0.5">Now you see me
</div>
<div v-else>Now you don't
</div>

v-else-if

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

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

示例

<div v-if="type === 'A'">A
</div>
<div v-else-if="type === 'B'">B
</div>
<div v-else-if="type === 'C'">C
</div>
<div v-else>Not A/B/C
</div>

问题二 方案

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