Cocos Creator中建设全局变量（TypeScript)

'# Cocos Creator中建设全局变量（TypeScript）

一、背景与问题

在Cocos Creator开发中，我们常常需要在多个场景、组件之间共享数据。例如：

游戏中的全局分数
玩家的存档信息
系统配置参数
音效开关状态

传统做法中，开发者可能会直接使用global变量或静态类。然而这种方式存在以下问题：

耦合度高：全局变量容易导致代码耦合，难以维护
状态不一致：多个组件同时修改时容易引发数据不一致
生命周期管理困难：无法控制变量的初始化和销毁时机
安全性问题：任意组件可直接修改数据，缺乏访问控制

本文将深入探讨如何在TypeScript中构建安全、可维护的全局变量系统，并分析不同实现方式的优劣。

二、基本原理

在Cocos Creator中，全局变量的构建需要考虑以下核心要素：

单例模式：确保全局变量的唯一性
生命周期管理：与场景生命周期同步
访问控制：提供安全的访问接口
数据持久化：支持跨场景/关卡的持久化存储

三、环境准备

确保你的开发环境满足以下要求：

Cocos Creator 3.x
TypeScript 4.2+
基础的Cocos Creator项目结构

四、核心实现

1. 单例模式实现（推荐方案）

// GlobalData.ts
export default class GlobalData {
    private static instance: GlobalData;
    
    private _score: number = 0;
    private _isSoundOn: boolean = true;
    private _config: Record<string, any> = {};

    private constructor() {
        // 初始化配置
        this._config = {
            version: '1.0.0',
            apiBaseURL: 'https://api.example.com'
        };
    }

    public static getInstance(): GlobalData {
        if (!GlobalData.instance) {
            GlobalData.instance = new GlobalData();
        }
        return GlobalData.instance;
    }

    public get score(): number {
        return this._score;
    }

    public set score(value: number) {
        this._score = value;
    }

    public get isSoundOn(): boolean {
        return this._isSoundOn;
    }

    public set isSoundOn(value: boolean) {
        this._isSoundOn = value;
    }

    public get config(): Record<string, any> {
        return this._config;
    }

    public updateConfig(key: string, value: any): void {
        this._config[key] = value;
    }
}

关键代码解释：

使用静态属性instance确保全局唯一性
使用getter/setter实现封装
getInstance方法控制实例创建时机
_config使用Record类型保证类型安全

2. 基于EventTarget的事件驱动模式

// GlobalEvent.ts
import { _decorator, Component, EventTarget } from 'cc';

@_decorator.ccclass('GlobalEvent')
export class GlobalEvent extends Component {
    private static eventTarget: EventTarget = new EventTarget();

    public static emit(eventName: string, data?: any): void {
        this.eventTarget.emit(eventName, data);
    }

    public static on(eventName: string, callback: (data: any) => void): void {
        this.eventTarget.on(eventName, callback);
    }

    public static off(eventName: string, callback?: (data: any) => void): void {
        this.eventTarget.off(eventName, callback);
    }
}

适用场景：

需要监听数据变化的场景
需要解耦数据源和使用方
需要支持异步更新

3. 基于Singleton的持久化存储

// PersistentStorage.ts
import { _decorator, Component, EventTarget } from 'cc';

@_decorator.ccclass('PersistentStorage')
export class PersistentStorage extends Component {
    private static storage: Record<string, any> = {};

    public static save(key: string, value: any): void {
        this.storage[key] = value;
    }

    public static get(key: string): any {
        return this.storage[key];
    }

    public static clear(): void {
        this.storage = {};
    }
}

注意事项：

适用于需要跨场景/关卡保存的数据
不建议用于实时性要求高的场景
需要配合本地存储或服务器接口使用

五、完整案例

游戏分数管理系统

// ScoreManager.ts
import { _decorator, Component, EventTarget } from 'cc';
import GlobalData from './GlobalData';

@_decorator.ccclass('ScoreManager')
export class ScoreManager extends Component {
    private static instance: ScoreManager;

    private _currentScore: number = 0;

    public static getInstance(): ScoreManager {
        if (!ScoreManager.instance) {
            ScoreManager.instance = new ScoreManager();
        }
        return ScoreManager.instance;
    }

    public init(): void {
        // 从全局数据初始化
        this._currentScore = GlobalData.getInstance().score;
    }

    public addScore(points: number): void {
        this._currentScore += points;
        GlobalData.getInstance().score = this._currentScore;
        GlobalEvent.emit('scoreUpdated', this._currentScore);
    }

    public resetScore(): void {
        this._currentScore = 0;
        GlobalData.getInstance().score = this._currentScore;
        GlobalEvent.emit('scoreReset', this._currentScore);
    }
}

// GameScene.ts
import { _decorator, Component, Node } from 'cc';
import ScoreManager from './ScoreManager';

@_decorator.ccclass('GameScene')
export class GameScene extends Component {
    protected onLoad(): void {
        // 初始化分数管理器
        ScoreManager.getInstance().init();
        
        // 监听分数变化
        GlobalEvent.on('scoreUpdated', (score: number) => {
            console.log(`当前分数: ${score}`);
        });
    }
}

关键流程说明：

使用单例模式管理分数数据
通过事件系统通知分数变化
在场景加载时初始化数据
在游戏过程中更新分数
通过事件监听处理分数变化

六、源码解析

单例模式源码分析

public static getInstance(): GlobalData {
    if (!GlobalData.instance) {
        GlobalData.instance = new GlobalData();
    }
    return GlobalData.instance;
}

线程安全：在多线程环境下需要加锁
延迟初始化：首次调用时才创建实例
实例回收：需要手动调用destroy方法

事件驱动源码分析

public static emit(eventName: string, data?: any): void {
    this.eventTarget.emit(eventName, data);
}

事件类型：支持字符串和枚举类型
事件参数：支持任意类型数据
事件生命周期：事件处理函数需在组件销毁时注销

七、进阶使用

1. 增加类型安全

// GlobalData.d.ts
export declare class GlobalData {
    static getInstance(): GlobalData;
    get score(): number;
    set score(value: number);
    get isSoundOn(): boolean;
    set isSoundOn(value: boolean);
    get config(): Record<string, any>;
    updateConfig(key: string, value: any): void;
}

2. 增加访问控制

public set score(value: number) {
    if (value < 0) {
        throw new Error('分数不能为负数');
    }
    this._score = value;
}

3. 增加日志追踪

public set score(value: number) {
    console.log(`[GlobalData] score changed from ${this._score} to ${value}`);
    this._score = value;
}

八、性能与工程实践

1. 性能优化

避免频繁访问：使用缓存机制
减少全局变量：按需创建
使用弱引用：避免内存泄漏

2. 异常处理

try {
    GlobalData.getInstance().score = -100;
} catch (e) {
    console.error('设置分数失败:', e.message);
}

3. 安全风险

数据篡改：通过封装控制访问
信息泄露：敏感数据需加密存储
未授权访问：通过权限校验控制

4. 代码组织

src/
├── global/
│   ├── GlobalData.ts
│   ├── GlobalEvent.ts
│   └── PersistentStorage.ts
├── managers/
│   └── ScoreManager.ts
└── scenes/
    └── GameScene.ts

九、常见问题与踩坑

1. 单例未初始化

错误代码：

GlobalData.getInstance().score = 100;

问题： 在未调用getInstance前直接访问

解决：

const data = GlobalData.getInstance();
data.score = 100;

2. 事件未注销