美团众包,美团外卖商家版
项目介绍 : 负责的项目模块包括骑手端和商家端。骑手端用于骑手领任务、做任务、金币详情、购买产品以及使用订单;商家端用
于商家预览不同套餐的配送范围。
技术栈: React React Native Redux TypeScript Roo(美团内部组件库) vite webpack
项目实现:
使用递归将多维树形结构数组转成扁平数组实现渲染每层数据。完成商家点击选择不同层级套餐组合方案,在美团地图上预览相应
的配送范围,方便商家进行最终选择。
技术要点:
1、基础架构桥能力升级,桥方法几乎覆盖项目的所有业务,加上桥在RN架构中处于核心部位,整个项目迁移可能导致线上出现不
可预估的风险
解决方案:
针对此次桥迁移进行业务稳定性建设并产出文档,主要关于从 核心链路分析 -> 自定义监控指标 -> 上报埋点,上报日志 -> 告警配
置 -> 降级方案设计,保证上线出问题能及时排查出问题。最后顺利完成迁移,无线上事故。
2、在商品等模块长列表中,需要在一页滚动查看数据,一次性渲染大量数据时,出现卡顿问题。
解决方案:
针对下拉框等长列表一次性渲染大量数据(超过1000+)出现浏览器卡顿问题,由于项目中的特定需求,我们采用封装 虚拟列表 进
行处理,一次性只渲染可视区。
acChat 项目地址:(点击查看)
项目介绍 : 该项目是一个基于 WebSocket 的即时通讯系统,每个用户登录上线都能实时告知其他用户。用户之间可以实时发消
息,查看历史聊天记录。
技术栈: Vue Vuex ElementUI WebSocket
项目实现:
1、前端使用 Vue 开发,结合 ElementUI 实现了登陆注册页,聊天室页面,在线用户列表渲染,在线用户关键词搜索功能。
2、服务端使用 node,实现登录验证,获取在线人数,发送接收消息的功能。
3、结合 mixins 属性,提取复用率高的代码作为公共方法,减少项目代码冗余,封装复用组件和公共方法。
技术要点:
1.聊天发送按钮连续点击发送按钮导致重复发送消息,增加服务器压力和网络带宽消耗;
解决方案: 对发送使用节流技术限制发送频率,确保一定时间内只触发一次发送操作,提高系统稳定性和用户体验。
2.在聊天中由前端发起的 HTTP 请求出现了无法实时显示与不同在线好友的聊天记录以及无法渲染在线好友的情况。
解决方案: 采用 socket.io 实现客户端和服务端的实时通信,解决了实时显示聊天记录和在线好友列表的问题,提升了用户体验