案例14-代码结构逻辑混乱，页面设计不美观

目录

一：背景介绍

问题1：结构混乱，可读性差

问题2： 逻辑不清晰，封装意识缺乏

 问题3：美观问题：图标和问题没有对齐

二：思路&方案

三：过程

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

 问题2： 代码逻辑混乱，缺乏封装的意识

 问题3：美观问题：问题和图标没有对应上

四：总结

---

一：背景介绍

        在项目开发的过程中会出现结构混乱、逻辑编写不清晰、页面设计不美观的问题，看似不是什么大的问题，但是正是这些细节之处才能体现开发人员的专业程度，细节决定成败。下面和大家分享一下开发中的问题，下次避免类似的情况发生。

问题1：结构混乱，可读性差

问题2： 逻辑不清晰，封装意识缺乏

 问题3：美观问题：图标和问题没有对齐

二：思路&方案

        1.调整代码的整体结构和层次关系，让不是此业务的工程师也能一目了然。

        2.将相同的模块进行封装而不是写多遍，合理使用v-if语句

        3.调整前端样式，体现我们的专业性。

三：过程

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

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

        

      问题2： 代码逻辑混乱，缺乏封装的意识

        解决方案：把182、183和191这三个类似的div模块封装成一个组件，我们可以通过组件引用的方式，再添加对应的v-if 或者v-else的方式进行判断。对于nextActiveIsShow这一个变量的判断可以使用ture、fasle的形式。

        

      问题3：美观问题：问题和图标没有对应上

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

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

四：总结

        1.明确概念，明确边界。只有我们对v-if足够明确我们在使用过程中才不会出现只使用v-if的情况。对于同一个变量的判断可以使用true和false的方式。当我们对组件或者语句足够了解的时候我们在使用的时候才会得心应手不然总是很模糊不确定。

        2.封装的重要性，我们把类似的代码封装了之后，我们代码的复用性才强。在后期维护的过程中才会更加的容易。如果同样的代码写了很多份。维护起来很困难，花费时间也长。

        3.模块化设计：将页面的不同部分划分成模块，每个模块负责一个特定的功能或内容。这样可以使页面的各个部分相互独立，修改一个模块不会影响其他模块，提高了页面的灵活性和可维护性。

        4.可扩展性设计：设计时考虑到未来的扩展需求，使页面的结构和样式可以容易地扩展和修改。例如，使用可扩展的CSS选择器、命名规范等，使样式的修改和扩展更加方便。

        5.可定制化选项：为用户提供一些可定制的选项，让用户可以根据自己的喜好和需求来调整页面的外观和功能。例如，提供不同的主题颜色、字体选择、布局风格等选项，让用户可以根据自己的喜好来个性化定制页面。

        6.设计系统化：建立一个设计系统，包括设计原则、样式规范、组件库等，使设计更加一致和统一。设计系统可以提供一些事先定义好的设计模式和组件，使设计更加高效和灵活。

        细节决定成败，我们不要因为功能实现了就忽略了功能的细节之处，往往细节才能体现一个人和一个项目的专业程度。