Egret开发笔记[七]:解耦方式之，挂接解耦

需求

首先，需求是这样的。战斗结算界面（就是战斗结束后会有一个界面显示这场战斗的得失）要显示一些东西。
这些东西并不是固定的，比如，今天有可能要显示“国庆快乐”，明天又是要显示一幅图。
此处将会举例显示一个组件，因为组件上可以放任何你需要显示的东西。

难点

如果需要显示什么，就手动在这个界面上，加什么。那么后面要改变的时候，也同样需要手动修改。甚至如果不需要显示的时候，还要手动删除，这样的维护成本很高。
so

思路

1. 写一个接口 interface IResultAdd ,这个接口有两个方法，一个是 update() 方法，这个方法就是当战斗结算界面出现的时调用，还有一个方法是 onPageRemoved() 方法，这个方法是当战斗结算界面要关闭的时候调用的
2. 需要在战斗界面显示东西的类，就要来实现这个接口，在 update() 方法中将自己需要添加的东西添加进去，所以这个方法是需要参数的，其中一个参数就是战斗结算界面 CombatResultUI，将战斗结算界面传进来，就可以随心所欲在上面添加东西，当然有时候还需要知道一些其他的东西，比如战斗胜负，我们需要通过胜负添加不同的东西。所以接口类应该这么写

interface IResultAdd{
    update(p_resWin:CombatResultUI,p_data:any):void;
    onPageRemoved():void;
}

3.战斗结算界面要持有一个 IResultAdd 数组，因为有可能同时有多个地方在战斗结算时要添加显示。当战斗结算界面出现时遍历 IResultAdd 数组，调用每一个 update() 方法，并将自身传递过去，以及相关数据 p_data。当战斗结算界面即将关闭的时候再依次调用 onPageRemove() 方法即可
4.战斗结算界面需要维护这个 IResultAdd 数组，得有添加数组元素以及移除数组元素的方法。

//IResultadd 数组，所有需要在战斗结算时显示东西的类都添加到这个数组
private static _addList: IResultAdd[] = [];
//挂接方法，添加进数组的方法
//参数就是实现了 IResultAdd 接口的那个类
public static addHookList(hookClass: IResultAdd): void
{
	this._addList.push(hookClass);
}
//有添加的方法就要有移除的方法
public static removeHookList(hookClass: IResultAdd): void
{
	this._addList.splice(this._addList.indexOf(hookClass), 1);
}

实现

那么这个三个类应该有如下代码

1. 接口类 IResultAdd

interface IResultAdd {
    update(p_resWin:CombatResultUI,p_data:any):void;
    onPageRemoved():void;
}

2. 战斗结算界面 CombatResultUI

class CombatResultUI
{
	//构造方法
	public constructor() 
	{
	}

	//当战斗结算界面更新时，会调用此方法
	public updateView()
	{
		//遍历数组，执行所有方法
		let len: number = CombatResultUI._addList.length;
		for( let i = 0; i < len; i ++)
		{
			let hook: IResultAdd = CombatResultUI._addList[i];
			hook.update(this, this.data);
		}
	}
	
	//当战斗结算界面即将关闭时，会调用此方法
	public dispose()
	{
		//遍历数组，执行所有方法
		let len: number = CombatResultUI._addList.length;
		for( let i = 0; i < len; i ++)
		{
			let hook: IResultAdd = CombatResultUI._addList[i];
			hook.onPageRemoved();
		}
	}
	
	//IResultadd 数组，所有需要在战斗结算时显示东西的类都添加到这个数组
	private static _addList: IResultAdd[] = [];
	//挂接方法，添加进数组的方法
	//参数就是实现了 IResultAdd 接口的那个类
	public static addHookList(hookClass: IResultAdd): void
	{
		this._addList.push(hookClass);
	}
	//有添加的方法就要有移除的方法
	public static removeHookList(hookClass: IResultAdd): void
	{
		this._addList.splice(this._addList.indexOf(hookClass), 1);
	}
}

3. 需要在战斗结算界面添加东西的类，User

class User implements IResultAdd
{
	//构造方法
	public constructor() 
	{
	}
	//实现接口
	//战斗结算界面会调用此方法，并将自身传过来
	update(p_resWin:CombatResultUI,p_data:any):void
	{
		//这是需要添加到战斗结算界面的组件
		let iWant: compoment = new compoment ();
		//实用 addChild 方法把组件添加到战斗结算界面，任务完成
		p_resWin.addChild(iWant);
	}
    onPageRemoved():void
    {
    	//如果不需要再关闭战斗结算界面时做什么，这个方法可以不写东西
    }
}

4. 最后一步，谁来挂接
   什么时候需要挂接上去了，就什么时候挂接，这就很松了，要取消挂接也有对应的方法，就很舒服。

class Hanger1
{
	//构造方法
   public constructor() 
   {
   	CombatResultUI.addHookList(this._user1);
   }
   dispose(): void
   {
   	CombatResultUI.removeHookList(this._user1);
   }
   private _user1: User  = new User ();
}
 class Hanger2
{
	//构造方法
   public constructor() 
   {
   	CombatResultUI.addHookList(this._user2);
   }
   dispose(): void
   {
   	CombatResultUI.removeHookList(this._user2);
   }
   private _user2: User  = new User ();
}