重學設計模式

讀Design pattern implementations in TypeScript筆記。

五種創(chuàng)造性設計模式

單例模式

namespace SingletonPattern {
    export class Singleton {
        // A variable which stores the singleton object. Initially,
        // the variable acts like a placeholder
        private static singleton: Singleton;

        // private constructor so that no instance is created
        private constructor() {
        }

        // This is how we create a singleton object
        public static getInstance(): Singleton {
            // check if an instance of the class is already created
            if (!Singleton.singleton) {
                // If not created create an instance of the class
                // store the instance in the variable
                Singleton.singleton = new Singleton();
            }
            // return the singleton object
            return Singleton.singleton;
        }
    }
}

核心：維護一個實例，暴露統(tǒng)一的接口去獲取它，如果沒有則創(chuàng)建国旷，如果有則直接返回及汉。

抽象工廠模式

namespace AbstractFactoryPattern {
    export interface AbstractProductA {
        methodA(): string;
    }
    export interface AbstractProductB {
        methodB(): number;
    }

    export interface AbstractFactory {
        createProductA(param?: any) : AbstractProductA;
        createProductB() : AbstractProductB;
    }


    export class ProductA1 implements AbstractProductA {
        methodA = () => {
            return "This is methodA of ProductA1";
        }
    }
    export class ProductB1 implements AbstractProductB {
        methodB = () => {
            return 1;
        }
    }

    export class ProductA2 implements AbstractProductA {
        methodA = () => {
            return "This is methodA of ProductA2";
        }
    }
    export class ProductB2 implements AbstractProductB {
        methodB = () => {
            return 2;
        }
    }


    export class ConcreteFactory1 implements AbstractFactory {
        createProductA(param?: any) : AbstractProductA {
            return new ProductA1();
        }

        createProductB(param?: any) : AbstractProductB {
            return new ProductB1();
        }
    }
    export class ConcreteFactory2 implements AbstractFactory {
        createProductA(param?: any) : AbstractProductA {
            return new ProductA2();
        }

        createProductB(param?: any) : AbstractProductB {
            return new ProductB2();
        }
    }


    export class Tester {
        private abstractProductA: AbstractProductA;
        private abstractProductB: AbstractProductB;

        constructor(factory: AbstractFactory) {
            this.abstractProductA = factory.createProductA();
            this.abstractProductB = factory.createProductB();
        }

        public test(): void {
            console.log(this.abstractProductA.methodA());
            console.log(this.abstractProductB.methodB());
        }
    }

 }

核心：現(xiàn)在有四個商品钢悲，分別是A1陶缺、B1钾挟、A2、B2饱岸。A和B屬于兩種不同的商品緯度掺出，而1、2則屬于商品等級伶贰。則核心就是A和B都是抽象產品角色蛛砰，而創(chuàng)造出的A1、B1黍衙、A2、B2則是具體產品角色荠诬，而獲得具體產品的方法ConcreteFactory1琅翻、ConcreteFactory2，就是具體工廠角色柑贞，而他們都實現(xiàn)了AbstractFactory這個抽象工廠方椎。而最終的使用者Tester不用關心他到底是等級1還是等級2，直接使用傳入的具體工廠調用方法即可钧嘶。

工廠方法模式

namespace FactoryMethodPattern {

    export interface AbstractProduct {
        method(param?: any) : void;
    }

    export class ConcreteProductA implements AbstractProduct {
        method = (param?: any) => {
            return "Method of ConcreteProductA";
        }
    }

    export class ConcreteProductB implements AbstractProduct {
        method = (param?: any) => {
            return "Method of ConcreteProductB";
        }
    }


    export namespace ProductFactory {
        export function createProduct(type: string) : AbstractProduct {
            if (type === "A") {
                return new ConcreteProductA();
            } else if (type === "B") {
                return new ConcreteProductB();
            }

            return null;
        }
    }
}

核心：
抽象產品: AbstractProduct棠众、具體產品: ConcreteProductA、ConcreteProductB有决，產品工廠：ProductFactory闸拿。 通過傳入想要生產的產品類型，得到想要的產品书幕⌒禄纾客戶端使用簡單，但是缺點是隨時產品的不斷增多台汇，會不停的增加if else邏輯苛骨，不過在ts里完全可以通過map來屏蔽這個問題。

建筑者模式

namespace BuilderPattern {
    export class UserBuilder {
        private name: string;
        private age: number;
        private phone: string;
        private address: string;

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

