前端经验与水平体现

刀刀

3/20/2025

0 字

0 分钟

方向思考

• 能否实现效果，不是，效果实现很多地方都能查询搜索到，再不济也能问AI
• 会的东西多不多，如果都会水平是很高，但是对公司和项目意义不大
• 设计项目架构，不是，很少有人能接触到
• 代码质量高不高，关键，代码质量高写代码不会差
• 性能优化，大部分项目都没有优化的情况，能体现但无法起决定的作用

观点

不是实现了功能，而是好好地实现了功能。

1. 代码写的可读性、可维护性、执行性能
2. 能否主动考虑到功能的体验问题
3. 功能是否有边界处理，减少意外

不断发觉业务开发中的麻烦，去沉淀开发一些基础设施。

1. 发现项目里常常重复的业务功能，沉淀为高可用组件
2. 发现项目开发中的一些麻烦，开发一些工具或者脚本，让这个过程更快

代码质量的例子

1. 可读性：注释，命名，代码分区，不写过多判断和表达式

   命名.js

   let abc = 1 // bad
   let addTopNum = 1 // good

   代码分区.js

   /* bad */
   let a = 1
   let b = 1
   let c = 1
   computed(() => {})
   computed(() => {})
   computed(() => {})
   function f1() {}
   function f2() {}
   function f3() {}
   
   /* good */
   // 功能1
   let a = 1
   computed(() => {})
   function f1() {}
   
   // 功能2
   let b = 1
   function f2() {}
   computed(() => {})
   
   // 功能2
   let c = 1
   computed(() => {})
   function f3() {}

   过多的判断.js

   // bad
   a ? b > 1 ? 'yy' : 'xx' : 'zz'
   if (a) {
     if (b > 1) {
       return 'yy'
     } else {
       return 'xx'
     }
   } else {
     return 'zz'
   }

2. 可维护性：如果以后发生更改，是否能很好的修改

   // 后端接口返回一个字段 res.a，a的值可能是some1，可能是some2。后续可能会改成Some1和Some2
   const RESSTATUS = {
     status1: 'some1',
     status2: 'some2',
   }
   
   // 后续不要直接判断some1、some2，而是根据常量枚举来判断
   if (res.a === RESSTATUS.status1) {
     // do something
   }

3. 执行性能：执行频次尽量减少

常见用户体验考虑

1. 数据加载过程优化，如 loading ，1秒以下的接口不需要加 loading ，尽量避免闪烁，及时反馈。

   例如用户权限根据接口获取是否有该权限时，可以先添加文字「查询权限中」，而不是直接显示无权限，等到接口回来时改称有权限。再例如点击删除按钮，点击后给用户一个反馈，如「删除中...」

   <template>
    <div v-if="status===''">查询权限中...</div>
    <div v-else-if="status==='xx'">有权限</div>
    <div v-else>无权限</div>
   
    <button>{{ delete ? '删除中...' : '删除' }}</button>
   </template>

2. 元素的移动尽量给出动画

   如：添加购物车、loading 旋转动画等。

3. 提示尽量友好

兜底思维

1. 图片的兜底，加载失败兜底

   如：用户头像没上传，接口返回空字符串，应该给个默认头像图片；表格数据返回空，不要直接加载一个空表格，而是添加文本提示暂无数据等。

2. 接口返回防错兜底

   如：接口返回 null 或者 undefined，应该给个默认值，而不是直接使用 null 或者 undefined。

   let a = ref({}) // 假设这是后端返回的数据
   watch(() => {
     // 添加一个可选链，避免报错页面白屏
     a.value?.arr.forEach((item) => {
       console.log(item.name)
     })
   })

3. UI布局边界

   如现在写的布局是否适配所有尺寸屏幕等。