美文网首页
TS 设计模式01 - 工厂模式

TS 设计模式01 - 工厂模式

作者: love丁酥酥 | 来源:发表于2020-07-21 02:59 被阅读0次

1. 简介

工厂,在现实中是生产产品的地方。在 oop 中,就是生产对象的地方。其核心是封装一个生产(new)行为。

2. 简单工厂

假如现在你运营了一间餐厅,客人如果要喝饮料,自己制作一杯就好,比如自己制作一杯茶或者一杯果汁。你觉得方便,顾客自己动手,丰衣足食,给你省了很大成本。顾客也觉得方便,想喝的时候自己就可以做,不用麻烦任何人,也不用等待。可是问题来了,顾客原本制作茶(new Tea())时我们是提供的本地茶叶冲泡的茶,但是成本太高,于是想换为绿茶茶包来制作(new GreenTea())。你需要通知所有泡茶的顾客更改他们的制作方式,这样的话,成本是不是太大了呢?
假设我提供一个饮品机器,能够为我们生产茶和果汁,用户想要什么饮品,按一下对应的按钮就可以。
我们来设计一下 UML 类图:


image.png

这里饮品我们用的接口,当然也可以用一个抽象类。下面是代码实现:

interface IDrink {
    name: string; // 饮品名称
    make(): void; // 制作饮品
    show(): void; // 展示饮品
}

// 茶
class Tea implements IDrink {
    name: string;
    constructor(name) {
        this.name = name;
        this.make();
    }
    make(): void {
        console.log('make tea');
    }
    show(): void {
        console.log(`this is ${this.name}`)
    }
}

// 果汁
class Juice implements IDrink {
    name: string;
    constructor(name) {
        this.name = name;
        this.make();
    }
    make(): void {
        console.log('make juice');
    }
    show(): void {
        console.log(`this is ${this.name}`)
    }
}

class SimpleDrinkFactory {
    static createDrink(type: string):: Tea | Juice  {
        switch (type) {
            case 'tea':
                return new Tea('tea');
            case 'juice':
                return new Juice('juice');
            default:
                return new Juice('juice');
        }
    }
}

// 告诉简单工厂想要一杯茶
const tea: Tea = SimpleDrinkFactory.createDrink('tea');
tea.show();
// 告诉简单工厂想要一杯果汁
const juice: Juice = SimpleDrinkFactory.createDrink('juice');
juice.show();
image.png

如果我们要把茶换成绿茶,只需新增一个绿茶类,并且在工厂中对茶的生产做一个修改即可,而不需要修改原来调用工厂生产茶的逻辑。

class GreenTea extends Tea {
    make(): void {
        console.log('make green tea');
    }
}

class SimpleDrinkFactory {
    static createDrink(type: string): : Tea | Juice  {
        switch (type) {
            case 'tea':
                return new GreenTea('green tea');
            case 'juice':
                return new Juice('juice');
            default:
               return new Juice('juice');
        }
    }
}
image.png

这里我们对产品的生产做了一层封装,隔离了用户和产品的直接关系,用户只需要和工厂打交道即可。这里注意以下几点:

  1. 理论上,简单工厂可以生成任意不相关的对象(返回 any),实际上我们还是会把具有相同特征(IDrink)的产品放在一块。
  2. 简单工厂的灵活性不强,不支持传入不同的参数。比如调用工厂时传入不同的参数,让其在生成产品时去调用,这种在 ts 是很难做到的,但你要说在 js,那就很 easy 了。
  3. 扩展很麻烦,比如你要新增一种饮品类型,这里就得修改工厂,改造你的饮品机器,加一个按键,违反了开闭原则。
    其实简单工厂不属于设计模式的一种,但他的这种思想还是很强大的,运用也很广泛,为我们提供了一种最简单的封装创建行为的方式。

3. 工厂模式

可以看到,简单工厂扩展时需要修改工厂。这是因为再简单工厂内部我们用到了所有具体的产品,所以我们应该继续抽象,让我们的创建行为依赖一个抽象的工厂,而具体的创建行为由一个具体的工厂子类来实现。


image.png
interface IDrinkFactory {
    createDrink(): IDrink;
}

class TeaFactory implements IDrinkFactory {
    createDrink(): Tea {
        return new Tea('tea');
    }
}

class JuiceFactory implements IDrinkFactory {
    createDrink(): Juice {
        return new Juice('juice');
    }
}

// 告诉工厂想要一杯茶
const tea = new TeaFactory().createDrink();
tea.show();
// 告诉工厂想要一杯果汁
const juice = new JuiceFactory().createDrink();
juice.show();

这就好比新增一种饮品,我在新增一台机器即可,符合开闭原则。但是如果我的饮品种类很多,我就要增加很多机器,假设我还有生产食物的需求,我也得为食物生产定制很多的机器。那么我的管理成本会越来越大。

4. 抽象工厂模式

其实顾客消费时,既有可能消费饮品,也有可能消费食物,如果我们的抽象工厂同时提供这两种产品的创建,那么我们所需要实现的具体工厂就会少很多。也就是我们的工厂支持不同的产品系创建。


image.png
interface IDrink {
    name: string; // 饮品名称
    make(): void; // 制作饮品
    show(): void; // 展示饮品
}

