TypeScript设计模式之职责链、状态
2017-03-13 09:47
197 查看
看看用TypeScript怎样实现常见的设计模式,顺便复习一下。
学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想记住就好。
这里尽量用原创的,实际中能碰到的例子来说明模式的特点和用处。
先建立一个抽象Handler类,包含一个发送请求的sendReqeust以及用来链式处理的innerHandler:
实现第一个Handler类:
再实现第二个Handler类:
把两个HttpHandler连起来
输出:
处理的顺序就是 1221,中间是真正取数据的,这就是管道处理最基本的代码,用到的就是职责链模式。
当然职责链的形成有很多方式,这里采用的是装饰手段,保存下一个的引用的方式来形成一个链表,还可以采用队列或栈方式保存所有handler,按顺序执行。
大家都玩过游戏,控制游戏的主角时鼠标左键可以是移动,遇到怪时点击左键是攻击,遇到NPC时是对话。
下面就以这点简单实现个状态模式:
角色和状态的接口,状态只需要处理当前状态需要做的事:
角色的具体实现:
状态的具体实现,分为移动状态,攻击状态,对话状态:
使用:
这样随着状态的变化,点击左键做不同的事。
对于由谁来驱动状态变化可以根据实际情况来考虑,简单的话直接放角色里面就行,由角色自己决定自己的状态,复杂的话可以考虑用表来驱动状态机,通过表过实现状态的跳转。
学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想记住就好。
这里尽量用原创的,实际中能碰到的例子来说明模式的特点和用处。
职责链模式 Chain of Responsibility
特点:可以让一个请求被不同的对象处理多次,请求像经过管道一样, 一路上都可以被拦下处理。
用处:当请求需要被链式处理时,可以考虑职责链模式,比如事件的冒泡,WebApi的管道Handler等。
注意:链的实现。
WebApi的handler可能大家有用过,对发出去的请求和请求回来的数据都可以用自定义handler在发出前或最终回来前进行处理,非常方便,下面用TypeScript来简单实现一个HttpHandler:先建立一个抽象Handler类,包含一个发送请求的sendReqeust以及用来链式处理的innerHandler:
abstract class HttpHandler{ constructor(protected innerHandler: HttpHandler){} async sendRequest(req: string): Promise<string>{ if(this.innerHandler){ return await this.innerHandler.sendRequest(req); } else { let res = `response`; console.log(res); return res; } } }
实现第一个Handler类:
class FirstHttpHandler extends HttpHandler{ async sendRequest(req: string): Promise<string>{ req = `<req1>${req}</req1>`; // 把请求包一下 console.log(req); let res = await super.sendRequest(req); res = `<res1>${res}</res1>`; // 把结果包一下 console.log(res); return res; } }
再实现第二个Handler类:
class SecondHttpHandler extends HttpHandler{ async sendRequest(req: string): Promise<string>{ req = `<req2>${req}</req2>`; // 把请求包一下 console.log(req); let res = await super.sendRequest(req); res = `<res2>${res}</res2>`; // 把结果包一下 console.log(res); return res; } }
把两个HttpHandler连起来
let httpHandler = new FirstHttpHandler(new SecondHttpHandler(undefined)); console.log('start') httpHandler.sendRequest('request').then(res=>console.log('finish'));
输出:
start <req1>request</req1> // 发请求前先在FirstHttpHandler里处理request <req2><req1>request</req1></req2> // 在SecondHttpHandler里再次处理request response // 返回数据 <res2>response</res2> // SecondHttpHandler对返回数据的第一次处理 <res1><res2>response</res2></res1> // FirstHttpHandler对返回数据的第二次处理 finish
处理的顺序就是 1221,中间是真正取数据的,这就是管道处理最基本的代码,用到的就是职责链模式。
当然职责链的形成有很多方式,这里采用的是装饰手段,保存下一个的引用的方式来形成一个链表,还可以采用队列或栈方式保存所有handler,按顺序执行。
状态模式 State
特点:通过状态来改变对象的行为。
用处:当对象的行为取决于它的状态或者有很多if else之类的是由状态控制的时候可以考虑状态模式,如常见的状态机。
注意:状态是由谁来转换。
下面用TypeScript简单实现一下状态模式:大家都玩过游戏,控制游戏的主角时鼠标左键可以是移动,遇到怪时点击左键是攻击,遇到NPC时是对话。
下面就以这点简单实现个状态模式:
角色和状态的接口,状态只需要处理当前状态需要做的事:
interface Role{ name: string; click(); changeState(state: State); } interface State{ handle(role: Role); }
角色的具体实现:
class Player implements Role{ private state: State; constructor(public name: string){ } click(){ if(this.state){ this.state.handle(this); } } changeState(state: State){ this.state = state; console.log(`change to ${this.state.constructor.name}`); } }
状态的具体实现,分为移动状态,攻击状态,对话状态:
class MoveState implements State{ static readonly instance = new MoveState(); handle(role: Role){ console.log(`${role.name} is moving`); } } class AttackState implements State{ static readonly instance = new AttackState(); handle(role: Role){ console.log(`${role.name} is attacking`); } } class TalkState implements State{ static readonly instance = new TalkState(); handle(role: Role){ console.log(`${role.name} is talking`); } }
使用:
let player = new Player('brook'); player.changeState(MoveState.instance); player.click(); player.changeState(AttackState.instance); player.click(); player.changeState(TalkState.instance); player.click(); //输出: change to MoveState brook is moving change to AttackState brook is attacking change to TalkState brook is talking
这样随着状态的变化,点击左键做不同的事。
对于由谁来驱动状态变化可以根据实际情况来考虑,简单的话直接放角色里面就行,由角色自己决定自己的状态,复杂的话可以考虑用表来驱动状态机,通过表过实现状态的跳转。
相关文章推荐
- TypeScript设计模式之职责链、状态
- 设计模式 - 状态模式、职责链模式
- 设计模式 - 状态模式、职责连模式
- 与状态模式相似的设计模式---职责链模式
- 设计模式学习笔记(二十二)——State状态
- 交互设计与状态模式,兼谈几个失败的设计
- [设计模式] 22.State 状态模式
- 23种经典设计模式的java实现_5_职责链模式
- [★] .NET 偶尔连接的设计策略 -联机状态- 脱机模式- 数据同步
- 设计模式袖珍版 连续转载之 - Chain of Responsibility(职责链)
- 设计模式之Chain of Responsibility(职责链)
- 乐在其中设计模式(C#) - 状态模式(State Pattern)
- 乐在其中设计模式(C#) - 状态模式(State Pattern)
- 设计模式----Chain of Responsibility(职责链)模式
- 23种经典设计模式的java实现_5_职责链模式
- 设计模式之职责链(chain of responsibility)---对象行为型模式
- 设计模式(17)-状态模式(State)
- 设计模式(19)-状态模式(State)
- 设计模式----State(状态)模式
- 设计模式之Chain of Responsibility(职责链)