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

矫情吗；* 2023-10-11 20:59 21阅读 0赞

#### 目录 ####

*  一、背景介绍
 *   *  1、代码可读性差，结构混乱
     *  3、展示效果不美观
 *  二、案例问题分析以及解决过程
 *   *  1、代码可读性差，结构混乱
     *   *  ①以下是调整好的代码结构
     *  2、逻辑边界不清晰，封装意识缺乏
     *   *  ①div块级元素
         *  ②、v-if 条件渲染
         *  ③、v-else
         *   *  1）、示例
         *  ⑤、v-else-if
         *   *  1）、示例
     *  3、展示效果不美观
     *   *  ①、方案
 *  三、总结
 *  四、升华

## 一、背景介绍 ##

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

### 1、代码可读性差，结构混乱 ###

![在这里插入图片描述][dbd09c0ef7144437bdf9ec7402774f14.png]  
**\#\# 2、逻辑边界不清晰，封装意识缺乏![在这里插入图片描述][bbfc5f04902541db993944ced6b62793.png]**

### 3、展示效果不美观 ###

![在这里插入图片描述][a675b2a9cf534ac9a35b498b497248be.png]

## 二、案例问题分析以及解决过程 ##

### 1、代码可读性差，结构混乱 ###

①我们经常说写的代码是让人读的，写每一行代码都要写上注释，要是没有注释，别说读了连看也不想看吧。  
②代码结构混乱，没有层次，不能想写哪写哪，想放哪放哪。代码间是有关系的。

#### ①以下是调整好的代码结构 ####

添加足够多的注释，以及对代码结构进行分层。保证从宏观上让读代码的人一看就看出来整个代码是做什么的。代码层次结构相当清晰，代码可读性较强。  
![在这里插入图片描述][92f45fcd995d41fe97f9d93555abb94d.png]

### 2、逻辑边界不清晰，封装意识缺乏 ###

出现问题：没改之前的代码，是把两个div分开写的，这样可以实现，但是如无必要勿增实体。

#### ①div块级元素 ####

用第一个div把第二个div包了起来，这样也可以实现同样的效果。  
![在这里插入图片描述][7cbacdc7985546c2a43645360764205b.png]

#### ②、v-if 条件渲染 ####

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

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

#### ③、v-else ####

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

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

##### 1）、示例 #####

#### ⑤、v-else-if ####

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

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

##### 1）、示例 #####

### 3、展示效果不美观 ###

不美观的地方是：活动前边的图标没有与文字对齐。

#### ①、方案 ####

给标签附上样式  
vertical-align：是用来指定行内元素或表格单元格元素的垂直对齐方式的属性。

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

![在这里插入图片描述][baabaf99a6cb4a81b1e10cfa880d18e7.png]

## 三、总结 ##

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

## 四、升华 ##

1.  条例清理，层次分明（前提：要先抽象）
2.  要善于分条例、分层次、做结构化
3.  要想学习好，就要学会封装
4.  要做到N+1（在原来的基础上迭代新的知识），1+N（在学习新的知识时，回顾学过的知识）
5.  把学过的知识，编织成知识网
6.  要读出代码的味道
7.  把意义搞得越丰富，越生活，越有味道

[dbd09c0ef7144437bdf9ec7402774f14.png]: https://img-blog.csdnimg.cn/dbd09c0ef7144437bdf9ec7402774f14.png
[bbfc5f04902541db993944ced6b62793.png]: https://img-blog.csdnimg.cn/bbfc5f04902541db993944ced6b62793.png
[a675b2a9cf534ac9a35b498b497248be.png]: https://img-blog.csdnimg.cn/a675b2a9cf534ac9a35b498b497248be.png
[92f45fcd995d41fe97f9d93555abb94d.png]: https://img-blog.csdnimg.cn/92f45fcd995d41fe97f9d93555abb94d.png
[7cbacdc7985546c2a43645360764205b.png]: https://img-blog.csdnimg.cn/7cbacdc7985546c2a43645360764205b.png
[baabaf99a6cb4a81b1e10cfa880d18e7.png]: https://img-blog.csdnimg.cn/baabaf99a6cb4a81b1e10cfa880d18e7.png