JavaScript设计模式之工厂模式

介绍

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

举例

• 去购买汉堡，直接点餐、取餐，不会自己做
• 商店要封装做汉堡的工作，做好直接给买着不会将面包鸡肉等给买者

UML类图

image

• 创建一个Product商品类包含name,init,fun1,fun2等属性和方法
• 创建一个Creator创建类 返回一个Product类，这样在new Product的时候可以考虑不直接new的形式而通过Creator实例的create方法返回一个Product实例

代码演示

//商品类
    class Product{
        constructor(name){
            this.name = name
        }
        init(){
            alert(`init -- ${this.name}`)
        }
        fun1(){
            alert('fun1')
        }
        fun2(){
            alert('fun2')
        }
    }

    //工厂类
    class Creator{
        create(name){
           return new Product(name)
        }
    }

    const c = new Creator();
    const pro = c.create('汉堡包')
    pro.init()
    pro.fun1()

使用场景

• jQuery - $('div')
• React.createElement
• vue异步组件

jQuery

• ('div')的区别

1. 首先是书写麻烦，如果全部使用$('div')工厂创建的话不会带来链式操作的复制
2. 其次是如果jQuery的名字发生变化，将会是灾难性的,工厂模式创建的对象跟需要创建的对象的联系只有一次只需修改一个地方即可

    class JQuery {
        constructor(selector) {
            let slice = Array.prototype.slice
            let dom = slice.call(document.querySelectorAll(selector))
            let len = dom ? dom.length : 0
            for (let i = 0; i < len; i++) {
                this[i] = dom[i]
            }
            this.length = len
            this.selector = selector || ''
        }

        append(node) {

        }

        addClass(name) {

        }

        html() {

        }
        //...若干api

    }
    window.$ = function (selector) {
        return new JQuery(selector)
    }

React.createElement

    //jsx
    var profile = `<div>
        <img src="avatar.png" alt="">
        <h3>{[user.firstName,user.lastName].join('-')}</h3>
      </div>`;


    //React 将书写的jsx转化成这样的
    var profile = React.createElement('div',null,
        React.createElement('img',{src:'avatar.png',alt:''}),
        React.createElement('h3',null,[user.firstName,user.lastName].join('-'))
    )
    
     //创建虚拟dom
    class Vnode{
        constructor(tag,attrs,chilren){
            //。。。省略
        }
    }
    React.createElement = function (tag,attrs,chilren) {
        return new Vnode(tag,attrs,chilren)
    }

vue的异步组件

//只是演示代码
    Vue.component('async-example',function (resolve,reject) {
        setTimeout(function () {
            resolve({
                template:`<div>I am async</div>`
            })
        },1000)
    })

代码：https://github.com/ahwgs/design-pattern-learning/tree/master/3%E3%80%81JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F
原文:https://www.ahwgs.cn/javascriptshejimoshizhigongchangmoshi.html