(三)js前端开发中设计模式之工厂模式

工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。

简单工厂模式

js 复制代码

const BicycleShop = function () {};

BicycleShop.prototype = {
  sellBicycle(model) {
    let bicycle;
    switch (model) {
      case "BMW":
        bicycle = new BMW();
        break;
      case "BYD":
        bicycle = new BYD();
        break;
      default:
        bicycle = new YaDi();
    }
    return bicycle;
  },
};

function BMW() {
  this.name = "BMW";
}
BMW.prototype = {
  run() {
    console.log("BMW 正在运行");
  },
};

function BYD() {
  this.name = "BYD";
}

BYD.prototype = {
  run() {
    console.log("BYD 正在运行");
  },
};

function YaDi() {
  this.name = "YaDi";
}

YaDi.prototype = {
  run() {
    console.log("YaDi 正在运行");
  },
};

//出手宝马
const bicycleShop = new BicycleShop();
bicycleShop.sellBicycle("BMW").run();

这里我们把成员对象的创建工作交给了外部对象，此时我们要添加新的车型，就不用改变 BicycleShop1，只需要在 BicycleFactory 中添加即可

js 复制代码

// 升级版
const BicycleShop1 = function () {};

const BicycleFactory = {
  createBicycle(model) {
    let bicycle;
    switch (model) {
      case "BMW":
        bicycle = new BMW();
        break;
      case "BYD":
        bicycle = new BYD();
        break;
      case "LuYuan":
        bicycle = new LuYuan();
        break;
      default:
        bicycle = new YaDi();
    }
    return bicycle;
  },
};

BicycleShop1.prototype = {
  sellBicycle(model) {
    let bicycle = BicycleFactory.createBicycle(model);
    return bicycle;
  },
};

//此时我们要添加新的车型，就不用改变BicycleShop1，只需要在BicycleFactory中添加即可

function LuYuan() {
  this.name = "LuYuan";
}

LuYuan.prototype = {
  run() {
    console.log("LuYuan 正在运行");
  },
};

//出手luyuan
const bicycleShop1 = new BicycleShop1();
bicycleShop1.sellBicycle("LuYuan").run();

真正工厂模式

与简单工厂模式的区别在于，他不是使用一个类或是对象来创建实例，而是使用一个子类来创建实例
按照正式的定义，工厂模式是一个将其成员对象的实例化延迟到子类中进行的模式。

js 复制代码

const Bicycle = function () {};
Bicycle.prototype = {
  sellBicycle(model) {
    const bicycle = this.createBycicle(model);
    return bicycle;
  },
  createBycicle(model) {
    throw new Error("子类必须实现createBycicle方法");
  },
};

const BWMBicycle = function () {};
extend(BWMBicycle, Bicycle);
BWMBicycle.prototype.createBycicle = function (model) {
  let bicycle;
  switch (model) {
    case "BWM":
      bicycle = new BMW();
      break;
    case "Yadi":
      bicycle = new YaDi();
      break;
    default:
      throw new Error("没有该型号的自行车");
  }
  return bicycle;
};

const YADIBicycle = function () {};
extend(YADIBicycle, Bicycle);
YADIBicycle.prototype.createBycicle = function (model) {
  let bicycle;
  switch (model) {
    case "BWM":
      bicycle = new BMW();
      break;
    case "Yadi":
      bicycle = new YaDi();
      break;
    default:
      throw new Error("没有该型号的自行车");
  }
  return bicycle;
};

function BMW() {
  this.name = "BMW";
}
BMW.prototype = {
  run() {
    console.log("BMW 正在运行");
  },
};

function BYD() {
  this.name = "BYD";
}

BYD.prototype = {
  run() {
    console.log("BYD 正在运行");
  },
};

function YaDi() {
  this.name = "YaDi";
}

YaDi.prototype = {
  run() {
    console.log("YaDi 正在运行");
  },
};

function extend(subClass, superClass) {
  var F = function () {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;

  //子类增加了一个属性，直接指向了父类的原型对象，prorotype
  subClass.superclass = superClass.prototype;
  //正常情况下，每个类的constructor属性都是指向自己，
  //保证父类的constructor属性指向父类
  if (superClass.prototype.constructor === Object.prototype.constructor) {
    superClass.prototype.constructor = superClass;
  }
}

const bwm = new BWMBicycle();
const yadi = new YADIBicycle();
const bwmBicycle = bwm.sellBicycle("BWM");
console.log("🚀 ~ bwmBicycle:", bwmBicycle);
const bwmBicycle2 = bwm.sellBicycle("Yadi");
console.log("🚀 ~ bwmBicycle2:", bwmBicycle2);
const yadiBicycle = yadi.sellBicycle("Yadi");
console.log("🚀 ~ yadiBicycle:", yadiBicycle);
const yadiBicycle2 = yadi.sellBicycle("BWM");
console.log("🚀 ~ yadiBicycle2:", yadiBicycle2);

/**
 * 🚀 ~ bwmBicycle: { name: 'BMW' }
  🚀 ~ bwmBicycle2: { name: 'YaDi' }
  🚀 ~ yadiBicycle: { name: 'YaDi' }
  🚀 ~ yadiBicycle2: { name: 'BMW' }
 */