重學(xué)設(shè)計(jì)模式

讀Design pattern implementations in TypeScript筆記。

十一種行為型設(shè)計(jì)模式

責(zé)任鏈模式

namespace ChainOfResponsibilityPattern {

    export class Handler {
        private handler: Handler;
        private req: number;

        constructor(req: number) {
            this.req = req;
        }

        public setHandler(handler: Handler): void {
            this.handler = handler;
        }

        public operation(msg: string, req: number): void {
            if (req <= this.req) {
                this.handlerRequest(msg)
            } else if (this.handler !== null && this.handler !== undefined) {
                this.handler.operation(msg, req);
            }
        }

        public handlerRequest(msg: string): void {
            throw new Error("Abstract method!");
        }
    }

    export class ConcreteHandler1 extends Handler {
        constructor(req: number) {
            super(req);
        }
        public handlerRequest(msg: string) {
            console.log("Message (ConcreteHandler1) :: ", msg);
        }
    }


    export class ConcreteHandler2 extends Handler {
        constructor(req: number) {
            super(req);
        }
        public handlerRequest(msg: string) {
            console.log("Message :: (ConcreteHandler2) ", msg);
        }
    }

    export class ConcreteHandler3 extends Handler {
        constructor(req: number) {
            super(req);
        }
        public handlerRequest(msg: string) {
            console.log("Message :: (ConcreteHandler3) ", msg);
        }
    }
}

意圖：使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求，從而避免請(qǐng)求的發(fā)送者和接收者之間的耦合關(guān)系。將這些對(duì)象連成一條鏈，并沿著這條鏈傳遞該請(qǐng)求，直到有一個(gè)對(duì)象處理它為止。
核心：

• Handler： 對(duì)請(qǐng)求的抽象處理者
• ConcreteHandler：請(qǐng)求的具體處理者，他們都繼承了setHandler方法，當(dāng)自己不處理這個(gè)請(qǐng)求的時(shí)候，會(huì)自動(dòng)把請(qǐng)求轉(zhuǎn)移到下一個(gè)handler去處理。

命令模式

namespace CommandPattern {
    export class Command {
        public execute(): void {
            throw new Error("Abstract method!");
        }
    }

    export class ConcreteCommand1 extends Command {
        private receiver: Receiver;

        constructor(receiver: Receiver) {
            super();
            this.receiver = receiver;
        }

        public execute(): void {
            console.log("`execute` method of ConcreteCommand1 is being called!");
            this.receiver.action();
        }
    }

    export class ConcreteCommand2 extends Command {
        private receiver: Receiver;

        constructor(receiver: Receiver) {
            super();
            this.receiver = receiver;
        }

        public execute(): void {
            console.log("`execute` method of ConcreteCommand2 is being called!");
            this.receiver.action();
        }
    }

    export class Invoker {
        private commands: Command[];

        constructor() {
            this.commands = [];
        }

        public storeAndExecute(cmd: Command) {
            this.commands.push(cmd);
            cmd.execute();
        }
    }

    export class Receiver {
        public action(): void {
            console.log("action is being called!");
        }
    }
}

核心：

• Command：抽象命令，具有執(zhí)行接口
• ConcreteCommand：具體命令，實(shí)現(xiàn)具體接口，調(diào)用接收者的功能來(lái)完成命令要執(zhí)行的操作。
• Receiver：接收者，真正執(zhí)行命令的對(duì)象，任何對(duì)象都可以成為接收者，只要實(shí)現(xiàn)了對(duì)應(yīng)接口。
• Invoker：?jiǎn)酒饒?zhí)行命令的對(duì)象，他持有命令對(duì)象數(shù)組

優(yōu)點(diǎn)：

• 解耦調(diào)用者和執(zhí)行者
• 可以組合命令
• 可以擴(kuò)展，對(duì)命令進(jìn)行撤銷(xiāo)等

解釋器模式

namespace InterpreterPattern {
    export class Context {
    }

    export interface AbstractExpression {
        interpret(context: Context): void;
    }

    export class TerminalExpression implements AbstractExpression {
        public interpret(context: Context): void {
            console.log("`interpret` method of TerminalExpression is being called!");
        }
    }

    export class NonterminalExpression implements AbstractExpression {

        public interpret(context: Context): void {
            console.log("`interpret` method of NonterminalExpression is being called!");
        }
    }
}

意圖：給定一個(gè)語(yǔ)言，定義它的文法的一種表示，并定義一個(gè)解釋器，這個(gè)解釋器使用該表示來(lái)解釋語(yǔ)言中的句子。

核心：

