关于技术提升
刀刀
4/2/2024
0 字
0 分钟
主要方向
- 功能实现
- 项目结构设计
- 性能优化
- 知识深广度
- 代码质量
以小见大
不是实现了功能，而是好好地实现了功能；不断地发掘业务开发中的麻烦，去沉淀开发一些基础设施。
代码写的可读性、可维护性、执行性能
可读性——注释，命名，代码分区，不写过多的判断和表达式
js// 错误的命名 let a = ref(1) let b = ref(false) // 错误的分区：分区太过分散，同一模块想要使用还要来回翻找 let a = 1 let b = 2 computed(() => { // ... }) computed(() => { // ... }) function f1 () { // ... } function f2 () { // ... } // 过多的判断 let a = b > 1 ? c - a < 2 ? 0 : 1 if (a> 1 && b < 2 || c > 3 || d % 2 = 0) { // ... }可维护性——如果以后发生更改，是否能很好地修改
js// 不好维护的v-if判断 <div v-if="res.a === 'some1'"></div> <div v-if="res.a === 'some1'"></div> <div v-if="res.a === 'some1'"></div> // 正确的做法，声明一个常量，后续修改即可 let RESULT = { status1: 'some1', status2: 'somme2' } <div v-if="res.a === RESULT['status1']"></div>执行性能——执行频次尽量减少
比如在做
watch侦听，有些操作没必要在侦听内每次都重复做，可以提取出去放到外边做。
主动考虑到功能的体验问题
数据加载过程优化，如
loading、尽量避免闪烁、及时反馈等短时间的接口无需添加
loading，不然会有闪一下的效果。长时间的接口请求时再添加loading效果。有一些业务需求是判断用户权限，一般做法是请求了接口后再显示对应内容。代码如下：
vue<script setup> axios.get('/xxx').then((res) => { status.value = res.status }) </script> <template> <div v-if="status === 'status1'">你没权限</div> <div v-if="status === 'status2'">你有权限</div> </template>此时页面的效果会有两种，第一种是一开始渲染没权限的字样，等待接口请求完毕后变成有权限的字样，此时字体会发生闪烁，用户会有一定的疑惑；第二种是页面一开始空白到接口获取到数据后渲染有权限的字样，也有闪烁效果，且如果接口时间过长，页面空白时间也会过长。
较好的做法是给一个骨架基底，在接口没调用完前渲染提示文本。如：
vue<script setup> axios.get('/xxx').then((res) => { status.value = res.status }) </script> <template> <div v-if="status === ''">正在查询权限</div> <div v-if="status === 'status1'">你没权限</div> <div v-if="status === 'status2'">你有权限</div> </template>还有删除操作，点击按钮调用接口删除数据时应该立刻给用户一个反馈。
元素过渡动画
还是以上方的
loading代码作为示例，简单的文字可能效果不太好，添加一个转圈圈的效果或许会更好一点。再例如购物车，点击购买按钮后可以添加一个图标飞入底部购物车的动画，本质上是创建一个
div，设置定位，定时器隔1、2秒后修改其top值和left值。再给一个transition过渡时间。友好提示
边界处理，减少意外BUG
其实就是培养兜底思维，做好以下几种兜底：
图片兜底，加载失败兜底
例如接口获取用户头像是，贩毒案返回的是空，此时应该给一个兜底的默认头像之类的，而不是直接给
img标签一个空字符串。这个在市面上常用的组件库都有设置到。接口返回防错兜底
例如后端返回的数据对象中有一个数组，前端需要循环数组拿数据，如果接口没报错直接点拿到自然没问题，但是需要考虑后端接口没返回该数据，或该数据为
null的风险。后端返回的数据前端没法控制，前端能做到的是添加可选链，或非空判断，减少报错。jslet a = ref({}) watch(() => { a.value.arr?.forEach(item => { console.log(item) }) }, a)UI布局边界
发现项目里常常重复的业务功能，沉淀为高可用的组件
敏锐发现常用业务功能，封装组件尽可能要高可用，要考虑每个需要使用的场景，减少 CV 。