TypeScript设计模式之职责链、状态

看看用TypeScript怎样实现常见的设计模式,顺便复习一下。 学模式最重要的不是记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

这样随着状态的变化,点击左键做不同的事。 对于由谁来驱动状态变化可以根据实际情况来考虑,简单的话直接放角色里面就行,由角色自己决定自己的状态,复杂的话可以考虑用表来驱动状态机,通过表过实现状态的跳转。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Android开发者怎么能不会写后台接口呢?

然后在src下创建三个包,一个放Servlet,一个放mysql的工具类,一个放对象;

632
来自专栏老付的网络博客

爬取菜鸟裹裹的数据

菜鸟裹裹是阿里旗下的一个物流数据的整合平台,数据准确、及时.前几天在关注菜鸟和顺丰的争端,因为在前一天我刚刚爬到菜鸟上面的快递数据,第二天看到二者出现了摩擦,在...

842
来自专栏美团技术团队

Android漏洞扫描工具Code Arbiter

目前Android应用代码漏洞扫描工具种类繁多,效果良莠不齐,这些工具有一个共同的特点,都是在应用打包完成后对应用进行解包扫描。这种扫描有非常明显的缺点,扫描周...

63313
来自专栏Android机器圈

Java设计模式总汇二(小白也要飞)

PS:上一篇我介绍了适配器设计模式、单例设计模式、静态代理设计模式、简单工厂设计模式,如果没有看过第一篇的小火鸡可以点这个看看http://www.cnblog...

3409
来自专栏Hadoop实操

如何开发HBase Endpoint类型的Coprocessor以及部署使用

1662
来自专栏偏前端工程师的驿站

asp.net 解码gb2312下urlencode后的字符串

公司网站前期的网页用了gb2312保存用户数据,而我负责的部分用的是utf8,今天恰好要获取前期录入的数据于是毫无悬念地出现乱码问题,经过一番网上的搜索还是找不...

1905
来自专栏社区的朋友们

当我们在谈论 memory order 的时候,我们在谈论什么

C++ 11 与 JDK 1.9 都新增了对 memory order 的支持,对于 memory order 这个概念,本文试图阐述清楚与它相关的问题的由来,...

9711
来自专栏阿杜的世界

《七周七并发模型》阅读笔记(一)一、线程与锁——第一天二、线程与锁——第二天三、线程与锁——第三天

线程与锁模型其实是对底层硬件运行过程的形式化,这种形式化既是该模型最大的优点,也是它最大的缺点。我们借助Java语言来学习线程与锁模型,不过内容也适用于其他语言...

992
来自专栏积累沉淀

Java批处理

批处理 JDBC对批处理的操作,首先简单说一下JDBC操作sql语句的简单机制。 JDBC执行数据库操作语句,首先需要将sql语句打包成为网络字...

3395
来自专栏java 成神之路

InetAddress 解析

4088

扫码关注云+社区