前端相关的设计模式

设计模式原则

1. 创建型

---

工厂模式

A.简单工厂模式

//对同一类对象创建过程的抽象，在形式上它仅仅只是简单的通过 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);

B.工厂方法模式

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

C.抽象工厂模式

// 工厂方法模式 主要是作用与同一类产品，比如说：手机，而 抽象工厂模式 是对一产品簇的抽象，比如说， 小米有小米手机，小米笔记本…
// 手机的抽象类
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);

个人理解的工厂模式，本身就是一种组装拼接,各种具有共同属性抽成一个共性类，有时带着特殊的方法以便继承；通过 new 和继承的方式实现组装；

单例模式

function f() {}
const a = f.prototype,
  b = Object.getPrototypeOf(f);
console.log(a, b);

订阅发布者模式