JS设计模式之工厂模式

JS设计模式之工厂模式

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

1. 简单工厂模式

同一类对象创建过程的抽象,在形式上它仅仅只是简单的通过 switch 等判断语句,根据不同条件去生成不同对象,且只能创建现有的数据,如果要添加,必须手动添加。

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);

2. 工厂方法模式

当数据量多时,简单工厂模式显而易见的的不适用,每增加一个项目就要手动添加,内容太多。而 工厂方法模式 则是对 简单工厂模式 的进一步优化,它对同一类对象进行抽象,通过 子类 去创建,从而达到精简代码的目的。

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);

3. 抽象工厂模式

工厂方法模式 主要是作用与同一类产品,比如说:手机,而 抽象工厂模式 是对一产品簇的抽象,比如说, 小米有小米手机,小米笔记本…

// 手机的抽象类
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);

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值