        get Name() {
            return this.name;
        }
        setAge(value: number): UserBuilder {
            this.age = value;
            return this;
        }
        get Age() {
            return this.age;
        }
        setPhone(value: string): UserBuilder {
            this.phone = value;
            return this;
        }
        get Phone() {
            return this.phone;
        }
        setAddress(value: string): UserBuilder {
            this.address = value;
            return this;
        }
        get Address() {
            return this.address;
        }

        build(): User {
            return new User(this);
        }
    }

    export class User {
        private name: string;
        private age: number;
        private phone: string;
        private address: string;

        constructor(builder: UserBuilder) {
            this.name = builder.Name;
            this.age = builder.Age;
            this.phone = builder.Phone;
            this.address = builder.Address
        }

        get Name() {
            return this.name;
        }
        get Age() {
            return this.age;
        }
        get Phone() {
            return this.phone;
        }
        get Address() {
            return this.address;
        }
    }

}

核心：主要解決管道式構建的問題苟呐，Builder每次只能接收一個值痒芝，之后可能才能獲取到另一個值，最終才能創(chuàng)造出產品牵素。
舉例：

(async () => {
 const ub = new UserBuilder('Jack');
const user = ub.setAge(await getAge(ub.getName)).setPhone('xxx').setAddress('xxx').build();
})()

原型模式

這一個設計模式有點不太懂源碼想表達的是什么严衬。
但通常原型模式是為了解決new一個對象所損耗的資源太大，比如：

class A {
    private a1: string = '';
    private a2: string = '';
}

class User {
  private user = {};
  constructor(a: A, b, c, d, e, f, g, h, i) {
    /**
     * xxx....
     */
  }
}

這個時候new必須傳n個參數(shù)两波，并且參數(shù)可能會進行復雜運算瞳步，這個時候User就該繼承一個接口Cloneable闷哆，當我們想要創(chuàng)建的時候不必去new一個對象，而是直接clone：

class A {
    private a1: string = '';
    private a2: string = '';
}

export interface Cloneable<T> {
    clone(): T;
}

class User implements Cloneable<User> {
    private info: {
        a: A, b, c, d, e, f, g, h, I
    };

    constructor(a: A, b, c, d, e, f, g, h, i) {
      /**
       * xxx....
       */
      this.info = {
        a, b, c, d, e, f, g, h, I
      }
    }

    clone(): User {
        const { a, b, c, d, e, f, g, h, i } = this.info;
        const newUser = new User(a, b, c, d, e, f, g, h, i);
        return newUser;
    }
  }

需要注意的點是這里實現(xiàn)的是淺拷貝单起，由于a的類型是A抱怔，他也是一個對象，所以這樣clone出來的newUser嘀倒，如果你修改了A的值newUser.a.a1 = 2屈留，oldUser的A的值也會發(fā)生變化為2。所以想要深拷貝還得繼續(xù)改造這個clone方法测蘑。

原型模式的優(yōu)點：

• 簡化對象的創(chuàng)建過程灌危，通過復制一個已有對象實例可以提高新實例的創(chuàng)建效率
• 擴展性好
• 提供了簡化的創(chuàng)建結構，原型模式中的產品的復制是通過封裝在原型類中的克隆方法實現(xiàn)的碳胳，無需專門的工廠類來創(chuàng)建產品

原型模式的缺點：

• 需要為每一個類準備一個克隆方法勇蝙，而且該克隆方法位于一個類的內部，當對已有類進行改造時挨约，需要修改原代碼味混，違背了開閉原則。

七種結構型模式

適配器模式

namespace AdapterPattern {

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

    export interface Target {
        call(): void;
    }

    export class Adapter implements Target {
        public call(): void {
            console.log("Adapter's `call` method is being called");
            var adaptee: Adaptee = new Adaptee();
            adaptee.method();
        }
    }
}

核心：將一個類的接口變換成客戶端所期待的另一種接口诫惭，從而使原本因接口不匹配而無法在一起工作的兩個類能夠一起工作翁锡。

• 源對象： Adaptee
• 目標對象：Target
• 適配對象：Adapter
  具體使用場景：

class ConcreteTagert implements AdapterPattern.Target {
    call() {
        const adapter = new AdapterPattern.Adapter();
        adapter.call();
    }
}

const target = new ConcreteTagert();
target.call();

或者直接用adapter替換target。

橋接模式

namespace BridgePattern {

    export class Abstraction {
        implementor: Implementor;
        constructor(imp: Implementor) {
            this.implementor = imp;
        }

        public callIt(s: String): void {
            throw new Error("This method is abstract!");
        }
    }

    export class RefinedAbstractionA extends Abstraction {
        constructor(imp: Implementor) {
            super(imp);
        }

        public callIt(s: String): void {
            console.log("This is RefinedAbstractionA");
            this.implementor.callee(s);
        }
    }

