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

前言

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

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

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

接一个需求

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

js 复制代码

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

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

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

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

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

简单工厂模式

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

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

js 复制代码

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 版本

js 复制代码

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里面的代码，其实也是违反了开闭原则的，所谓开闭原则，需求变了，只进行扩展，不修改被调用者代码，甚至什么代码都不用改。

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