首页 > 其他分享 >前端-工厂模式

前端-工厂模式

时间:2023-03-27 17:33:25浏览次数:33  
标签:const string price number 模式 工厂 new 前端 name

工厂模式大体分为三类: 简单工厂模式工厂方法模式抽象工厂模式。三者之间的关系,也是渐进式的,抽象化的范围也是越来越高。

  • 简单工厂模式:根据不同条件去生成不同对象(当数据量多时,简单工厂模式显而易见的的不适用)
  • 工厂方法模式:归类对象,对同一类型的对象进行归整(作用与同一类产品)
  • 抽象工厂模式:不同类别的对象,进行层层递进

简单工厂模式

interface IPhone {
  name: string;
  price: number;
}


enum Phones {
  hw,
  mi
}

// 这里的 Shop 则表示一个工厂,它将数据包裹,根据需求提供数据。
class Shop {
  // 华为手机
  hwPhone:IPhone = {
    name: "mate 40",
    price: 4000,
  };
  
  // 小米手机
  miPhone:IPhone = {
    name: "p40",
    price: 4000,
  };

  getPhone(type: Phones): IPhone{
    switch (type) {
      case Phones.hw:
        return this.hwPhone;
      case Phones.mi:
        return this.miPhone;
    }
  }
}

const shop1 = new Shop();
const mi1 = shop1.getPhone(Phones.mi);
mi1.name = "nihao";

const shop2 = new Shop();
const mi2 = shop2.getPhone(Phones.mi);

console.log(mi1, mi2);

工厂方法模式

interface IPhone {
  name: string;
  price: number;
}
class Phone {
  name: string;
  price: number;

  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }
}

class Shop {
  getPhone(name: string, price: number): IPhone{
    // 通过 子类 去实现数据的创建
    return new Phone(name, price);
  }
}

const shop1 = new Shop();
const phone1 = shop1.getPhone("华为", 4500);

const shop2 = new Shop();
const phone2 = shop2.getPhone("小米", 4000);

console.log(phone1, phone2);

抽象工厂模式

// 手机的抽象类
abstract class Phone {
  name: string;
  price: number;

  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }

  abstract call(): void;
}

// 笔记本的抽象类
abstract class Laptop {
  name: string;
  price: number;

  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }

  // 打游戏
  abstract game(gameName: string): void;
}

/**
 * 小米本身作为一个产品簇,拥有手机,笔记本的多个品种,
 *  1. 先实现产品簇中的某个产品类;
 *  2. 在通过整个工厂,整合所有的产品
 */
class MiPhone extends Phone {
  call() {
    console.log("少林功夫好哎");
  }
}

class MiLaptop extends Laptop {
  game(gameName: string) {
    console.log(`小米电脑适合${gameName}`);
  }
}

class Mi {
  getPhone(name: string, price: number) {
    return new MiPhone(name, price);
  }

  getLaptop(name: string, price: number) {
    return new MiLaptop(name, price);
  }
}

class HuaweiPhone extends Phone {
  call() {
    console.log("少林功夫好哎");
  }
}

/**
 * 华为效果类似 
 * 
*/
class HuaweiLaptop extends Laptop {
  game(gameName: string) {
    console.log(`小米电脑适合${gameName}`);
  }
}

class Huawei {
  getPhone(name: string, price: number) {
    return new HuaweiPhone(name, price);
  }

  getLaptop(name: string, price: number) {
    return new HuaweiLaptop(name, price);
  }
}

const miShop = new Mi();
const miPhone = miShop.getLaptop("P40", 3600);
console.log(miPhone);

const huaweiShop = new Huawei();
const huaweiPhone = huaweiShop.getLaptop("meta 40", 4000);
console.log(huaweiPhone);

标签:const,string,price,number,模式,工厂,new,前端,name
From: https://www.cnblogs.com/ajaemp/p/17262306.html

相关文章

  • Android 架构设计(一):设计模式分析
    现有Android主流设计模式有哪些?1:无架构     -很多人把无架构定为MVC,这边深海要纠正一下,无架构!=MVC 2:MVC      Model -数据模型/数据来源。View......
  • Windows RT的桌面模式是一个累赘!
    【编者按】TomWarren是著名科技博客TheVerge的编辑,他上个月参加了IFA2012伯林国际消费电子会展,并亲自目睹了WindowsRT操作系统的庐山真面目。他认为微软在打造更好的触......
  • 前端vscode常用插件
    运行html文件(openinbrowser)运行快捷键:Alt+Bpx转rem(px2rem)将括号变色,便于观察(BracketPairColorizer)改变对齐线颜色(Guides) ......
  • 解决 前端 设置滚动条的宽度后 滚动条消失的问题(解决ie浏览器样式无效的问题)
    .op{flex:1;width:90%;flex-direction:column;overflow:auto;height:90%;padding-right:5px;}.op::-webkit-scrollbar{width:5px;}.op::......
  • 结构型:策略模式
    定义  定义一系列的算法,将他们一个个封装起来,使他们直接可以相互替换。 算法:就是写的逻辑可以是你任何一个功能函数的逻辑封装:就是把某一功能点对应的逻辑给抽......
  • Go语言:一文看懂什么是DI依赖注入(dependency injection)设计模式
    前言:本文主要介绍的是Goalng中关于DI的部分,前一部分会先通过典型的面向对象语言Java引入DI这个概念仅供初学者理解使用,文章如有纰漏敬请指出本文涉及到的知识面较为......
  • 前端设计模式——访问者模式
    访问者模式(VisitorPattern)是一种行为型设计模式,用于将操作与其所操作的对象分离开来。该模式的核心思想是将操作封装在一个访问者对象中,而不是分散在各个对象中。通过将操......
  • 前端传递Base64字符串,后端转流存入OSS
    工具类publicstaticBufferedInputStreambase64Convert(Stringbase64){//解码base64=base64.split(",")[1];try{byte[]......
  • 连续导通模式下的电流纹波
    电流纹波定义定义:电感电流交流量与直流量的比值电流纹波率也可以用单位电感伏秒积的形式给出Et是电感的伏微秒积电流纹波率仅适用于连续导通模式,r的有效值取值范围为0-2......
  • Web前端-HTML标签
    Web前端笔记第一部分:HTML学习HTML快速创建,配合tab键使用table>tr>td*4一个表格,一行四列table>(tr>td*5)*6一个表格下面创建5列6行的表格HTML概述1.什么是HTMLHTML是用来......