一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

设计模式在Typscript中的应用–工厂模式

前言

最近越来越确定自学的动力很差,逼着学,也总是不自觉的跳出去,思维上的跳出去。这是我很大的焦虑来源。我记得在学校的时候,图书馆,学的嘎嘎好。总结下来就是:

  • 能够专注
  • 一大块时间专注
  • 虽然抗拒,但是能主动的让自己专注,能说服自己放下抗拒去专注。

现在就没有了,带不动自己的感觉。慢慢来吧。。。

接一个需求

假设有这样的需求,开发一个按钮组件,这个组件需要兼容两个操作系统,windows和web两个。于是这样设计

function windowsButton(){
  console.log('window-button')
}
function webButton(){
  console.log('web-button')
}
if(OS.windows){
   new  windowsButton()
}else{
  new webButton(){}
}

这看上去很好,现在新组长来了,改了规范,要首字母大写了!一个两个还好,但是项目已经进行到一定程度了,大量地方都用了windowsButton。

你可能会说,编辑器一键改变,不就行了,但是你哪里知道,哪里会出错呢?因为改动涉及到原来的功能执行路径,测试人员是不是所有功能都要重新测试一下呢?

你可能又会说了,保证不会出问题!好,相信你的保证,但是也不能否定这样做是有风险的,假如,更改次数多了,你心里不慌嘛,不觉得老是这样不low?

从设计原则来说,这违反了开闭原则。该原则,只能进行扩展,不修改原来代码,尤其是底层(被调用)的代码。

简单工厂模式

可不可以缩小这个改动范围呢?

我们在 new webButton 包一层工程方法

function windowsButton(){
  console.log('window-button')
}
function webButton(){
  console.log('web-button')
}

function bottonFactory(){}
bottonFactory.prototype.getButton=function(){
  if(OS.windows){
   return  new windowsButton()
  }else{
   return new webButton()
  }
}
 new BottomFactory().getButton()

在包了一层的情况下,只要改factory里面的代码就可以了。

Typescrpt 版本

class windowsButton {
  constructor(){
  console.log('window-button')  
  }
}
class webButton {
  constructor(){
  console.log('web-button')  
  }
}
class bottonFactory {
 static getButton(){
   if(OS.windows){
   return  new windowsButton()
  }else{
   return new webButton()
  }
 }
}
bottonFactory.getButton()

它的特点

所谓工厂模式:是指我们写的代码,写出来的功能像工厂一样,执行完了之后,产生了调用者要的东西。其主要特征是。调用者不要再去关心产生这个产品的细节了。

不会应该像改规范,就大范围改高层代码的事情。也就是说,因为调用代码和被调用者耦合太高,而不得不改调用代码的情况。

然而只要改factory里面的代码,其实也是违反了开闭原则的,所谓开闭原则,需求变了,只进行扩展,不修改被调用者代码,甚至什么代码都不用改。

显然,简单工厂模式,没有做到这点。只做了半套,下节,工厂方法模式。

原文链接:https://juejin.cn/post/7316321509857263656 作者:daydayupx

(0)
上一篇 2023年12月26日 下午5:00
下一篇 2023年12月26日 下午5:10

相关推荐

发表评论

登录后才能评论