TGX联机对战框架 easy_ui_framework

一 UILayers

定义了Layer名称

enum UILayers {
    GAME,
    JOY_STICK,
    HUD,
    POPUP,
    POPUP1,
    POPUP2,
    ALERT,
    NOTICE,
    LOADING,
    OVERLAY,
    NUM
}
const UILayerNames = [
    'game',
    'joy_stick',
    'hud',
    'popup',
    'popup1',
    'popup2',
    'alert',
    'notice',
    'loading',
    'overlay'
];

二、UIController

UIController的功能有点类似this.node.on(TouchType,method, this)，起到了桥接事件监听与事件调用的作用

• 调用：由实现类提供，以UIEnterRoom为例，onButtonEvent()中的匿名方法就是事件的回到函数

  protected onCreated(): void {
      let layout = this.layout as Layout_UIEnterRoom;
      this.onButtonEvent(layout.btnClose, () => {
          this.close();
      });
  	this.onButtonEvent(layout.btnEnter, this.onBtnCreateClicked, this);
  }
  

• 桥接：btn.clickEvents = clickEvents可以理解为this.node.on()，而clickEvenets包含了上述的回调函数，即cb

  // 事件监听
  // 可以理解为 this.node.on(...)
  onButtonEvent(){
       ...;
      let agent = this.node.getComponent(__NodeEventAgent__);
      let btn = buttonNode.getComponent(Button);
      let clickEvents = btn.clickEvents;
      let handler = new EventHandler();
      handler.target = this.node;
      handler.component = 'tgxNodeEventAgent';
      handler.handler = 'onButtonClicked';
      handler.customEventData = '' + UIController._idBase++;
      //附加额外信息 供事件转发使用
      handler['$cb$'] = cb;
      handler['$target$'] = target;
      handler['$args$'] = args;
      btn.clickEvents = clickEvents;
  }
  

#三、 __NodeEventAgent__

实现了事件分发，UIController中注册了一堆事件的监听，NodeEventAgent通过h.customEventData筛选出事件对应的回调

onButtonClicked(evt: EventTouch, customEventData) {
    ...;
    for (let i = 0; i < clickEvents.length; ++i) {
        if (h.customEventData == customEventData) {
            let cb = h['$cb$'];
            let target = h['$target$']
            let args = h['$args$'];
            cb.apply(target, [btn, args]);
        }
    }
    ...;
}

#四、 事件监听及回调分发流程图