组件与扩展管理器的 extraData

在 Short Night 的世界里，有2个“非法之地”可以供 Timeline 作者为所欲为。

• 扩展管理器的 .extraData：所有 Component 都共享的一个对象
• 组件内部的 .extraData：每个 Component 独立的一个对象

比如我想要统计每个 Component 被调用.apply()的次数，那么这时就应该使用每个 Component 内的.extraData。有2个方式实现：

• 1. 通过新增一个扩展
• 1. 通过在每个 Component 的 apply() 中增加逻辑

显然应该通过扩展来解决。代码如下：

import { Extension, ExtensionManager } from 'short-night/extensions';
import { Component } from 'short-night';
import { ExtraData } from 'short-night/common/Component';

declare module 'short-night/common/Component' { // 声明 Component 下的 ExtraData 新增一个属性
    export interface ExtraData {
        applyCount? :number;
    }
}

export default class ApplyCounter implements Partial<Extension> {
    constructor(public etx:ExtensionManager) {}

    async onApply(comp:Component) {
        if ('applyCount' in comp.extraData) {
            comp.extraData.applyCount!++;
        } else {
            comp.extraData.applyCount = 1;
        }
    }

    onDraw (comp:Component){
        console.log(`${comp.name}: ${comp.extraData.applyCount}`);
    }
}

上边的需求的统计“每个 Component 被调用.apply()的次数”，如果我想统计全部 Component 的总和呢？那么这时候就需要用ext.extraData了。代码如下：

import { Extension, ExtensionManager } from 'short-night/extensions';
import { ExtraData } from 'short-night/extensions';
import { Component, Timeline } from 'short-night';

declare module 'short-night/extensions' { // 声明 ext 下的 ExtraData 新增一个属性
    export interface ExtraData {
        applyCountAll? :number;
    }
}

export default class ApplyCounter implements Partial<Extension> {
    constructor(public etx:ExtensionManager) {
        this.etx.extraData.applyCountAll = 0;
    }

    async onApply(comp:Component) {
        this.etx.extraData.applyCountAll!++;
    }

    onDraw(comp:Component) {
        if (Timeline.is(comp)) { // 保证只打印一次
            console.log(`amount: ${this.etx.extraData.applyCountAll}`);
        }
    }
}