想看看大佬们怎么优雅地写弹框管理器?

引言

优雅的弹框管理器的实现思路。

最近 有小伙伴私信 我,提到有个弹框 的需求,想知道大佬们 怎么写得优雅

其实弹框管理器 的实现思路大同小异 ,也就是说,只要你懂了,你也是大佬

本文重点 介绍一下弹框管理器的实现思路 ,由于笔者没有遭住 广东断崖式降温,本文没有源码,请大家多多包涵。

我们先来分析一下小伙伴的需求

1.弹框需求

经过笔者的分析 ,小伙伴的需求看上去还比较简单,我们一起来看下有什么:

1.类似展示排行榜的弹框。

2.封装好,里面的内容可以自定义。

3.实现组件的弹出和关闭。

4.优雅。

那优雅的弹框管理器应该具备哪些功能呢?

2.优雅的弹框管理器

经过对小伙伴的需求分析 以及笔者的思考 ,优雅的弹框管理器可能具备以下功能:

1.模板化和模块化,即相同的核心内容封装在基类,自定义内容分模块实现。

2.缓存策略,即需要针对不同的弹框(只弹一次/频繁弹出)实行不同的缓存策略。

3.弹框队列,弹框在游戏中使用频繁且场景,避免弹框之间的冲突,我们需要通过队列管理。

4.优先级,用队列管理需要考虑优先级问题,让重要弹框优先弹出。

5.弹框资源管理,管理资源的加载与释放。

那我们应该怎么实现这些功能呢?

3.弹框流程

不着急 ,我们先来捋一下 弹框界面的开发以及弹框管理器使用的流程

  • 资源准备阶段
  • 弹框显示阶段
  • 弹框关闭阶段
  • 基类

下面一起来看看细节

4.具体细节

1.基类

基类 主要把通用 的一些内容整理 到一起,形成模板模块,主要有以下内容:

1.弹框动画,弹框一般都会带有动画,才不会显得突兀,可以设定一种样式、多种样式随机、多种样式选择。

2.显示流程,定义了显示的一个周期,包括初始化、数据填充、显示前的回调、播放动画、显示、显示后的回调。

3.关闭流程,定义了关闭的一个周期,包括关闭前的回调、播放动画、隐藏、关闭后的回调、通知管理器回收。

4.其他内容,是否是模态弹框(强制用户交互,不允许操作其他)等等。

2.弹框显示

细节如下:

1.队列,通过队列去管理弹框,解决游戏开发中弹框乱弹导致的失败或者顶掉。

2.队列持久化,可以将队列本地化存储,简易解决游戏开发中的一次性弹框在队列未弹就关闭游戏的情况,当然更稳妥可以存服务器。

3.弹框缓存,可以根据弹框的显示频繁程度去缓存弹框,减少资源的消耗。例如一次性弹框结束后直接回收,频繁弹框加入缓存不回收或者定时回收。

4.弹框资源 ,通过resources.load加载、instantiate实例化。

5.优先级,主要控制弹框显示顺序,即队列中的位置,可根据优先级进行排序插队。

2.弹框关闭

细节如下:

1.回收弹框,根据设定的缓存类型回收。

2.下一个弹框,关闭当前弹框后,需要检测队列是否还有弹框,弹出下一个。

3.挂起队列,如果有因为弹框立即显示导致关闭的弹框,加入挂起队列,弹框关闭后优先检测挂起队列并恢复弹框。

结语

以上就是笔者觉得 优雅的弹框管理器的实现思路,小伙伴们可吃瓜、可学习、可反驳、可私信交流

关于私信,欢迎 小伙伴们的私信 ,笔者都会认真地阅读和分析 ,并在力所能及 的范围内给大家进行解答 ,回答不一定能满意 ,但是笔者一定尽心尽力

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《贪吃蛇掌机经典》《填色之旅》《重力迷宫球》大家可以自行点击搜索体验。

实不相瞒,想要个在看 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

知识付费专栏

相关推荐
white-persist1 小时前
轻松抓包微信小程序:Proxifier+Burp Suite教程
前端·网络·安全·网络安全·微信小程序·小程序·notepad++
敲敲了个代码2 小时前
多标签页强提醒不重复打扰:从“弹框轰炸”到“共享待处理队列”的实战
java·前端·javascript·面试·架构
不想上班只想要钱3 小时前
动态类名在 <swiper-slide 的复制项中没有起作用的解决方法
前端·vue.js
weixin_395448913 小时前
tidl_import_mul_rmfsd_psd_u8_3x480x544_bise_raw_dynamic.txt
java·服务器·前端
Jinuss4 小时前
源码分析之React中updateContainerImpl方法更新容器
前端·react.js·前端框架
Mr Xu_4 小时前
Vue + Element Plus 实现前端导出 Excel 功能详解
前端·javascript·vue.js
仰泳之鹅5 小时前
【杂谈】使用Edge浏览器下载文件显示“Microsoft Defender SmartScreen 已阻止此不安全文件”的解决方法
前端·edge
万邦科技Lafite5 小时前
小红书评论数据一键获取,item_reviewAPI接口讲解
大数据·前端·数据库·chrome·电商开放平台
meng半颗糖6 小时前
vue3+tpescript 点击按钮跳转新页面直接通过链接预览word
前端·vue.js·word
击败不可能6 小时前
vue做任务工具方法的实现
前端·javascript·vue.js