欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

(三）js 前端开发中工厂模式的设计模式--简单工厂模式

最编程 2024-07-18 10:56:05
...
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();

上一篇： CSS 位置定位（固定、粘性）

下一篇： position: fixed 是否必须相对于浏览器窗口？

推荐阅读