商业管理系统前端开发的效率提升

本文着眼于业务开发，分享一种开发思维。

随着互联网不断发展，公司、部门、项目的规模越来越大，项目管理的复杂度也随之增高。提高内部管理效率，成为众多企业的强烈呼声。

CRM系统作为客户信息收集、管理、分析和利用的重要信息系统，提高开发和使用效率非常有必要。

转转商业团队CRM系统，经过一年多的开发和使用后，总结一套行之有效的前端开发策略。

这些策略包括

前后端接口规范

在前后端分离的今天，不同于刀耕火种时代的一张张页面，前端开发们构造的前端工程更像一只精美的容器，注入有效的接口数据后，就会呈现优异的交互表现。因此接口交互对前端工程至关重要。前后台的数据交流，也是消耗开发精力比较多的地方。

制定接口规范的好处：

商业团队这边制定规范主要有：

JSON作为数据交流主要方式，编码UTF-8

2.CORS作为跨域的主要方式
3.POST请求入参带入所有接口文档要求字段（不论是否为空）
4.GET请求入参数组以字符串","分隔
5.日期时间使用毫秒级别的字符串格式的时间戳
6.接口统一输出格式限制，包括，code，message，data三部分，code是本次处理的状态码，正常的进入前端业务逻辑，否则直接抛出 message提示，data是业务所需数据
7.所有的数组要求拥有唯一标识，没有以id辨别（主要用于React循环创造react dom元素）
......

规范还有很多和业务细节相关的，根据业务不同制定的也不同。

例如

表单交互（单选，多选，全选，级联等）
表格逻辑（选行，选列，排序等），
分页器逻辑（跳页，改页面容量，本页搜索，全页搜索）

这些都是比较常见，又很重要和容易出错的地方。通过良好的规范和默契，这些逻辑都能抽取公共的方法和组件，方便复用，开发效率自然得到提升。

架构逻辑和业务逻辑分离

对于一个大型CRM管理系统，业务不断发展迭代，代码量不断上升，如何维护已有逻辑和高效开发新业务是一个重要的问题。如果不能做到逻辑区分清晰，会导致开发业务时，逻辑复杂，容易遗漏和出错。改动维护公共逻辑时，又有高度耦合的业务代码，维护成本很高。所以在项目开发之初，就需要充分时间设计，并且不断优化区分

例子：之前商业CRM系统的权限获取是由业务页面处理，每次创建新的页面都要复制、引用权限逻辑，有的页面一开始不需要权限管理，后续的业务发展中又需要注入权限，导致二次开发，调试，需要新的测试和上线资源，维护成本高昂。经过优化改造后，我们将权限系统和菜单系统相结合，每次菜单变动后，自动获取新的权限并注入到当前的业务页面中。在以后的业务开发里，需要权限直接从props里获取，不需要其他代码引用，干净清爽，有效降低了权限方面的bug数量。

如图

一般的公共逻辑

菜单逻辑（获取，展示）
路由逻辑
权限注入
全局变量管理
埋点，错误监控
cookie、缓存管理
......

不同的业务有各自的特点，需要提取的公共逻辑各不相同。这些逻辑需要充分考虑，避免在业务开发中改动。如果已经除了划分不清的问题，也尽量抽出时间进行改造，长远来看，这些付出是值得的

建立模板

现在的后台管理系统中，大多使用了各种UI交互框架，比如antd design，element ui，iview等。这些框架都能提供组件上的交互支持，像下图中的输入框input，主要的数据展示table，及分页器pagination等，使用UI框架可以迅速搭建页面，开发页面的过程变成了组装组件的过程。商业FE团队在日常业务开发中，逐渐发现大多数组合都是相同的，比如这个列表页面，由头部表单，中部表格，分页器及操作弹窗组成，每个业务列表都是由这三部分组成的。业务的开发就是将各种组件组合起来，系统调试的过程。这种开发很多都是重复的，毫无营养的。