0到1：闲鱼高复杂度高性能社区圈子开发实录

闲鱼会玩社区的重要阵地：会玩圈子今年年初已经上线啦~

作为一款承载着「基于兴趣聚集同好人群」的社区型产品，相较于常规导购型产品来说，在业务复杂度、交互复杂度、性能体验稳定性要求上都要高出许多，像多角色区分、嵌套滚动、多形态 Feeds 无限加载、颜文字等特殊字符处理、页面直开、视频播控等场景都是导购场景很少遇到的。

本文将围绕着会玩圈子的前端设计、开发过程中遇到的典型问题进行介绍。

关键设计

如上图为会玩圈子的设计大图，可以看到整体的业务逻辑相对较为复杂。并且由于应用中存在多种角色状态，不同角色的用户展示界面和操作逻辑也有差异点存在，前端同学进行开发上手的成本较高。

为了降低前端同学在开发过程中对于全局业务理解的成本，减少沟通中信息传递容易遗漏的问题。我们在设计之初首先进行了最小模块的拆分工作。以模块维度来分配相应的工作，将模块间存在数据共享和数据通信行为进行梳理拆解，以最优方式来分配数据状态维护的最小闭环，降低组件间耦合度。

1. 模块拆分

在此处定义的模块不是前端日常开发中所讲的模块组件拆分，而是能够独立闭环自成体系的一个业务单元。这样在项目过程中除了部分组件间数据传递需要做预先约定外，前端同学仅仅只需要专注于自己所负责的交互场景即可。

以圈子模块主页为例，根据设计稿我们将它拆分为了三个独立的业务模块：圈子信息模块、信息流模块和浮层组件模块，他们无论从功能上还是展示上都完全不同。

• 圈子信息模块： 偏展示型模块。交互较少，根据业务数据展示相应的信息模块内容，需要根据用户当前的身份展示不同类型的模块组件，并且可以根据当前用户的身份来进行权限校验，在未符合时进行友好Tip提示的能力。
• 信息流模块࿱