// 茶
class Tea implements IDrink {
    name: string;

    constructor(name) {
        this.name = name;
        this.make();
    }

    make(): void {
        console.log('make tea');
    }

    show(): void {
        console.log(`this is ${this.name}`);
    }
}

// 果汁
class Juice implements IDrink {
    name: string;

    constructor(name) {
        this.name = name;
        this.make();
    }

    make(): void {
        console.log('make juice');
    }

    show(): void {
        console.log(`this is ${this.name}`);
    }
}

interface IFood {
    name: string;
    make(): void; // 制作食品
    show(): void; // 展示食品
}

// 炸鸡
class FriedChicken implements IFood {
    name: string;

    constructor(name) {
        this.name = name;
        this.make();
    }

    make(): void {
        console.log('make FriedChicken');
    }

    show(): void {
        console.log(`this is ${this.name}`);
    }
}

// 汉堡
class Hamburg implements IFood {
    name: string;

    constructor(name) {
        this.name = name;
        this.make();
    }

    make(): void {
        console.log('make hamburg');
    }

    show(): void {
        console.log(`this is ${this.name}`);
    }
}

interface IMealFactory {
    createDrink(): IDrink;
    createFood(): IFood;
}

class MealAFactory implements IMealFactory {
    createDrink(): Tea {
        return new Tea('tea');
    }

    createFood(): FriedChicken {
        return new FriedChicken('fried chicken');
    }
}

class MealBFactory implements IMealFactory {
    createDrink(): Juice {
        return new Juice('juice');
    }

    createFood(): Hamburg {
        return new Hamburg('hamburg');
    }
}

const mealAFactory = new MealAFactory();
mealAFactory.createDrink().show();
mealAFactory.createFood().show();
const mealBFactory = new MealBFactory();
mealBFactory.createDrink().show();
mealBFactory.createFood().show();

抽象工厂解决了创建不同产品簇的问题,不过抽象工厂在扩展时仍然会产生大量的实体工。

5. 小结

从工厂模式的三种形态中,我们可以看到。越抽象就越利于扩展,但同时也增大了代码结构的复杂性和管理难度,另外,越抽象,有时候就意味着约束力更弱。比如这里具体工厂生产的产品类型,我们使用的具体产品类型来约束,而不是抽象的产品接口来约束,虽然第二种方法扩展和修改起来更方便,但是代码的约束力更弱,可能会写出不符合预期的代码。
没有完美的设计模式,只有合适的设计方案,不要在一开始就追求过度设计。我们只要理解工厂模式的核心就在于封装 new 这个行为。

参考

[book - 大话设计模式]
[book - 设计模式之禅]
工厂模式_百度百科
工厂模式 | 菜鸟教程
设计模式之工厂模式(factory pattern)
简单工厂模式
设计模式之工厂模式(Factory Pattern)
从ES6重新认识JavaScript设计模式(二): 工厂模式
TypeScript实现设计模式——工厂模式
工厂方法模式(Factory Method)-最易懂的设计模式解析
简单工厂模式(SimpleFactoryPattern)- 最易懂的设计模式解析
java的三种工厂模式
java 三种工厂模式

相关文章

  • TS 设计模式01 - 工厂模式

    1. 简介 工厂,在现实中是生产产品的地方。在 oop 中,就是生产对象的地方。其核心是封装一个生产(new)行为...

  • 设计模式 - 目录

    设计模式01 - 单例模式 设计模式02 - 工厂模式 设计模式03 - 建造者模式 设计模式04 - 适配器模式...

  • 设计模式四、抽象工厂模式

    系列传送门设计模式一、单例模式设计模式二、简单工厂模式设计模式三、工厂模式设计模式四、抽象工厂模式 抽象工厂模式 ...

  • 工厂模式

    java设计模式-工厂模式 工厂模式: 工厂模式是java设计模式里最常用的设计模式之一。 工厂模式属于创建型模式...

  • 设计模式之工厂模式

    设计模式之工厂模式 标签(空格分隔): 设计模式 工厂模式 设计模式的感念 设计模式的应用 工厂设计模式的产生 工...

  • 设计模式三、工厂模式

    系列传送门设计模式一、单例模式设计模式二、简单工厂模式设计模式三、工厂模式设计模式四、抽象工厂模式 工厂模式 在一...

  • 设计模式一、单例模式

    系列传送门设计模式一、单例模式设计模式二、简单工厂模式设计模式三、工厂模式设计模式四、抽象工厂模式 简单单例(推荐...

  • 单件设计模式

    一、定义 设计模式 设计模式就是一种更好的编写代码方案。 常见设计模式 工厂设计模式、抽象工厂设计模式、抽象工厂设...

  • iOS设计模式(三)之抽象工厂模式

    设计模式系列传送门 iOS设计模式(一)之简单工厂模式iOS设计模式(二)之工厂模式iOS设计模式(三)之抽象工厂...

  • iOS设计模式(一)之简单工厂模式

    设计模式系列传送门 iOS设计模式(一)之简单工厂模式iOS设计模式(二)之工厂模式iOS设计模式(三)之抽象工厂...

网友评论

      本文标题:TS 设计模式01 - 工厂模式

      本文链接:https://www.haomeiwen.com/subject/lrithktx.html