TS设计模式之单例模式，原型模式，生成器模式

单例模式

单例模式是指若你有一个类，该类无论被实例化多少次最终只会返回一个相同的实例对象，并不会因为多次实例返回新的实例对象，我们在使用Vue框架时经常会用到该模式，VueX和VueRouter中都有使用到单例模式，单例模式中又分为两种情况，饱汉模式和饿汉模式，饱汉模式即调用静态方法后才初次实例对象，饿汉模式在定义成员变量时就将实例对象复制给成员变量，话不多说直接上代码。

饱汉模式

class SingleTonFull {
    private static  instance: SingleTonFull
    static getInstance(): SingleTonFull {
        return this.instance || (this.instance = new SingleTonFull())
    }
    private constructor() {
    }
}

饿汉模式

class SingleTonHungary {
    private static instance: SingleTonHungary = new SingleTonHungary()
    static getInstance(): SingleTonHungary {
      return this.instance
    }
    private constructor() {
    }
}

优点

1. 单例模式只有一个实例

缺点

1. 违反了单一职责的原则，该类不仅实现提供一个实例的功能还有为该实例提供一个全局访问节点。

原型模式

当你需要复制一个类时你可能脑海里面已经有了个想法，遍历类中的所有属性和方法将他赋值到一个新的类中，但是这样复制一个类可能会存在某些问题，比方，在被复制的类中存在私有属性，从外部访问不到该类，通过原型模式，定义一个包含克隆方法的接口，被复制的类去实现该接口可以很好的解决这个问题。代码如下：

interface Fruits {
    clone(): Fruits
}

export default class Apple implements Fruits{
    objName = {
        value: '红富士'
    }
    clone(): Fruits {
        return Object.create(this) as Fruits
    }

    getName() {
        console.log(`这个东西是${this.objName.value}`)
    }
}

生成器模式

生成器模式又被称为建造者模式，该模式适合于以下情况：

假设你需要实例化一个地图类，在地图类中你有以下属性需要在类实例化时传进去，new Map(‘xAxis’, 'yAxis', 'legend', .......)，若你不需要某些属性，可能要在实例化时对应的实参传null值进去，代码可能就变成了这样new Map(null, null, null. null, 'legend')，通过建造者模式可以很好的解决这个问题，在实例化时直接 new Map()即可，若你需要grid 属性和 legend属性直接调用实例的方法setGrid()和setLegend()即可, 代码实现如下：

生成器类：

// 地图builder接口
interface MapBuilderInterface {
    reset(): void
    setLegend(): void
    setXAxis(): void
    setYAxis(): void
}

class MapBuilder implements MapBuilderInterface {
    private legend: string = '';
    private xAxis: string = '';
    private yAxis: string = '';
    private instance!: MapBuilder;
    reset(): MapBuilder {
        this.instance = new MapBuilder()
        return this.instance
    }
    setLegend(): void {
        this.legend = 'legend'
    }
    setXAxis(): void {
        this.xAxis = 'xAxis'
    }
    setYAxis(): void {
        this.yAxis = 'yAxis'
    }
}

// 执行者或代理
export default class Director {
    creatMapA(): MapBuilder {
        const mapBuilder = new MapBuilder().reset()
        mapBuilder.setXAxis()
        mapBuilder.setLegend()
        return mapBuilder
    }

    createMapB(): MapBuilder {
        const mapBuilder = new MapBuilder().reset()
        mapBuilder.setYAxis()
        return mapBuilder
    }
}