TypeScript实现设计模式——工厂模式

   2023-02-09 学习力0
核心提示:上回用typescript实现了单例模式,这回来实现工厂模式。工厂模式又分为简单工厂模式、工厂方法模式以及抽象工厂模式。简单工厂模式简单工厂模式通常在业务比较简单的情况下使用,它有三个部分组成:工厂类、抽象产品类、具体产品类。抽象产品类abstract class

上回用typescript实现了单例模式,这回来实现工厂模式。工厂模式又分为简单工厂模式、工厂方法模式以及抽象工厂模式。

简单工厂模式

简单工厂模式通常在业务比较简单的情况下使用,它有三个部分组成:工厂类、抽象产品类、具体产品类。

抽象产品类

abstract class Pizza {
  public abstract show(): void;
  public abstract cut(): void;
}

具体产品类

class KFCPizza extends Pizza {
  public show(): void {
    console.log('This is KFCPizza!');
  }
  public cut(): void {
    console.log('Cut KFCPizza!');
  }
}

class MCPizza extends Pizza {
  public show(): void {
    console.log('This is MCPizza!');
  }
  public cut(): void {
    console.log('Cut MCPizza!');
  }
}

工厂类

class PizzaFactory {
  /**
   * 静态工厂方法
   * @param pizzaType 限制传入的参数为类,而非类的实例
   */
  public static createPizza(pizzaType: new () => Pizza): Pizza {
    let pizza = null;

    try {
      pizza = new pizzaType();
    } catch (e) {
      console.error('Create failed!');
    }

    return pizza;
  }
}

测试

let pizza = PizzaFactory.createPizza(KFCPizza);
pizza.show();

pizza = PizzaFactory.createPizza(MCPizza);
pizza.show();

工厂方法模式

正常情况下,简单工厂模式每次增加新的产品都需要在工厂类中增加对应的逻辑,这样就违背了开闭原则(但因为ts和我举的例子的原因体现不出这个缺点)。工厂方法模式就解决了这个问题,同时它能更好的解决复杂的业务环境。

工厂方法模式具有四个部分:抽象工厂类、具体工厂类、抽象产品类、具体产品类。

抽象产品类

abstract class Pizza {
  public abstract show(): void;
  public abstract cut(): void;
}

具体产品类

class KFCPizza extends Pizza {
  public show(): void {
    console.log('This is KFCPizza!');
  }
  public cut(): void {
    console.log('Cut KFCPizza!');
  }
}

class MCPizza extends Pizza {
  public show(): void {
    console.log('This is MCPizza!');
  }
  public cut(): void {
    console.log('Cut MCPizza!');
  }
}

抽象工厂类

abstract class PizzaFactory {
  public abstract createPizza(): Pizza;
}

具体工厂类

class KFCPizzaFactory extends PizzaFactory {
  public createPizza(): Pizza {
    try {
      return new KFCPizza();
    } catch (error) {
      console.log(error);
    }
  }
}

class MCPizzaFactory extends PizzaFactory {
  public createPizza(): Pizza {
    try {
      return new MCPizza();
    } catch (error) {
      console.log(error);
    }
  }
}

测试

let factory: PizzaFactory = new KFCPizzaFactory();
let pizza = factory.createPizza();
pizza.show();

当我们需要增加新的产品时,只需要增加对应的工厂类而不需要更改原本工厂类内部的逻辑,完全符合了开闭原则。

抽象工厂模式

学习抽象工厂模式之前,首先要先了解两个概念:产品等级结构产品族

  • 产品等级结构

    产品等级结构即产品的继承结构,例如抽象的披萨类和具体某品牌的披萨类之间就构成了一个产品等级结构。

  • 产品族

    位于不同产品等级结构中的一组产品,功能相关联的产品组成的家族,如KFC水果披萨、MC水果披萨都是水果披萨,就可以放到同一个产品族中。

抽象工厂模式具有和工厂方法模式一样的四个部分:抽象工厂类、具体工厂类、抽象产品类、具体产品类。

抽象产品类

// KFC产品父类
abstract class KFCPizza {
  public abstract show(): void;
  public abstract cut(): void;
}

// MC产品父类
abstract class MCPizza {
  public abstract show(): void;
  public abstract cut(): void;
}

具体产品类

// 具体KFCPizza类
class KFCFruitPizza extends KFCPizza {
  public show(): void {
    console.log('This is KFCFruitPizza!');
  }
  public cut(): void {
    console.log('Cut KFCFruitPizza!');
  }
}

class KFCCheesePizza extends KFCPizza {
  public show(): void {
    console.log('This is KFCCheesePizza!');
  }
  public cut(): void {
    console.log('Cut KFCCheesePizza!');
  }
}