    export class RefinedAbstractionB extends Abstraction {
        constructor(imp: Implementor) {
            super(imp);
        }

        public callIt(s: String): void {
            console.log("This is RefinedAbstractionB");
            this.implementor.callee(s);
        }
    }

    export interface Implementor {
        callee(s: any): void;
    }

    export class ConcreteImplementorA implements Implementor {
        public callee(s: any) : void {
            console.log("`callee` of ConcreteImplementorA is being called.");
            console.log(s);
        }
    }

    export class ConcreteImplementorB implements Implementor {
        public callee(s: any) : void {
            console.log("`callee` of ConcreteImplementorB is being called.");
            console.log(s);
        }
    }
}

主要解決問題：將抽象部分與它的實現(xiàn)部分分離夕土，使它們都可以獨立地變化馆衔。

核心：

• 抽象類Abstraction： 可以進行橋接的產品抽象，這里以apple watch類比怨绣。
• 修成抽象類RefinedAbstractionA：抽象類的子類角溃，定義了具體產品，例如apple watch的的商務版梨熙、運動版开镣、定制版等。
• 實現(xiàn)化角色Implementor：可以被橋接的產品抽象咽扇，定義了橋接的接口邪财。類比apple watch的表帶，那么具體的接口质欲，就可以看作是表帶的連接口树埠。
• 具體實現(xiàn)化角色ConcreteImplementorA：可以被橋接的具體產品。比如紅色塑料表帶嘶伟，金屬表帶等怎憋。

這樣任意類型的apple watch就可以和任意類型的表帶進行組合，成為新的形態(tài)或者完成新的功能。

組合模式

namespace CompositePattern {
    export interface Component {
        operation(): void;
    }

    export class Composite implements Component {

        private list: Component[];
        private s: String;

        constructor(s: String) {
            this.list = [];
            this.s = s;
        }

        public operation(): void {
            console.log("`operation of `", this.s)
            for (var i = 0; i < this.list.length; i += 1) {
                this.list[i].operation();
            }
        }

        public add(c: Component): void {
            this.list.push(c);
        }

        public remove(i: number): void {
            if (this.list.length <= i) {
                throw new Error("index out of bound!");
            }
            this.list.splice(i, 1);
        }
    }

    export class Leaf implements Component {
        private s: String;
        constructor(s: String) {
            this.s = s;
        }
        public operation(): void {
            console.log("`operation` of Leaf", this.s, " is called.");
        }
    }
}

主要表示：部分-整體的層次結構绊袋。
核心：

• Component：是組合中的對象聲明接口毕匀，在適當?shù)那闆r下，實現(xiàn)所有類共有接口的默認行為癌别。聲明一個接口用于訪問和管理Component子部件皂岔。
• Leaf: 在組合中表示葉子結點對象，葉子結點沒有子結點展姐。
• Composite：定義有枝節(jié)點行為躁垛，用來存儲子部件，在Component接口中實現(xiàn)與子部件有關操作圾笨，如增加(add)和刪除(remove)等教馆。

裝飾者模式

鏈

裝飾者模式隱含的是通過一條條裝飾鏈去實現(xiàn)具體對象，每一條裝飾鏈都始于一個Componet對象擂达，每個裝飾者對象后面緊跟著另一個裝飾者對象土铺，而對象鏈終于ConcreteComponet對象。

namespace DecoratorPattern {

    export interface Component {
        operation(): void;
    }

    export class ConcreteComponent implements Component {
        private s: String;

        constructor(s: String) {
            this.s = s;
        }

        public operation(): void {
            console.log("`operation` of ConcreteComponent", this.s, " is being called!");
        }
    }

    export class Decorator implements Component {
        private component: Component;
        private id: Number;

        constructor(id: Number, component: Component) {
            this.id = id;
            this.component = component;
        }

        public get Id(): Number {
            return this.id;
        }

        public operation(): void {
            console.log("`operation` of Decorator", this.id, " is being called!");
            this.component.operation();
        }
    }

    export class ConcreteDecorator extends Decorator {
        constructor(id: Number, component: Component) {
            super(id, component);
        }

        public operation(): void {
            super.operation();
            console.log("`operation` of ConcreteDecorator", this.Id, " is being called!");
        }
    }
}

核心：

• 抽象組件：給出一個抽象接口板鬓，以規(guī)范所有實現(xiàn)對象舒憾。
• 具體組建：實現(xiàn)了抽象畫組件接口。
• 抽象裝飾：持有一個組件穗熬，并實現(xiàn)抽象組件的接口。
• 具體裝飾：負責給組件對象添加上附加的功能丁溅。

