js设计模式--工厂模式

Posted 前端鸡腿哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js设计模式--工厂模式相关的知识,希望对你有一定的参考价值。

作用:

  • 封装对象创建的过程。

与构造器模式对比:

  • 构造器模式:抽象不同实例对象之间的变与不变。比如说有两个用户对象,他们都有各自的属性与方法,我们就需要考虑他们两个之间的个性与共性,然后去设计构造函数了

  • 工厂模式:抽象不同构造函数/类之间的变与不变。比如有两个构造函数,他们有很多属性与方法是相同的,但也有不同的,这个时候我们就要去分析如何去合并这两个构造函数让新的构造函数能同时适用于这两种构造函数乃至于后续添加的更多构造函数。

案例:
下面是两个职业的构造函数:

function Coder(name , age) {
this.name = name
this.age = age
this.career = 'coder'
this.work = ['写代码','写系分', '修Bug']
}
function ProductManager(name, age) {
this.name = name
this.age = age
this.career = 'product manager'
this.work = ['订会议室', '写PRD', '催更']
}

仔细分析这两个构造函数,发现他们的不变是他们的属性key都一样,变化career和work的不同,并且work属性由career属性决定,那么如果想要把这两个构造函数合并,可以考虑career属性从外部传入,同时建立一个 career到work的自动映射,这样就可以实现构造函数的合并了。具体实现代码如下:

function User(name , age, career, work) {
this.name = name
this.age = age
this.career = career
this.work = work
}

function Factory(name, age, career) {
let work
switch(career) {
case 'coder':
work = ['写代码','写系分', '修Bug']
break
case 'product manager':
work = ['订会议室', '写PRD', '催更']
break
case 'boss':
work = ['喝茶', '看报', '见客户']
case 'xxx':
// 其它工种的职责分配
...

return new User(name, age, career, work)
}

如上所示,通过switch完成work的自动映射,最终返回公共的构造函数User创建的新对象,这样就完成了一个工厂模式。

总结

工厂模式就是封装创建对象的过程,你只管向工厂传递你想要传递的参数,最后生成对象的工作交给工厂。所以工厂模式的目的就是让你无脑传参


以上是关于js设计模式--工厂模式的主要内容,如果未能解决你的问题,请参考以下文章

关于js的设计模式(简单工厂模式,构造函数模式,原型模式,混合模式,动态模式)

js设计模式---工厂模式

PHP面向对象之选择工厂和更新工厂

详解JS设计模式

JS设计模式温习简单工厂模式工厂方法模式抽象工厂模式概念

3 种工厂模式详解(JS)