分享好友 编程语言首页 频道列表

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

typescript文章/教程  2023-02-09 10:210

上回用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();

查看更多关于【typescript文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
electron教程(一): electron的安装和项目的创建electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLintelectron

0评论2023-03-08610

使用TypeScript,AngularJs和Web API构建基本的CRUD Web 应用
原文地址:using typescript with angularjs and web api 版权归其作者所有.在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更

0评论2023-02-10391

Typescript 中类的继承
Typescript中类的定义与继承与后端开发语言java/C#等非常像,实现起来非常方便,而且代码便于阅读。用Typescript写较大项目时是非常有优势的。/** * BaseClass */class BaseClass {constructor(name:string,age:number) {this.name=name;this.age=age;}name:s

0评论2023-02-09350

使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原生app的开发框架。一次变编码多平台运行,非常强大。但是个人不喜欢js的过于灵活(弱类型)的语法。强大的强类型语言Typescript(简称TS)是我的首选,他可以编译成JavaScript,编译成的JavaScript代

0评论2023-02-09391

TypeScript的安装、使用及配置
JS是一种弱类型语言,对于代码的维护和重构是非常困难的。TypeScript是一个编译到纯JS的有类型定义的JS超集,可以极大的提升代码的健壮性。使用TS后,能够方便的查看函数定义、默认参数及类型、变量结构体等,同时对于IDE的参数类型提示也是非常友好的。优点

0评论2023-02-09713

vue-type-check: Vue 模板中的 Typescript 类型检查
越来越多人开始尝试使用 Typescript 编写他们的 vue 项目,vue 本身也在不断加强对 Typescript 的支持(官方提供 vue-class-component 库、使用 Typescript 编写 Vue 3.0 等),但是对于组件中模板部分的类型检查仍然有很大的局限性。为此我们开源了一个易

0评论2023-02-09756

JavaScript面向对象轻松入门之抽象(demo by ES5、ES6、TypeScript)
抽象的概念  狭义的抽象,也就是代码里的抽象,就是把一些相关联的业务逻辑分离成属性和方法(行为),这些属性和方法就可以构成一个对象。  这种抽象是为了把难以理解的代码归纳成与现实世界关联的概念,比如小狗这样一个对象:属性可以归纳出“毛色”、

0评论2023-02-09777

Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)
Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loading就没法搞了。因此我使用了webpack2,webpack2自带tree shaking,只要将tsconfig中的module设置成es201

0评论2023-02-09811

Typescript学习笔记 TYPESCRIPT
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。 安装 TypeScript命令行工具安装:npm install -g typescript编译一个 TypeScript 文件:tsc hello.ts  原始数据类型/ 任意值为每一个变量提前申明该类型,则该变量取值只能为申明的

0评论2023-02-09688

typescript结合three.js
import * as THREE from "three";// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.tsclass Game{private _scene: THREE.Scene;//private _canvas: HTMLCanvasElement;private _camera: THREE.PerspectiveCamera;private _ren

0评论2023-02-09748

更多推荐