目录图片缓存框架设计简单介绍阅读时长统计复杂页面架构客户端整体架构设计图片缓存框架如何设计一个图片缓存框架首先我们要有一个管理者用于管理内存和磁盘上图片的存储然后还可以通过网络请求图片同时我们还需要一个解码的管理者用于图片解码和图片解压缩图片如何进行读写过程是怎样的我们可以使用图片URL的单向哈希值作为KEY流程如上依次通过内存磁盘网络进行获取内存上的设计需要注意哪些问题内存存储的空间大小我们可以通过图片使用的频次和图片的大小来设计对应的size我们可以使用队列这个数据结构来组织图片的存储淘汰策略这里可以使用多种方案这里介绍两种1. 队列先进先出的方式进行淘汰 2. LRU算法淘汰如在30分钟内是否使用过检查策略可以使用上述几种。其中定时检查不建议使用这里只是作为一种方法介绍在使用一个方法的时候我们一定要注意开销磁盘设计要注意什么问题磁盘的特点就是磁盘空间大读取效率低存储方式大小限制淘汰策略网络设计注意问题图片请求最大并发量同一时间请求的最大并发数量需要加以限制请求超时的策略如果发生超时一般我们选择再进行尝试如果再失败则放弃对于上层使用一张默认图片作为请求失败的默认显示请求优先级判断我们当下请求的图片是否是经常使用的来判断当前优先级图片编解码对于不同格式的图片图片解码我们使用什么来做我们可以使用策略模式对不同图片格式进行编解码在哪个阶段我们进行图片解码处理这里认为可以在磁盘读取后 和 网络请求返回后整体图片缓存框架的图片存储这里仅介绍一下我认为的处理方式如果内存中存在直接返回结果即可如果内存中不存在在磁盘中查找查找成功返回结果并存储到内存如果磁盘中查找不到进行网络请求网络请求返回后先存储到磁盘然后再从磁盘中解码拿到内存阅读时长统计问题如何设计一个时长统计框架面向上层业务页面适配 APP 内全部阅读交互场景对外提供统一调用入口页面式 适配分页阅读场景小说章节翻页、资讯分页以单页为计时单元触发时机页面可见 / 页面消失、翻页切换自动计算单页停留有效时长。流式 适配无分页长文本信息流、无限下拉小说分段滑动计时页面滑动暂停、切后台、退出时截断当前阅读时长片段。自定义式 开放给业务自定义场景弹窗阅读、局部浮窗、活动专题模块等非常规阅读场景由业务主动调用接口传入起止时间、业务标识。处理中心作为埋点数据统一调度中心负责内存缓冲、本地持久化、网络上报隔离业务层与 IO / 网络操作记录缓存内存队列短时缓冲埋点避免频繁磁盘 IO聚合合并同一章节多条短时记录减少上报条数节流策略攒满 N 条 / 间隔 X 秒再批量落盘。磁盘存储本地持久化SQLite / 二进制文件解决断网、APP 杀进程、崩溃丢失数据问题自动清理策略删除 7 天以上过期记录、超出容量阈值时先进先出删除旧数据上传器管控网络上报策略区分 WiFi / 移动网络动态开关上报批量打包上传失败指数退避重试服务端回执上传成功后删除本地对应磁盘记录断网时暂停恢复网络自动补发。复杂页面架构设计整体架构我们以微博的架构来作为案例进行讲解这套架构严格遵循分层单向依赖原则自底向上分为三层数据层EngineModel→ 业务逻辑层ViewModel→ 视图层ViewControllerView视图层view viewControllerview只接收上层传入的UI 专用渲染数据imageObj、label 富文本对象、按钮状态标记内部不做数据格式化、时间转换、富文本拼接用户点击、滑动、输入等交互事件不自行处理通过闭包 / 代理回调抛给上层 ViewController不直接持有 ViewModel。viewController是视图层和业务层的桥梁数据订阅监听 ViewModel 对外暴露的 UI 数据信号Combine/RxSwift 响应式信号收到新数据后刷新 TableView/CollectionView事件转发接收 View 抛上来的用户操作点赞、下拉刷新、点击头像、转发微博将指令转发给 ViewModel自身不实现业务业务逻辑层viewModelviewModel是业务逻辑唯一收敛层隔离视图层与底层数据层承担「数据转换」「业务处理」两大核心工作全程不依赖任何 UI 控件可脱离页面单独单元测试。数据层Engine Model数据层是架构最底层负责原始数据的获取、解析、持久化向上仅输出标准化业务 Model屏蔽网络、数据库底层细节。拆分为 Engine 数据引擎、业务Model 领域实体两部分。数据流网络数据一般情况下由server通过jsonkey - Value传递业务层使用id type对数据进行区分ViewModel接收业务 Model将其转换为UI 专用渲染数据UI 数据交给ViewController最终绑定渲染到View页面。同时沿着这条链路可以进行反向更新用户在 View 上产生交互事件先回调到 ViewControllerVC 将交互指令转发给 ViewModel然后ViewModel 执行对应逻辑包括本地修改和网络操作总结MVVM框架介绍model作为纯粹的数据载体数据变更通过绑定通知 ViewModelviewModel收敛全部业务逻辑监听 Model 的原始数据预处理为适配页面渲染的 UI 专用数据view层接收上层传入的 UI 渲染数据完成页面绘制同时捕获用户点击、滑动、输入等交互事件通过回调抛给 ViewController再由viewController转发进行业务处理RN数据流思想客户端总体架构设计独立于App的通用层比如时长统计的框架网络的第三方库等通用业务层比如自定义的一个UI自定义的一个组件中间层协调和解耦的作用业务之间的解耦方式openURL用字符串路由地址做中间隔离层统一路由中心分发请求。依赖注入通过中间层使用某一方法获取遵循某一协议的实例