设计模式——模版模式

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」

简述

模版模式是指在父类中设置模版规则，规则中用到的材料在子类中进行实践。这样就可以实现多个子类公用同样的父类模版。

案例

喝咖啡

喝咖啡会有一下几个步骤：

泡咖啡
倒出咖啡
等一会儿
喝咖啡使用代码来实现：

class Coffee {
    bubble() {
        console.warn('泡咖啡')
    }
    pourOut() {
        console.warn('倒咖啡')
    }
    wait() {
        console.warn('等一会儿')
    }
    drink() {
        console.warn('喝咖啡')
    }
    init() {
        this.bubble()
        this.pourOut()
        this.wait()
        this.drink()
    }
}
const coffee = new Coffee();
coffee.init()

如果想实现喝咖啡、喝茶，需要把逻辑抽离出来。

喝饮料

咖啡、茶都属于饮料，于是我们抽离出一个饮料的父类：

class Drinks {
    init() {
        this.bubble()
        this.pourOut()
        this.wait()
        this.drink()
    }
}

咖啡、茶都是子类：

class Coffee extends Drinks {
    bubble() {
        console.warn('泡咖啡')
    }
    pourOut() {
        console.warn('倒咖啡')
    }
    wait() {
        console.warn('等一会儿')
    }
    drink() {
        console.warn('喝咖啡')
    }
}
class Tea extends Drinks {
    bubble() {
        console.warn('泡茶')
    }
    pourOut() {
        console.warn('倒茶')
    }
    wait() {
        console.warn('等一会儿')
    }
    drink() {
        console.warn('喝茶')
    }
}
const coffee = new Coffee();
coffee.init()
const tea = new Tea();
tea.init()

执行模版在父类中，执行函数在子类中。开发过程中如果疏忽了，子类没有实现执行函数，怎么办？我们必须做好错误提示。

错误提示

在父类中添加错误提示：当子类没有去实践某个方法，在执行时则会报错。

class Drinks {
    bubble() {
        console.warn('执行bubble方法报错')
    }
    pourOut() {
        console.warn('执行pourOut方法报错')
    }
    wait() {
        console.warn('执行wait方法报错')
    }
    drink() {
        console.warn('执行drink方法报错')
    }
    init() {
        this.bubble()
        this.pourOut()
        this.wait()
        this.drink()
    }
}

不利用类的继承，可以实现这种模式吗？

不实用继承

利用闭包的原理实现：

const Drinks = function(param) {
    const bubble = param.bubble || function() {
        console.warn('执行bubble方法报错')
    }
    const pourOut = param.pourOut || function() {
        console.warn('执行pourOut方法报错')
    }
    const wait = param.wait || function() {
        console.warn('执行wait方法报错')
    }
    const drink = param.drink || function() {
        console.warn('执行drink方法报错')
    }
    const F = function() {}
    F.prototype.init = function() {
        bubble()
        pourOut()
        wait()
        drink()
    }
    return F;
}
const Coffee = Drinks({
    bubble() {
        console.warn('泡咖啡')
    },
    pourOut() {
        console.warn('倒咖啡')
    },
    wait() {
        console.warn('等一会儿')
    },
    drink() {
        console.warn('喝咖啡')
    }
})
const coffee = new Coffee()
coffee.init()

这种方法，依旧非常灵活好用。