介紹

• 將new操作單獨(dú)封裝
• 遇到new時(shí)⊙卧樱考慮是否使用工廠模式

舉例

• 去購(gòu)買漢堡，直接點(diǎn)餐批什、取餐农曲，不會(huì)自己做
• 商店要封裝做漢堡的工作，做好直接給買著不會(huì)將面包雞肉等給買者

UML類圖

image

• 創(chuàng)建一個(gè)Product商品類包含name,init,fun1,fun2等屬性和方法
• 創(chuàng)建一個(gè)Creator創(chuàng)建類 返回一個(gè)Product類驻债，這樣在new Product的時(shí)候可以考慮不直接new的形式而通過Creator實(shí)例的create方法返回一個(gè)Product實(shí)例

代碼演示

//商品類
    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()

使用場(chǎng)景

• jQuery - $('div')
• React.createElement
• vue異步組件

jQuery

• ('div')的區(qū)別

1. 首先是書寫麻煩乳规，如果全部使用$('div')工廠創(chuàng)建的話不會(huì)帶來鏈?zhǔn)讲僮鞯膹?fù)制
2. 其次是如果jQuery的名字發(fā)生變化，將會(huì)是災(zāi)難性的,工廠模式創(chuàng)建的對(duì)象跟需要?jiǎng)?chuàng)建的對(duì)象的聯(lián)系只有一次只需修改一個(gè)地方即可

    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轉(zhuǎn)化成這樣的
    var profile = React.createElement('div',null,
        React.createElement('img',{src:'avatar.png',alt:''}),
        React.createElement('h3',null,[user.firstName,user.lastName].join('-'))
    )
    
     //創(chuàng)建虛擬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