Guide

前端是用户最直观感受的触点，直接影响到客户的体验。但是对于前端人员来说，对于体验往往没有深入的思考，一般情况下，仅仅是获取数据、走通逻辑，对于体验没有概念，我们在这个小节中，专门讲解前端开发，尤其是体验提升。

前端基本要求

作为一名前端人员，你执行项目时是否有下面的思考？

对于 Vue 开发的单页面应用来说，首次打开页面总是慢的，慢在哪里?

这个是最典型的问题，例如页面上的图片，往往设计给出的图片是未经压缩和剪裁的，图片尺寸过大、占用空间过大。那么请你使用TinyPngopen in new window,将超过 200KB 的文件都压缩一下。TinyPng 是无损压缩，可以把图片尺寸压缩到很低。

曾经我看过，在 mounted 类的生命周期中，使用 await 同步调用的方式，获取 N 多的接口数据，Promise 有多种异步数据同时请求的方案，要注意在生命周期函数中，适度使用同步的接口调用方法，防止页面宕死。

例如，我们在用 tinymc 等富媒体组件时，图片应该上传到七牛等对象存储上，但是曾经有小伙伴将图片通过 base64 编码直接存放在数据库中，导致报文体过大，最终导致页面渲染很慢

一般不会涉及，小程序分包设计的思路就是分批打包，让一个包的体积不超过 2M，确保加载效率

下面是基本共识，请牢记

如果点击一个按钮超过 300ms 没有响应，那么用户是有感知的。

使用青青提供的框架，如果接口调用超过 800ms，则自动弹出 loadding 提示

很多人乱用 loadding，几乎每次调用接口都 loadding 一下，而且提示都叫加载中...，请有一些体验的追求，例如点赞等，不需要 loadding，登陆的 loadding 应该叫做登陆中...

一般出现 undefined 和 null 的主要场景是页面初始化没做好，那么做好初始化有多种方案，例如设计一个 showFlag，当页面数据初始化结束后，整个页面再呈现，或者更好一些，使用骨架屏方案，当然，也不要乱用骨架屏

vue3 中有 object?.pro1?.pro2 很好地规避了这个问题，vue2 目前没有太好的方案，曾经有小伙伴推荐过自定义指令的方式来实现，但是总感觉怪怪的（当前这也是现在已知的唯一基本有效的方案），我们还在寻求方案中，如果你有好的方案可以告诉 TerryQi

框架中自带防抖指令，一般情况，为了避免用户重复点击，要使用防抖处理。

例如 uniapp 开发 APP 需要对 header 适配；web 开发需要 rem 字体大小适配等等

一般情况，我们会定义清晰的 data，例如用户信息会包裹在 userInfo 对象中。

而且，着重说明一下，前端的变量命名要与后端一致，最终与数据库一致，即如果数据库中用户定义为 user，那么接口一定也会定义为 user，进而前端也要叫做 user，而不是 person、people 等。

目前来看，后端基本可以与数据库一致，前端定义简直五花八门，请连接上数据库看看定义，不要想当然命名，要保持与后端接口和数据库一致。

{
	userInfo: {
		nickName: '',
		avatar: '',
		userId: null,
		mobileNumber: ''
	}
}

{
	nickName: '',
	headIcon: '',       //后端接口叫avatar
	userId: null,
	phonenumber: ''         //后端接口叫mobileNumber
}