项目实战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;


相关文章
|
前端开发 Java C++
每个前端都应该掌握的7个代码优化的小技巧
每个前端都应该掌握的7个代码优化的小技巧
201 0
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
524 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
缓存 监控 前端开发
基于 CoffeeScript 的内网管理监控软件前端代码优化
本文探讨了基于CoffeeScript的内网管理监控软件前端代码优化方法,包括数据请求缓存、界面更新采用虚拟DOM技术以及增强错误处理机制,旨在提升软件性能、响应速度和用户体验。
134 4
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
前端开发
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
216 0
|
前端开发 数据库
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
196 0
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
前端开发 JavaScript API
前端代码优化方法
前端代码优化方法
403 0
|
前端开发 vr&ar
【前端验证】fork-join_none线程立即执行的一次代码优化记录
【前端验证】fork-join_none线程立即执行的一次代码优化记录
302 0
|
前端开发
前端项目实战玖-pad端mui使用网络请求利用原生开发
前端项目实战玖-pad端mui使用网络请求利用原生开发
148 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    597
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    249
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    233
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    185
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    293
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    419
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    181
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    123
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    196
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    270