麒麟子开源框架 OpenTGX 更新-2024602|新特性和易用性增强

Creator 3.x
#1

image

为了不乱改，我自己也是走的 PR 流程，OPENTGX 最新仓库地址：
https://github.com/qilinshuyuan/OpenTGX

如果觉得不错的话，请大家给个star：
image

作为一个通用的框架，OpenTGX 版本会以小而美作为发展方向。主要解决模块管理、UI管理、项目协同等问题。

TGX 的衍生案例，则会解决更多不同场合下的应用问题，请参观 TGX 系列作品：https://store.cocos.com/app/search?name=tgx

所有使用 OpenTGX 开发产品的朋友，请联系我，加入案例库。

这次的更新主要是做了易用性方面的调整。

1、添加 tgx_class 装饰器

添加了 tgx_class(模块名[,父类名]) 装饰器来注册 UI 类，旧的 tgxModuleContext.attachImplClass 已弃用，现在只需要像下面这样注册就行

//普通 UI
@tgx_class('basic')
export class MyUI extends tgx.UIController{
}

//实现父类UI
@tgx_class('basic',SuperClass)
export class MyUI extends SuperClass{
}

2、支持 UI 显示时传参

调用 tgx.UIMgr.inst.showUI 的时候，支持传入自定义参数，方便做UI初始化。

tgx.UIMgr.inst.showUI(MyUI,null,null,{a:1,b:2,c:3});

3、移除 import 依赖

不再需要 import tgx 相关路径，让重构以及代码复用更方便，具体请参考 tgx.ts

4、访问方式变化

使用 tgx.xxxxx 来访问 tgx 相关类，弃用 tgxXXXX

  • tgxUIController - tgx.UIControler
  • tgxUIMgr.inst.showUI -> tgx.UIMgr.inst.showUI
  • tgxUIAlert.show -> tgx.UIAlert.show

5、其他若干细节修复

1、hide 变为 close，更准确表达 UI 会被销毁的含义
2、修复 UI 未load成功前就调用 close 无法隐藏的问题
3、使用双向链表替代数组，以解决在 update 或者事件回调过程中移除UI和事件的问题
4、UIController 添加 igonreCloseAll 标记，使某些UI可以跨场景显示。

希望大家使用 COCOS 越来越开心。

2赞
OpenTGX：麒麟子十年多的积蓄框架分享
2.4.x如何弄全局类
#2

大佬 问一个小问题 我用的2.x也是在一个Global.ts中定义了自己的namespace 集中import引入了框架的各个模块 然后挂载到全局并进行全局声明

思路是一样的

不过对于值和类型的引用我有过困惑 比方说

export const xxx: typeof XXX = XXX; //类
export type xxx = XXX; //类实例类型

我也尝试过const/let和type一起声明 但是遇到了个问题 就是vscode中ctrl+左键或者f12转到定义或转到实现 就会相互跳这两个东西 只能是shift+f12转到引用才能正常跳转代码 说实话挺不方便的…我更习惯ctrl+左键

所以最后我选择了引用值的话使用tgx.xx 引用类型(我自己是放了一些工具类型)需要导入使用__tgx__.xx 而类型注解的话还是使用typeof tgx.xx 另外类实例类型的话比较麻烦一点如果不想导入__tgx__ 得用InstanceType<typeof tgx.xx>

写的比较啰嗦但意思应该表达清楚了 :joy:

#3

构造函数和类型都导出了，直接用就行了，不需要再 typeof。这就是为什么有两行：

export const xxx: typeof XXX = XXX; //类的构造函数，用于实例化以及调用类的静态方法。 new xxx(); xxx.oooo
export type xxx = XXX; //类的类型，用于  let  t:XXXX

编写代码的时候，编译会根据情况帮你自动选择。

关于代码提示的问题：

我也尝试过const/let和type一起声明 但是遇到了个问题 就是vscode中ctrl+左键或者f12转到定义或转到实现 就会相互跳这两个东西 只能是shift+f12转到引用才能正常跳转代码 说实话挺不方便的…我更习惯ctrl+左键

见仁见智吧，在你的方案和我现在的方案中，我暂时选择了目前的方案，会让代码更简单些。
我打算先用一段时间， 如果实在不方便。 再来优化。

@972579559 回头一起探讨交流。

#4

类和实例我还是知道的 我自己也用过同时导出两行 也的确省去了很多typeof

我的问题是这样在vscode跳转定义或跳转实现的时候会相互跳 也就在原地了 只有跳转引用才能像我们平时跳转代码一样 稍微有那么点不方便 其实也不是问题哈

感谢大佬回复 :joy:

#5

嗯。各有优缺，先跑一段时间来看。

#6

const _tgx = {

SceneUtil

} as const;

(globalThis as any)[‘tgx’] = tgx;

// tgx.SceneUtil.loadScene

//下面是声明，编程时提示。

declare global {

const tgx: typeof _tgx;

}
感觉这样子写更加好一些，vscode跳转起来比较方便。写起来也比较简单

#7

嗯。这样写也可以。 但这样写，无法导出 type。
比如，你想写 let util:tgx.SceneUtil ，就会报错。

#8

大佬 热更新和网络相关的模块在哪呢

#9

突然发现大佬很像抖音网红杨惠三 :stuck_out_tongue_closed_eyes:

#10 
const __tgx__1 = {

    ISceneInfo,

    SceneUtil,

    AudioMgr

} as const;

(globalThis as any)['tgx'] = __tgx__1;

declare global {

    namespace globalThis {

        namespace tgx {

            export {

                ISceneInfo,

                SceneUtil,

                AudioMgr,

            }

        }

    }

}

可以这样子声明

2赞
#11

框架模块装namespace里 只需要把namespace挂到全局声明全局就好了

框架模块装{ }里再对每个模块进行声明 何必多此n举

#12

我试试，谢谢

#13

新版es2015更推荐module写法，方便扩展，维护

#14

module 写法除了 namespace 改为 module，还有其他区别吗？

#15

我们用了prettier,会疯狂报错，哈哈

#16

今天试了一下，这个写法超级棒。不仅写起来简单。也支持跳转到定义！
多谢多谢，学习啦！

#17

tgx_uiClass为什么要用js插件，直接用export function tgx_uiClass不可以吗？

#18

1、主要目的就是为了去除import依赖，方便重构管理。
2、用插件是因为，只有插件能够先于其他脚本加载，否则编辑器里会报错。

#19

仓库可以同步一份到gitee不？你懂的