• AbstractExpression：抽象表達(dá)式，聲明了一個(gè)表達(dá)式需要實(shí)現(xiàn)的接口。
• TerminalExpression：實(shí)現(xiàn)了抽象表達(dá)式角色所要求的接口，主要是一個(gè)interpret()方法；文法中的每一個(gè)終結(jié)符都有一個(gè)具體終結(jié)表達(dá)式與之相對(duì)應(yīng)。比如有一個(gè)簡(jiǎn)單的公式R=R1+R2，在里面R1和R2就是終結(jié)符，對(duì)應(yīng)的解析R1和R2的解釋器就是終結(jié)符表達(dá)式。
• NonterminalExpression：文法中的每一條規(guī)則都需要一個(gè)具體的非終結(jié)符表達(dá)式，非終結(jié)符表達(dá)式一般是文法中的運(yùn)算符或者其他關(guān)鍵字，比如公式R=R1+R2中，“+"就是非終結(jié)符，解析“+”的解釋器就是一個(gè)非終結(jié)符表達(dá)式。
• Context：上下文，用來(lái)存放文法中各個(gè)終結(jié)符所對(duì)應(yīng)的具體值。

感覺(jué)用不上，而且沒(méi)有具體例子也比較晦澀（Interpreter Pattern）。

迭代器模式

namespace IteratorPattern {
    export interface Iterator {

        next(): any;
        hasNext(): boolean;
    }

    export interface Aggregator {
        createIterator(): Iterator;
    }

    export class ConcreteIterator implements Iterator {
        private collection: any[] = [];
        private position: number = 0;

        constructor(collection: any[]) {
            this.collection = collection;
        }

        public next(): any {
            // Error handling is left out
            var result = this.collection[this.position];
            this.position += 1;
            return result;
        }

        public hasNext(): boolean {
            return this.position < this.collection.length;
        }
    }

    export class Numbers implements Aggregator {
        private collection: number[] = [];

        constructor(collection: number[]) {
            this.collection = collection;
        }
        public createIterator(): Iterator {
            return new ConcreteIterator(this.collection);
        }
    }
}

意圖：提供一種方法順序訪問(wèn)一個(gè)聚合對(duì)象中各個(gè)元素, 而又不需暴露該對(duì)象的內(nèi)部表示。
例子里提供的就是一種正序訪問(wèn)方法，但實(shí)際上這個(gè)訪問(wèn)順序是我們可以自己定義的。
所以迭代器就是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作。也就是可以供es6中的 for...of語(yǔ)法消費(fèi)。
更多js相關(guān)的迭代器知識(shí)可以看：Iterator 和 for...of 循環(huán)。

中介者模式

namespace MediatorPattern {
    export interface Mediator {
        send(msg: string, colleague: Colleague): void;
    }

    export class Colleague {
        public mediator: Mediator;

        constructor(mediator: Mediator) {
            this.mediator = mediator;
        }

        public send(msg: string): void {
            throw new Error("Abstract Method!");
        }

        public receive(msg: string): void {
            throw new Error("Abstract Method!");
        }
    }

    export class ConcreteColleagueA extends Colleague {
        constructor(mediator: Mediator) {
            super(mediator);
        }

        public send(msg: string): void {
            this.mediator.send(msg, this);
        }

        public receive(msg: string): void {
            console.log(msg, "`receive` of ConcreteColleagueA is being called!");
        }
    }

    export class ConcreteColleagueB extends Colleague {
        constructor(mediator: Mediator) {
            super(mediator);
        }

        public send(msg: string): void {
            this.mediator.send(msg, this);
        }

        public receive(msg: string): void {
            console.log(msg, "`receive` of ConcreteColleagueB is being called!");
        }
    }

    export class ConcreteMediator implements Mediator {
        public concreteColleagueA: ConcreteColleagueA;
        public concreteColleagueB: ConcreteColleagueB;

        public send(msg: string, colleague: Colleague): void {
            if (this.concreteColleagueA === colleague) {
                this.concreteColleagueB.receive(msg);
            } else {
                this.concreteColleagueA.receive(msg);
            }
        }
    }
}

意圖：用一個(gè)中介對(duì)象來(lái)封裝一系列的對(duì)象交互。中介者使各對(duì)象不需要顯式地相互引用，從而使其耦合松散，而且可以獨(dú)立地改變它們之間的交互。

核心：

• Mediator：抽象中介者，定義對(duì)象間的中介交換方法。
• ConcreteMediator：具體中介者，實(shí)現(xiàn)對(duì)象間的中介交換方法。
• Colleague：抽象同事角色，定義同事角色和中介者交互的方法，持有中介者。
• ConcreteColleagueB：具體，實(shí)現(xiàn)和中介者的交互。

