JavaScript设计模式之组合模式

组合模式原理 

<script>

    //组合模式,将多个构造函数组合在一起调用

    //多个构造函数中,调用函数的方法是一致的,就可以使用组合模式


    class Eat {
        do() {
            console.log('正在吃鲱鱼罐头');
        }
        make() {

        }
    }


    class Play {
        run() {
            console.log('正在跑步');
        }
        do() {
            console.log('打篮球');
            return 1 + 1
        }
    }

    class Watch {
        do() {
            console.log('吃零食');
        }
        fly() {
            console.log(11010101);
            return 99999 + 999
        }
    }

    //上面的这3个类函数的调用方式都比较单一,不需要特定传参,只需要调用即可,所以可以组合在一起,通过方法一次性的调用


    class Compose {
        constructor() {
            this.queue = [] //queue表示队列
        }
        add(fn) { //添加 
            this.queue.push(fn) //表示给queue添加函数fn,
        }
        excute() { //执行                                
            this.queue.forEach(fn=>{//表示遍历this.queue数组中的每个元素并且打印每个函数的内容
                fn()
            })
        }
    }

    //实例化3个类
    let e = new Eat();
    console.log(e.do());//表示调用eat里面的do函数，打印的结果是 正在吃鲱鱼罐头
    let p = new Play();
    let w = new Watch()

    let compose = new Compose(); //实例化compose这个类
    compose.add(e.do)//将e实例中do函数添加到compose 
    compose.add(p.run)//p实例中的run函数添加到compose 
    compose.add(w.do)// w实例中的do函数添加到compose 

    console.log(compose.queue); //打印的结果是一个数组，里面有三个函数

    compose.excute() //一次性的调用所有添加到队列中的函数
</script>