javascript设计模式-简单工厂模式

简单工厂模式,又被称为静态工厂方法。通过一个工厂对象来创建某一种产品对象的实例,主要是用来创建同一种类型的对象
简单来说就是通过一个方法决定到底要创建那个类的实例
我们用水果来举例

那代码如何写呢?
首先,我们需要创建一系列水果的抽象产品

类实例化工厂函数

// 创建苹果类
class Apple {
  constructor(){
    this.name = 'apple'
  }
  getColor(){
    return 'Red'
  }
}

// 创建香蕉类
class Banana {
  constructor(name){
    this.name = 'banana'
    this.count = 10
  }
  getCount(){
    return this.count--
  }
}


创建了很多水果类,每个水果类可以实现自己的一系列逻辑,而具体的到底要用哪个类名创建你想要的水果你是不需要关心的,所以我们需要一个工厂,用来生产这些水果实体,那如何生产呢?
定义一个Fruits工厂类

class Fruits {
  constructor(type){
    switch(type){
      case 'apple':
        return new Apple()
      case 'banana':
        return new Banana()
    }
  }
}

我们在使用的时候只需要new Fruits,传入你想实例化的内容,就能够得到相应的水果实体

const apple = new Fruits('apple')
// apple.name => apple
// apple.getColor() => Red
const banana = new Fruits('banana')
// banana.name => banana
// banana.getCount => 10

这样提供给别人的时候就不需要那么多的累,他们只要知道Fruits和type就能得到自己想要的结果
看到这里可能就有同学会说了,上面创建各种水果类的时候,很多地方是相同的,相同的部分也是可以提取出来的,简单工厂模式最主要的理念就是创建对象,创建一个水果可能有很多相同的部分,当然还有一部分不同的部分,我们也可以创建一个公共的创建水果类的方法
于是就有了以下代码

创建新对象形式

class creatFruit{
  constructor(name, color, count){
    this.name = name
    this.color = color
    this.count = count
  }
  getColorName(){
    return this.color + this.name
  }
}

// 你也可以
const creatFruit = ({name, color, count}) => ({
  name,
  color,
  count,
  getColorName() {
    return this.color + this.name
  }
})

你会发现其实创建水果类也可以使用工厂模式,最终创建水果可以这样写

const apple = new creatFruit('apple', 'red', 10)
const banana = new creatFruit('banana', 'yellow', 20)
// apple.getColorName() => redapple
// banana.getColorName() => yellowbanana
// 或者可以这样
const apple = creatFruit({name: 'apple', color: 'red', count:10})
// apple.getColorName() => redapple

使用这种方式,我们还可以将数组转换为键值对象

const createObjectFromArray = ([key, value]) => ({
  [key]: value
});
// createObjectFromArray(['name', 'FE情报局']) => {name: 'FE情报局'}

总结

上面其实给到了大家两种使用工厂函数的方式,第一种是通过类实例化的方式进行的创建。第二种是通过扩展对象的形式,用函数返回一个新的对象的形式。
第一种的好处是,如果这些类来自同一个父类,那其中父类原型上的方法是可以共用的
但是第二种由于是通过函数返回了一个新的对象,其方法不具有共用性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FE情报局

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值