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

引言

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

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

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

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

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

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年游戏主程一起学习设计模式

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

知识付费专栏

相关推荐
As977_几秒前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189112 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾4 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu6 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym11 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫12 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫16 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat17 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app