circleslider

闲鱼会玩社区的重要阵地：会玩圈子今年年初已经上线啦~ 作为一款承载着「基于兴趣聚集同好人群」的社区型产品，相较于常规导购型产品来说，在业务复杂度、交互复杂度、性能体验稳定性要求上都要高出许多，像 多角色区分 、 嵌套滚动 、 多形态 Feeds 无限加载 、 颜文字等特殊字符处理 、 页面直开 、 视频播控 等场景都是导购场景很少遇到的。 本文将围绕着会玩圈子的前端设计、开发过程中遇到的典型问题进行介绍。 关键设计 如上图为会玩圈子的设计大图，可以看到整体的业务逻辑相对较为复杂。并且由于应用中存在 多种角色状态 ，不同角色的用户展示界面和操作逻辑也有差异点存在，前端同学进行开发上手的成本较高。 为了降低前端同学在开发过程中对于全局业务理解的成本，减少沟通中信息传递容易遗漏的问题。我们在设计之初首先进行了最小模块的拆分工作。以模块维度来分配相应的工作，将模块间存在数据共享和数据通信行为进行梳理拆解，以最优方式来分配数据状态维护的最小闭环，降低组件间耦合度。 1. 模块拆分 在此处定义的模块不是前端日常开发中所讲的模块组件拆分，而是能够独立闭环自成体系的一个业务单元。这样在项目过程中除了部分组件间数据传递需要做预先约定外，前端同学仅仅只需要专注于自己所负责的交互场景即可。 以圈子模块主页为例，根据设计稿我们将它拆分为了三个独立的业务模块： 圈子信息模块、信息流模块和浮层组件模块，