demo：

function show() : void {
    var cm: MediatorPattern.ConcreteMediator = new MediatorPattern.ConcreteMediator(),
        c1: MediatorPattern.ConcreteColleagueA = new MediatorPattern.ConcreteColleagueA(cm),
        c2: MediatorPattern.ConcreteColleagueB = new MediatorPattern.ConcreteColleagueB(cm);

    cm.concreteColleagueA = c1;
    cm.concreteColleagueB = c2;

    c1.send("`send` of ConcreteColleagueA is being called!");
    c2.send("`send` of ConcreteColleagueB is being called!");

}

備忘錄模式

namespace MementoPattern {
    export class State {
        private str: string;

        constructor(str: string) {
            this.str = str;
        }

        get Str() : string {
            return this.str;
        }

        set Str(str: string) {
            this.str = str;
        }
    }

    export class Originator {
        private state: State;

        constructor(state: State) {
            this.state = state;
        }

        get State(): State {
            return this.state;
        }

        set State(state: State) {
            console.log("State :: ", state);
            this.state = state;
        }

        public createMemento(): Memento {
            console.log("creates a memento with a given state!");
            return new Memento(this.state);
        }

        public setMemento(memento: Memento) {
            console.log("sets the state back");
            this.State = memento.State;
        }
    }

    export class Memento {
        private state: State;

        constructor (state: State) {
            this.state = state;
        }

        get State(): State {
            console.log("get memento's state");
            return this.state;
        }
    }

    export class CareTaker {
        private memento: Memento;

        get Memento(): Memento {
            return this.memento;
        }

        set Memento(memento: Memento) {
            this.memento = memento;
        }
    }
}

意圖：在不破壞封裝性的前提下，捕獲一個(gè)對(duì)象的內(nèi)部狀態(tài)，并在該對(duì)象之外保存這個(gè)狀態(tài)。這樣以后就可將該對(duì)象恢復(fù)到保存的狀態(tài)。

核心：

• Originator(發(fā)起人)：負(fù)責(zé)創(chuàng)建一個(gè)備忘錄Memento，用以記錄當(dāng)前時(shí)刻自身的內(nèi)部狀態(tài)，并可使用備忘錄恢復(fù)內(nèi)部狀態(tài)。Originator可以根據(jù)需要決定Memento存儲(chǔ)自己的哪些內(nèi)部狀態(tài)。
• Memento(備忘錄)：負(fù)責(zé)存儲(chǔ)Originator對(duì)象的內(nèi)部狀態(tài)，并可以防止Originator以外 的其他對(duì)象訪問(wèn)備忘錄。允許它訪問(wèn)返回到先前狀態(tài)所需要的所有數(shù)據(jù)。
• Caretaker(管理者)：管理備忘錄Memento，不能對(duì)Memento的內(nèi)容進(jìn)行訪問(wèn)或者操作。

例子：

function show() : void {
    var state: MementoPattern.State = new MementoPattern.State("... State "),
        originator: MementoPattern.Originator = new MementoPattern.Originator(state),
        careTaker: MementoPattern.CareTaker = new MementoPattern.CareTaker();

    careTaker.Memento = originator.createMemento();
    originator.State = new MementoPattern.State("something else...");

    originator.setMemento(careTaker.Memento);
}

以保存游戲進(jìn)度為例，在游戲角色大戰(zhàn)Boss前將該角色的狀態(tài)存儲(chǔ)，與Boss作戰(zhàn)后角色的各項(xiàng)能力會(huì)下降，如果沒(méi)有通關(guān)，則可利用備忘錄進(jìn)行恢復(fù)到戰(zhàn)前狀態(tài)。

觀察者模式

namespace ObserverPattern {
    export class Subject {
        private observers: Observer[] = [];

        public register(observer: Observer): void {
            console.log(observer, "is pushed!");
            this.observers.push(observer);
        }

        public unregister(observer: Observer): void {
            var n: number = this.observers.indexOf(observer);
            console.log(observer, "is removed");
            this.observers.splice(n, 1);
        }

        public notify(): void {
            console.log("notify all the observers", this.observers);
            var i: number
              , max: number;

            for (i = 0, max = this.observers.length; i < max; i += 1) {
                this.observers[i].notify();
            }
        }
    }

    export class ConcreteSubject extends Subject {
        private subjectState: number;

        get SubjectState(): number {
            return this.subjectState;
        }

