何为【四更】?

  • 更少的代码
  • 更低的请求
  • 更小的资源
  • 更多的事情

如何实现【四更】?

从架构层面思考项目:目录结构,构建工具,单元测试,组件化开发,抽象需求。

拿开发一个管理端来说

首先配置一个 httpClient 用来管理所有网络请求,包含各种状态的提示(加载中,成功提示,失败提示,服务器异常,服务器维护),缓存管理,授权拦截,response 格式化,让业务层尽可能轻松愉快的请求数据,处理数据。

然后搭建菜单导航配置,充分复用单页应用的路由配置,实现菜单跟着路由走,你添加了几个页面,我就生成几个菜单。同时支持个性化配置,如权限配置(对不同用户展示不同的菜单),层级配置,图标配置

再针对管理端的常见套路(增删改查)来抽象出一套完备的组件。

增改

新增和修改,这两个常见的管理端需求完全可以合并成一个 Modify 组件,实现你写完增组件,就等于写好了改组件,只需要配置两者之间的差异部分,尽可能地复用能够最大限度的减少出错和提高效率。

Modify 组件要能够保罗万象,也就是尽可能地支持后端需要的各种数据,如文本,富文本,时间选择器,下拉选项,手机号+验证码,图片(单张,多张,预览),文件等,同时又可以保证在开发体验上这些不同的类型数据能够“一视同仁”,抽象化成各种表单组件,拿过来简单配置一下就可以用。

同时要有完备的校验系统,要实现能够简单优雅地支持以上所有表单组件。

这里可以就抽象度来举个例子,比如你在使用原生 Form 提交内容的时候,像文本,多选单选等表单基本只需要简单配置一下 name 属性就可以做到拿来就用。而我们的这个 Modify 组件你可以参考原生 Form 的行为把他封装成一个高级版的 Form,通过与子组件约定的“通讯方式”来统管提交过程。而富文本,时间选择器,图片上传等这些个性化的表单,你可以封装成一个个高级版本的 Form 表单。比如图片上传,原生的方式是 file input,但很丑,而且不支持预览,那你在封装的时候就把它想象成一个可以支持图片预览功能的 file input,也就比它要再多配置一个上传路径而已。当上传的时候,Modify 组件发出“通知”,首先触发校验,然后各个表单组件收到命令开始执行各自的个性化操作,最后得到一个完整的待提交内容由 Modify 执行提交,提交完毕之后还能执行一些你配置的命令,如:刷新页面,提示弹窗等等

再说修改,这个可以优化到吹毛求疵的地步。

首先是不允许多次提交。Modify 组件自维护一个提交状态,能够绝对保证用户不能多次触发同一个提交请求

接着是修改前的内容对比。diff 出最小粒度的变更,甚至要实现 diff 某个数组只是数组数据的顺序变了,但内容没变,那可以选择忽略此变更。也就是说要实现尽可能地不提交修改,一旦提交只提交真正变更的部分。

然后说提交过程。这一步重点要说说图片等资源文件的提交。很多管理端都是选择完文件,就立刻执行上传,这一点也不科学!在用户体验上会增加等待时间,还给后端或静态资源服务器增加了压力,以及资源的严重浪费。科学的做法应该是在本地执行完一系列校验之后,真正要提交的时候再去上传图片(这里还有一个优化点是通过 base64 对比来实现如果之前已经上传过该图片,那就直接返回图片地址,又可以减少一次大请求)。同时这个上传也不需要开发者手动去一个个调用,而是 Modify 组件自触发的,要不然用户体验上去了,开发体验差了不是?

最后是修改成功后的内容变更。这个很多管理端的做法是修改完就直接调用页面刷新,确实方便了,但这一点也不酷(不针对某些一定需要刷新页面的需求)。最佳的做法是直接用上一步的 diff 结果在本地更新你的数据,这不仅能实现更低的请求,还能实现更多的事情(如变更数据的热提示)

查询

该功能要能够一定程度上的复用增改的表单组件,增改完之后要根据哪些字段查哪些数据,只要把对应字段的增改组件拿过来稍作修改就可以变成“查组件”,你只需要做这一步,剩下的事情交给管理端的路由去做,它能够动态根据“查组件”去修改页面请求的查询参数,也能根据查询参数去反填充“查组件”,原则是 “尽可能地将页面的状态映射在 URL 中”,这么做的好处是用户可以方便地将当前页面连同状态给分享出去。

这里,你应当实现一个响应页面 Query 变化的回调(类似于 Vue 的生命周期函数,建议通过组件级的 Mixin 来实现,同时要考虑到 keepAlive 页面的情况防止误触发)和一个能够方便同步页面 Data 和 Query 的方法(修改任何一方,另一方会同步变化,当然该方法还会涉及到很多诸如类型转化,其它 Query 字段是否保留,自触发过滤等细节问题)。之后类似于分页,查询这种功能,就可以抽象为修改页面的 Query,然后在该回调中直接利用回调的 Query 参数去获取数据即可。不过值得注意的是,如果你的页面有多个查询业务,比如某页面既有用户查询,又有产品查询,那用户的查询参数变更显然不应该触发产品查询,解决办法是可以给回调增加一个 QueryDiff 参数,各个查询在发起请求之前都先判断是否自己的 Query 字段是否在 QueryDiff 中


 上一页

 评论