(三)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 中添加即可

  // 升级版
  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();
  

  真正工厂模式

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

    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' }
     */