7 工厂模式 – 前端设计模式系列教程

介绍

  • 将new 操作单独封装
  • 遇到new时,就要考虑是否该使用工厂模式

例如一个汉堡店,用来生成汉堡

演示

class Product{
    constructor(name){
        this.name = name
    }
    init(){}
    fn1(){}
    fn2(){}
}
class Creator{
    create(name){
        return new Product(name)
    }
}
let creator  = new Creator()
let p = creator('p1')
p.init()
p.fn1()

场景

// jQuery - $('div')
export default  function (selector){
    return new jQuery(selector)
}


// React.createElement
ReadableStreamDefaultController.createElement = function (tag, attr, children){
    return new Vnode(tag, attr, children)
}


// vue异步组件
Vue.component('async-example', function (resolve, reject) {
    setTimeout(function () {
        resolve({
            template: '<div>a</div>'
        })
    }, 1000)
})

设计原则验证

  • 构造函数和创建这分离
  • 符合开放封闭原则
本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:21 次浏览