        set SubjectState(subjectState: number) {
            this.subjectState = subjectState;
        }
    }

    export class Observer {
        public notify(): void {
            throw new Error("Abstract Method!");
        }
    }

    export class ConcreteObserver extends Observer {
        private name: string;
        private state: number;
        private subject: ConcreteSubject;

        constructor (subject: ConcreteSubject, name: string) {
            super();
            console.log("ConcreteObserver", name, "is created!");
            this.subject = subject;
            this.name = name;
        }

        public notify(): void {
            console.log("ConcreteObserver's notify method");
            console.log(this.name, this.state);
            this.state = this.subject.SubjectState;
        }

        get Subject(): ConcreteSubject {
            return this.subject;
        }

        set Subject(subject: ConcreteSubject) {
            this.subject = subject;
        }
    }
}

意圖：定義對(duì)象間的一種一對(duì)多的依賴(lài)關(guān)系,當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí), 所有依賴(lài)于它的對(duì)象都得到通知并被自動(dòng)更新。

也叫發(fā)布訂閱模式，這在前端中非常常見(jiàn)，比如瀏覽器的addEventListener或者node中的EventEmitter，代碼很好理解，不用多做其他解釋。

狀態(tài)模式

namespace StatePattern {
    export interface State {
        handle(context: Context): void;
    }

    export class ConcreteStateA implements State {
        public handle(context: Context): void {
            console.log("`handle` method of ConcreteStateA is being called!");
            context.State = new ConcreteStateB();
        }
    }

    export class ConcreteStateB implements State {
        public handle(context: Context): void {
            console.log("`handle` method of ConcreteStateB is being called!");
            context.State = new ConcreteStateA();
        }
    }

    export class Context {
        private state: State;

        constructor(state: State) {
            this.state = state;
        }

        get State(): State {
            return this.state;
        }

        set State(state: State) {
            this.state = state;
        }

        public request(): void {
            console.log("request is being called!");
            this.state.handle(this);
        }
    }
}

意圖：允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變時(shí)改變它的行為。

適用性： 一個(gè)對(duì)象的行為取決于它的狀態(tài), 并且它必須在運(yùn)行時(shí)刻根據(jù)狀態(tài)改變它的行為。

核心：Context對(duì)象包含一個(gè)State狀態(tài)對(duì)象。而Context真正執(zhí)行操作時(shí)，是State狀態(tài)對(duì)象在執(zhí)行this.state.handle(this);。并且當(dāng)狀態(tài)執(zhí)行完具體操作之后，他會(huì)將狀態(tài)切換至下一個(gè)狀態(tài)。這個(gè)時(shí)候Context對(duì)象再次調(diào)用時(shí)，它執(zhí)行的操作會(huì)切換至下一個(gè)狀態(tài)的操作。

例子：

class Kaideng implements State {
    public handle(context: Context): void {
        console.log("關(guān)燈");
        context.State = new Guandeng();
    }
}

class Guandeng implements State {
    public handle(context: Context): void {
        console.log("開(kāi)燈");
        context.State = new Kaideng();
    }
}

class Light {
    private state: State;

    constructor(state: State) {
        this.state = state;
    }

    get State(): State {
        return this.state;
    }

    set State(state: State) {
        this.state = state;
    }

    public toggle(): void {
        console.log("request is being called!");
        this.state.handle(this);
    }
}

const light = new Light(new Guandeng());
light.toggle();
light.toggle();

策略模式

namespace StrategyPattern {
    export interface Strategy {
        execute(): void;
    }

    export class ConcreteStrategy1 implements Strategy {
        public execute(): void {
            console.log("`execute` method of ConcreteStrategy1 is being called");
        }
    }

    export class ConcreteStrategy2 implements Strategy {
        public execute(): void {
            console.log("`execute` method of ConcreteStrategy2 is being called");
        }
    }

    export class ConcreteStrategy3 implements Strategy {
        public execute(): void {
            console.log("`execute` method of ConcreteStrategy3 is being called");
        }
    }

    export class Context {
        private strategy: Strategy;

        constructor(strategy: Strategy) {
            this.strategy = strategy;
        }

        public executeStrategy(): void {
            this.strategy.execute();
        }
    }
}

意圖：定義一系列的算法,把它們一個(gè)個(gè)封裝起來(lái), 并且使它們可相互替換。本模式使得算法可獨(dú)立于使用它的客戶而變化。

核心：
“策略”提供了一種用多個(gè)行為中的一個(gè)行為來(lái)配置一個(gè)類(lèi)的方法。

例子

模版方法模式

