项目实战14—前端代码优化

简介: 项目实战14—前端代码优化

一.前言

代码是给自己看的,也是给别人看的,是给一个团队看的。前期编码梳理好清晰的逻辑,写出可读性高的代码。能够让后期维护省不少力。界面是给用户看的,任何一个小的细节问题都会影响观感。

二.优化过程

1.谨慎使用 v-if ,避免造成逻辑混乱,一层能解决就不要两层判断嵌套在一起。要考虑封装意识

如果涉及到更多条件,选择用v-else-if,而不是写多个v-if

2.清晰明了的写出注释,代码也不要堆在一起,而是根据接口清晰分层

3.一个界面,如果想在整体和细节上观感不错,那么页面的元素一定要有所规律,最起码的,就是要对齐。这需要对界面标签元素各个属性和作用有充分了解。

<div></div> 

作用:为页面的内容提供结构和背景

特性:(1)是块级元素,不能与其他元素并列的,单独占一行

(2)可以设置宽和高,如果不设置的话,宽度默认100%

<img></img>
<span></span>

通过样式属性的修改,使得img标签和span文字对齐,比如:

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


相关文章
|
6月前
|
前端开发 Java C++
每个前端都应该掌握的7个代码优化的小技巧
每个前端都应该掌握的7个代码优化的小技巧
112 0
|
5月前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
6月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
前端开发
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
55 0
|
前端开发 数据库
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
83 0
|
前端开发 vr&ar
【前端验证】fork-join_none线程立即执行的一次代码优化记录
【前端验证】fork-join_none线程立即执行的一次代码优化记录
|
前端开发
前端项目实战玖-pad端mui使用网络请求利用原生开发
前端项目实战玖-pad端mui使用网络请求利用原生开发
96 0
|
前端开发
前端项目实战壹佰零肆react-admin+material ui-踩坑-List的用法之queryOptions
前端项目实战壹佰零肆react-admin+material ui-踩坑-List的用法之queryOptions
72 0
|
前端开发
前端项目实战壹佰零捌react-admin+material ui-踩坑-react-admin之sort
前端项目实战壹佰零捌react-admin+material ui-踩坑-react-admin之sort
81 0
|
前端开发
前端项目实战壹佰叁拾壹react-admin+material ui-react-admin之SelectColumnsButton中preferenceKey
前端项目实战壹佰叁拾壹react-admin+material ui-react-admin之SelectColumnsButton中preferenceKey
55 0