(三)js前端开发中设计模式之工厂模式
创始人
2025-01-07 03:06:01
0

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

简单工厂模式

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

相关内容

热门资讯

两分钟要领!青龙辅助3.0,新... 两分钟要领!青龙辅助3.0,新星游辅助软件(辅助)原来是有app(哔哩哔哩)1、打开软件启动之后找到...
四分钟妙招!好友赣南辅助器,人... 四分钟妙招!好友赣南辅助器,人海大厅脚本(辅助)总是有挂插件(哔哩哔哩)1、实时好友赣南辅助器透视辅...
第八分钟指引!九酷众游辅助,新... 第八分钟指引!九酷众游辅助,新卡农辅助(辅助)一贯是真的辅助器(哔哩哔哩)1、进入游戏-大厅左侧-新...
6分钟办法!乐酷大厅怎么安装,... 6分钟办法!乐酷大厅怎么安装,皇豪互众辅助软件是干嘛的(辅助)竟然有挂修改器(哔哩哔哩)所有人都在同...
一分钟方案!楚天游卡五星辅助器... 一分钟方案!楚天游卡五星辅助器,葫芦娃通杀辅助使用(辅助)一贯存在有工具(哔哩哔哩)亲,关键说明,葫...
一分钟操作!陕西三代辅助器,道... 一分钟操作!陕西三代辅助器,道游互娱辅助(辅助)一贯存在有辅助(哔哩哔哩)1、金币登录送、破产送、升...
第9分钟攻略!情怀宜春辅助,新... 第9分钟攻略!情怀宜春辅助,新九哥脚本下载(辅助)竟然真的有软件(哔哩哔哩)第9分钟攻略!情怀宜春辅...
六分钟法门!情怀宜春怎么开挂,... 六分钟法门!情怀宜春怎么开挂,微信小程序嘟嘟十三张脚本(辅助)切实真的有工具(哔哩哔哩)1)微信小程...
第五分钟举措!闲来贵州黑科技辅... 第五分钟举措!闲来贵州黑科技辅助软件,久久互娱科技(辅助)竟然是有软件(哔哩哔哩)1、用户打开应用后...
第四分钟技法!随意玩辅助器视频... 第四分钟技法!随意玩辅助器视频,樱花之盛辅助软件下载(辅助)好像存在有软件(哔哩哔哩)1、让任何用户...