namespace TemplateMethodPattern {
    export class AbstractClass {
        public method1(): void {
            throw new Error("Abstract Method");
        }

        public method2(): void {
            throw new Error("Abstract Method");
        }

        public method3(): void {
            throw new Error("Abstract Method");
        }

        public templateMethod(): void {
            console.log("templateMethod is being called");
            this.method1();
            this.method2();
            this.method3();
        }
    }

    export class ConcreteClass1 extends AbstractClass {
        public method1(): void {
            console.log("method1 of ConcreteClass1");
        }

        public method2(): void {
            console.log("method2 of ConcreteClass1");
        }

        public method3(): void {
            console.log("method3 of ConcreteClass1");
        }
    }

    export class ConcreteClass2 extends AbstractClass {
        public method1(): void {
            console.log("method1 of ConcreteClass2");
        }

        public method2(): void {
            console.log("method2 of ConcreteClass2");
        }

        public method3(): void {
            console.log("method3 of ConcreteClass2");
        }
    }
}

核心：定義一個(gè)操作中的算法的骨架，而將一些步驟延遲到子類(lèi)中。Template Method使得子類(lèi)可以不改變一個(gè)算法的結(jié)構(gòu)即可重定義該算法的某些特定步驟。

優(yōu)點(diǎn)：封裝不變部分，擴(kuò)展可變部分。

訪問(wèn)者模式

namespace VisitorPattern {
    export interface Visitor {
        visitConcreteElement1(concreteElement1: ConcreteElement1): void;
        visitConcreteElement2(concreteElement2: ConcreteElement2): void;
    }

    export class ConcreteVisitor1 implements Visitor {
        public visitConcreteElement1(concreteElement1: ConcreteElement1): void {
            console.log("`visitConcreteElement1` of ConcreteVisitor1 is being called!");
        }

        public visitConcreteElement2(concreteElement2: ConcreteElement2): void {
            console.log("`visitConcreteElement2` of ConcreteVisitor1 is being called!");
        }
    }

    export class ConcreteVisitor2 implements Visitor {
        public visitConcreteElement1(concreteElement1: ConcreteElement1): void {
            console.log("`visitConcreteElement1` of ConcreteVisitor2 is being called!");
        }

        public visitConcreteElement2(concreteElement2: ConcreteElement2): void {
            console.log("`visitConcreteElement2` of ConcreteVisitor2 is being called!");
        }
    }


    export interface Element {
        operate(visitor: Visitor): void;
    }

    export class ConcreteElement1 implements Element {
        public operate(visitor: Visitor): void {
            console.log("`operate` of ConcreteElement1 is being called!");
            visitor.visitConcreteElement1(this);
        }
    }

    export class ConcreteElement2 implements Element {
        public operate(visitor: Visitor): void {
            console.log("`operate` of ConcreteElement2 is being called!");
            visitor.visitConcreteElement2(this);
        }
    }

    export class Objs {
        private elements: Element[] = [];

        public attach(e: Element): void {
            this.elements.push(e);
        }

        public detach(e: Element): void {
            var index = this.elements.indexOf(e);
            this.elements.splice(index, 1);
        }

        public operate(visitor: Visitor): void {
            var i = 0,
                max = this.elements.length;

            for(; i < max; i += 1) {
                this.elements[i].operate(visitor);
            }
        }
    }

}

意圖：表示一個(gè)作用于某對(duì)象結(jié)構(gòu)中的各元素的操作。它使你可以在不改變各元素的類(lèi)的前提下定義作用于這些元素的新操作。

核心：

• Visitor：為該對(duì)象結(jié)構(gòu)中 ConcreteElement的每一個(gè)類(lèi)聲明一個(gè) Visit操作。
• ConcreteVisitor：實(shí)現(xiàn)每個(gè)由 Visitor聲明的操作。
• ConcreteElement：實(shí)現(xiàn)operate方法，該操作以一個(gè)訪問(wèn)者為參數(shù)，然后具體地調(diào)用訪問(wèn)者的方法。
• ObjectStructure：對(duì)應(yīng)Objs，可以對(duì)元素進(jìn)行管理，枚舉元素等。

簡(jiǎn)記：不同的人對(duì)不同的事做不同的操作。

例子

為什么要重學(xué)設(shè)計(jì)模式？

不同的階段看設(shè)計(jì)模式會(huì)有不同的感悟，并且有很多設(shè)計(jì)模式即使然在懂了也不是能馬上運(yùn)用在項(xiàng)目中的，所以需要不停地反復(fù)學(xué)習(xí)，才會(huì)有更熟練的感覺(jué)。