// 具体KFCPizza类
class MCFruitPizza extends MCPizza {
  public show(): void {
    console.log('This is MCFruitPizza!');
  }
  public cut(): void {
    console.log('Cut MCFruitPizza!');
  }
}

class MCCheesePizza extends MCPizza {
  public show(): void {
    console.log('This is MCCheesePizza!');
  }
  public cut(): void {
    console.log('Cut MCCheesePizza!');
  }
}

抽象工厂类

abstract class PizzaFactory {
  public abstract createKFCPizza(): KFCPizza;
  public abstract createMCPizza(): MCPizza;
}

具体工厂类

// 水果披萨工厂
class FruitPizzaFactory extends PizzaFactory {
  public createKFCPizza(): KFCPizza {
    try {
      return new KFCFruitPizza();
    } catch (error) {
      console.log(error);
    }
  }
  public createMCPizza(): MCPizza {
    try {
      return new MCFruitPizza();
    } catch (error) {
      console.log(error);
    }
  }
}

// 芝士披萨工厂
class CheesePizzaFactory extends PizzaFactory {
  public createKFCPizza(): KFCPizza {
    try {
      return new KFCCheesePizza();
    } catch (error) {
      console.log(error);
    }
  }
  public createMCPizza(): MCPizza {
    try {
      return new MCCheesePizza();
    } catch (error) {
      console.log(error);
    }
  }
}

测试

let factory: PizzaFactory = new CheesePizzaFactory();
let cheesePizza = factory.createKFCPizza();
cheesePizza.show();
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 项目中使用TypeScript的TodoList实例详解
    项目中使用TypeScript的TodoList实例详解
    目录为什么用todolisttodolist的ts化数据到视图实现handleTodoItemreadonly分类交叉类型新增功能联合类型可选属性数据转视图总结为什么用todolist现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定、遍历、条件
    03-16
  • React之 hook / class 结合typescript笔记
    React之 hook / class 结合typescript笔记
    使用 create-react-app 开启 TypeScriptCreate React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时,你可以运行 npx create-react-app my-app
    03-08
  • Angular基础(三) TypeScript
    Angular基础(三) TypeScript
       一、模仿Reddita) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为:界面可以看到了:b) 对于界面输入的数据,获取的方式有点特别,使用了#newlink这样的语法,newlink是一个对象,现在代表就是所在的inp
    03-08
  • electron教程(番外篇二): 使用TypeScript版本的
    electron教程(一): electron的安装和项目的创建electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLintelectron
    03-08
  • 使用 ESModule 和 TypeScript 构建 Node.js 环境
    使用 ESModule 和 TypeScript 构建 Node.js 环
    介绍由于我经常使用 React,所以我在前端接触过 Node.js,但我从未接触过后端。正常搭建环境的时候,不能使用import语句,变成了require语句,很不方便。我认为有各种各样的错误,所以如果你能指出它们,我将不胜感激。执行环境macOS 蒙特雷 ver12.5.1MacBook
    03-08
  • [个人发展] 我做了一个可以永远谈论任何事情的女士对话AI(TypeScript,Python)
    [个人发展] 我做了一个可以永远谈论任何事情的
    在个人发展中对话式人工智能服务 Eveki我做了虚构角色1这是一项以人工智能为特色的服务,可以再现并享受自然对话。这一次,作为第一个艾小姐发表了。请先尝试实物。服务概览与人工智能对话基本上只需输入您的信息是。对话是用女士的语言进行的,就像人类一样
    03-08
  • 使用 Node.js (TypeScript) 和 Azure Functions 创建无服务器 REST API,并获得 CosmosDB 更改源作为奖励。
    使用 Node.js (TypeScript) 和 Azure Functions
    介绍在本文中,我们将使用 azure 函数和 ComsmosDB 创建一个无服务器 REST API 应用程序。使用的语言是 Node.js/TypeScript。此外,由于我们使用 CosmosDB 作为数据库,因此我们将使用 Azure 函数触发器接收 Change Feed 事件作为奖励。创建资源创建资源组az
    03-08
  • 安装 TypeScript 并编译成JS
    安装 TypeScript 并编译成JS
    官网: https://github.com/microsoft/TypeScriptTypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。TypeScript是一种应用级JavaScript语言。TypeScript为JavaScript添加了可选类型,支持针对任何浏
    03-08
  • 使用TypeScript,AngularJs和Web API构建基本的C
    原文地址:using typescript with angularjs and web api 版权归其作者所有.在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更
    02-10
  • Typescript 中类的继承
    Typescript中类的定义与继承与后端开发语言java/C#等非常像,实现起来非常方便,而且代码便于阅读。用Typescript写较大项目时是非常有优势的。/** * BaseClass */class BaseClass {constructor(name:string,age:number) {this.name=name;this.age=age;}name:s
    02-09
点击排行