从实例角度解析 TypeScript 设计模式实战(上)

2023-11-30 16:42:51

前言

设计模式是软件工程中的一系列最佳实践，它可以帮助开发者在构建软件时提高代码的可维护性、可扩展性和可重用性。在 TypeScript 中，设计模式同样发挥着重要作用，本文将从实战角度详细解析 TypeScript 中的设计模式，帮助读者深入理解设计模式在 TypeScript 中的应用。

设计模式简介

设计模式是一系列在软件设计中经常遇到的问题及其解决方案的通用。这些解决方案是经过反复试验和实践证明的，可以帮助开发者快速、高效地解决常见问题。设计模式通常分为三大类：创建型模式、结构型模式和行为型模式。

TypeScript 中的设计模式实战

接下来，我们将结合实际案例，详细讲解 TypeScript 中的设计模式。每个设计模式都将从概念、一句话概括、优缺点和实战应用四个方面进行介绍。

创建型模式

创建型模式主要用于创建对象，包括工厂模式、抽象工厂模式、单例模式、建造者模式等。

工厂模式

工厂模式是一种创建对象的模式，它将对象创建过程封装在一个工厂类中，使客户端代码无需直接创建对象，从而提高了代码的可维护性和可扩展性。

一句话概括：工厂模式将对象创建过程封装在一个工厂类中。

优缺点：

优点：提高了代码的可维护性和可扩展性，使客户端代码无需直接创建对象。
缺点：增加了类的数量，可能会导致代码变得更加复杂。

实战应用：

工厂模式在 TypeScript 中经常被用于创建复杂的对象，例如：

class ShapeFactory {
  createShape(type: string): Shape | null {
    switch (type) {
      case "circle":
        return new Circle();
      case "square":
        return new Square();
      case "rectangle":
        return new Rectangle();
      default:
        return null;
    }
  }
}

class Circle implements Shape {
  draw(): void {
    console.log("Drawing a circle.");
  }
}

class Square implements Shape {
  draw(): void {
    console.log("Drawing a square.");
  }
}

class Rectangle implements Shape {
  draw(): void {
    console.log("Drawing a rectangle.");
  }
}

const factory = new ShapeFactory();
const circle = factory.createShape("circle");
const square = factory.createShape("square");
const rectangle = factory.createShape("rectangle");

circle.draw(); // Drawing a circle.
square.draw(); // Drawing a square.
rectangle.draw(); // Drawing a rectangle.

抽象工厂模式

抽象工厂模式是一种创建对象族（即一系列相关或依赖的对象）的模式。它将对象创建过程封装在一个抽象工厂类中，使客户端代码无需直接创建对象，从而提高了代码的可维护性和可扩展性。

一句话概括：抽象工厂模式将对象族创建过程封装在一个抽象工厂类中。

优缺点：

优点：提高了代码的可维护性和可扩展性，使客户端代码无需直接创建对象。
缺点：增加了类的数量，可能会导致代码变得更加复杂。

实战应用：

抽象工厂模式在 TypeScript 中经常被用于创建复杂的对象族，例如：

interface ShapeFactory {
  createCircle(): Circle;
  createSquare(): Square;
  createRectangle(): Rectangle;
}

class DefaultShapeFactory implements ShapeFactory {
  createCircle(): Circle {
    return new Circle();
  }

  createSquare(): Square {
    return new Square();
  }

  createRectangle(): Rectangle {
    return new Rectangle();
  }
}

class ColoredShapeFactory implements ShapeFactory {
  createCircle(): Circle {
    return new ColoredCircle();
  }

  createSquare(): Square {
    return new ColoredSquare();
  }

  createRectangle(): Rectangle {
    return new ColoredRectangle();
  }
}

class Circle {
  draw(): void {
    console.log("Drawing a circle.");
  }
}

class Square {
  draw(): void {
    console.log("Drawing a square.");
  }
}

class Rectangle {
  draw(): void {
    console.log("Drawing a rectangle.");
  }
}

class ColoredCircle extends Circle {
  draw(): void {
    console.log("Drawing a colored circle.");
  }
}

class ColoredSquare extends Square {
  draw(): void {
    console.log("Drawing a colored square.");
  }
}

class ColoredRectangle extends Rectangle {
  draw(): void {
    console.log("Drawing a colored rectangle.");
  }
}

const defaultFactory = new DefaultShapeFactory();
const circle = defaultFactory.createCircle();
const square = defaultFactory.createSquare();
const rectangle = defaultFactory.createRectangle();

circle.draw(); // Drawing a circle.
square.draw(); // Drawing a square.
rectangle.draw(); // Drawing a rectangle.

const coloredFactory = new ColoredShapeFactory();
const coloredCircle = coloredFactory.createCircle();
const coloredSquare = coloredFactory.createSquare();
const coloredRectangle = coloredFactory.createRectangle();

coloredCircle.draw(); // Drawing a colored circle.
coloredSquare.draw(); // Drawing a colored square.
coloredRectangle.draw(); // Drawing a colored rectangle.