應用：

裝飾

外觀模式

namespace FacadePattern {

    export class Part1 {
        public method1(): void {
            console.log("`method1` of Part1");
        }
    }

    export class Part2 {
        public method2(): void {
            console.log("`method2` of Part2");
        }
    }

    export class Part3 {
        public method3(): void {
            console.log("`method3` of Part3");
        }
    }

    export class Facade {
        private part1: Part1 = new Part1();
        private part2: Part2 = new Part2();
        private part3: Part3 = new Part3();

        public operation1(): void {
            console.log("`operation1` is called ===");
            this.part1.method1();
            this.part2.method2();
            console.log("==========================");
        }

        public operation2(): void {
            console.log("`operation2` is called ===");
            this.part1.method1();
            this.part3.method3();
            console.log("==========================");
        }
    }
}

核心：主要是解決為一組復雜的接口提供一個簡單的門面唤蔗。
比如用戶下單操作，實際上我們首先需要調用用戶系統(tǒng)的驗證接口窟赏，其次要調用商品系統(tǒng)進行獲價妓柜，最后再調用訂單系統(tǒng)進行下單，同時還需要調用日志系統(tǒng)進行日志記錄涯穷。 進行外觀模式的架構后棍掐，我們只需要提供一個下單接口即可，剩下的細節(jié)用戶并不需要關心拷况。

享元模式

namespace FlyweightPattern {

    export interface Flyweight {
        operation(s: String): void;
    }

    export class ConcreteFlyweight implements Flyweight {
        private instrinsicState: String;

        constructor(instrinsicState: String) {
            this.instrinsicState = instrinsicState;
        }

        public operation(s: String): void {
            console.log("`operation` of ConcreteFlyweight", s, " is being called!");
        }
    }

    export class UnsharedConcreteFlyweight implements Flyweight {
        private allState: number;

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

        public operation(s: String): void {
            console.log("`operation` of UnsharedConcreteFlyweight", s, " is being called!");
        }
    }

    export class FlyweightFactory {

        private fliesMap: { [s: string]: Flyweight; } = <any>{};

        constructor() { }

        public getFlyweight(key: string): Flyweight {

            if (this.fliesMap[key] === undefined || null) {
                this.fliesMap[key] = new ConcreteFlyweight(key);
            }
            return this.fliesMap[key];
        }
    }
}

運用共享技術有效地支持大量細粒度的對象作煌。

適用性:

• 一個應用程序使用了大量的對象。
• 完全由于使用大量的對象赚瘦，造成很大的存儲開銷粟誓。
• 對象的大多數(shù)狀態(tài)都可變?yōu)橥獠繝顟B(tài)。
• 如果刪除對象的外部狀態(tài)起意，那么可以用相對較少的共享對象取代很多組對象鹰服。
• 應用程序不依賴于對象標識。由于Flyweight對象可以被共享，對于概念上明顯有別的對象悲酷，標識測試將返回真值套菜。

滿足以上的這些條件的系統(tǒng)可以使用享元對象。

享元

核心：一個具體的場景需要很多單元（享元）设易，并且有非常多個場景逗柴，沒個單元都有自己的固有屬性，那么在組成這非常多個場景的時候亡嫌，就能復用這些已經創(chuàng)建好的有估計屬性的單元嚎于。

比如：關系好的朋友一起合租，在廚房公用的場景下挟冠，廚房用具就是一個個單元于购。合租的每一組人就是一個場景，而鍋碗瓢盆不需要每一組人都買一個知染，如果沒有肋僧，那么買一個大家有人買了其他一起共用即可。

代理模式

namespace ProxyPattern {
    export interface Subject {
        doAction(): void;
    }

    export class Proxy implements Subject {
        private realSubject: RealSubject;
        private s: string;

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

        public doAction(): void {
            console.log("`doAction` of Proxy(", this.s, ")");
            if (this.realSubject === null || this.realSubject === undefined) {
                console.log("creating a new RealSubject.");
                this.realSubject = new RealSubject(this.s);
            }
            this.realSubject.doAction();
        }
    }

    export class RealSubject implements Subject {
        private s: string;

        constructor(s: string) {
            this.s = s;
        }
        public doAction(): void {
            console.log("`doAction` of RealSubject", this.s, "is being called!");
        }
    }
}

為其他對象提供一種代理以控制對這個對象的訪問控淡。
代理對象可以在客戶端和目標對象之間起到中介的作用嫌吠，這樣起到了中介的作用和保護了目標對象的作用。
客戶端不需要知道真正的目標對象掺炭，目標對象也可以隨時進行替換辫诅。