聊聊公司团队前台交互需要注意的少量要点。
一般上 Tab 切换的页面都应该通过路由定义,切换选项卡即切换路由,而且要用 replace 而不是 push 切换。
页面分页、侧栏分类切换分类等会重新加载列表的操作都要通过路由进行切换。
链接必需使用 a 标签+设置 href 属性公告跳转,允许客户右键新选项卡打开,不要通过 click 事件进行跳转。
引入外部插件、增加 DOM 事件到 document/body 时,肯定要销毁,不做很容易导致内存泄漏。
能用框架提供的接口/方法处理就用框架,不要自己另外实现一份。
页面/组件的每一个状态都要解决。
组件状态解决
重点说一下这个,以页面路由组件为例子。
例如打开一个页面,状态大致可以分为数据加载中/加载完成/没有数据三种。
在写每一个页面的时候,都需要针对这 3 种状态进行显示 Loading/骨架图、渲染、空数据提醒的解决。
另外说一个例子,一个页面包含多个相互独立的业务组件(每一个业务组件即可以当作子系统)。
需要考虑到每一个业务组件可能出现的状态:
有少量组件比较简单,直接渲染 UI 就好了;
有少量组件较为复杂,有 Ajax 请求,那么要考虑到请求中、请求成功、失败、没有数据等等状态;
有少量组件可能引入了很大的第三方库(如Echarts),这些第三方库必需异步加载,这时就需要考虑异步加载第三方库时的状态,比方显示 Loading 之类;
其余诸如屏幕适配也可以当作状态的一种,不过屏幕适配一般是在<App />?中做,平常不需要太注意。
平常开发组件的时候肯定要想好究竟有多少种状态,哪些状态要解决,哪些状态不必解决。
另外说下组件状态的了解
比照下下面几种写法的优劣势:
页面发生错误exportdefault{? data() {return{aData: {loading:true,error:false,list: []? ? ? },bData: {loading:true,error:false,list: []? ? ? },cData: {loading:true,error:false,list: []? ? ? }? ? }? },asynccreated() {this.loadA();this.loadB();this.loadC();? }};
页面发生错误exportdefault{? data() {return{loading:true,hasError:false,aData: [],bData: [],cData: []? ? }? },asynccreated() {try{awaitPromise.all([this.loadA(),this.loadB(),this.loadC()]);? ? }catch(err) {this.hasError =true;? ? }finally{this.loading =true;? ? }? }};
页面发生错误exportdefault{? data() {return{aData: {loading:true,error:false,list: []? ? ? },bData: {loading:true,error:false,list: []? ? ? },cData: {loading:true,error:false,list: []? ? ? }? ? }? },computed: {? ? loading() {returnaData.loading && bData.loading && cData.loading;? ? },? ? hasError() {returnaData.error || bData.error || cData.error;? ? }? },asynccreated() {this.loadA();this.loadB();this.loadC();? }};
其实一个组件可以当作一个有限状态机。
而后即可以把页面复杂的逻辑问题简化为几个状态机自身的状态转移问题,可以有效简化问题又失灵活,以应对多变的需求。
假如有想学习编程的初学者,可来我们的前台直播授课群的哦:571671034里面免费送整套系统的前台教程!