3 组合模式 概念 及 核心代码

<script>
    class A{
        constructor(){};

        init(){
            this.funA1();
            this.funA2();
            this.funA3();
            this.funA4();
        };

        funA1(){console.log('我是实例化对象A的1')}c
        funA2(){console.log('我是实例化对象A的2')}c
        funA3(){console.log('我是实例化对象A的3')}c
        funA4(){console.log('我是实例化对象A的4')}c
    }
    
    class B{
        constructor(){};

        init(){
            this.funB1();
            this.funB2();
            this.funB3();
        };

        funB1(){console.log('我是实例化对象B的1')}
        funB2(){console.log('我是实例化对象B的2')}
        funB3(){console.log('我是实例化对象B的3')};
    }

    class Group{
        constructor(){
            this.arr=[];
        }
        add(obj){
            this.arr.push(obj);
        }

        execute(){
            this.arr.forEach(function(item){
                item.init();
            });
        }
    }

    const objA=new A();
    const objB=new B();

    const objGroup=new Group();

    objGroup.add(objA);
    objGroup.add(objB);
    objGroup.execute();
</script>

一.组合模式概念

<script>
    // 在实际项目中,一个页面中,有可能要生成多个实例化对象
    // 每个实例化对象,会有多个方法,这些方法,我们往往都通过一个init()入口函数来启动
    // 实际项目中,如果要逐一启动每个实例化对象的入口函数,比较繁琐
    // 使用一个构造函数,来统一启动


    class A{
        constructor(){}

        // 定义一个入口函数,统一命名为 init()
        init(){
            // 在入口函数中,统一调用使用所有需要执行的方法
            this.funA1();
            this.funA2();
            this.funA3();
            this.funA4();
        }

        // 构造函数的方法,都是要执行的方法
        funA1(){}
        funA2(){}
        funA3(){}
        funA4(){}
    }


    class B{
        constructor(){}

        // 定义一个入口函数,统一命名为 init()
        init(){
            // 在入口函数中,统一调用使用所有需要执行的方法
            this.funB1();
            this.funB2();
            this.funB3();
            this.funB4();
        }

        // 构造函数的方法,都是要执行的方法
        funB1(){}
        funB2(){}
        funB3(){}
        funB4(){}
    }


    class C{
        constructor(){}

        // 定义一个入口函数,统一命名为 init()
        init(){
            // 在入口函数中,统一调用使用所有需要执行的方法
            this.funC1();
            this.funC2();
            this.funC3();
            this.funC4();
        }

        // 构造函数的方法,都是要执行的方法
        funC1(){}
        funC2(){}
        funC3(){}
        funC4(){}
    }

    // 实际操作中
    const objA = new A();
    // 调用实例化对象中的入口函数,就是调用,其中定义的所有方法
    objA.init();

    const objB = new B();
    objB.init();

    const objC = new C();
    objC.init();

    // 目前是多个实例化对象,启动多次
    // 会造成冗余的代码,影响执行效率

    // 所谓的组合模式,是定义一个构造函数
    // 通过一个构造构造函数,来一次性,启动所有的实例化对象中的入口函数
    // 等于是,一次性的调用启动,所有的实例化对象中的所有的方法
    // 

</script>

二.组合模式核心代码

<script>
    // 组合模式的核心代码
    //   定义一个构造函数
    //     在构造器中,定义一个空数组,来存储添加的实例化对象
    //     构造函数有两个方法
    //         方法1:向数组中,添加写入要一键启动的实例化对象
    //               就相当于,向手机中,添加要控制的智能家居(音响,电视,汽车,灯,电饭锅,热水器....)
    //               想控制哪个设备,就要先添加哪个设备
    //         方法2:调用数组中,实例化对象的入口函数
    //               添加的所有设备,可以通过手机,实现一键开关
    //               通过方法1,添加了哪个设备,就控制哪个设备 


    class A{
        constructor(){}

        // 定义一个入口函数,统一命名为 init()
        init(){
            this.funA1();
            this.funA2();
            this.funA3();
            this.funA4();
        }

        funA1(){console.log('我是实例化对象A的方法1')}
        funA2(){console.log('我是实例化对象A的方法2')}
        funA3(){console.log('我是实例化对象A的方法3')}
        funA4(){console.log('我是实例化对象A的方法4')}
    }

    class B{
        constructor(){}

        // 定义一个入口函数,统一命名为 init()
        init(){
            this.funB1();
            this.funB2();
            this.funB3();
        }

        funB1(){console.log('我是实例化对象B的方法1')}
        funB2(){console.log('我是实例化对象B的方法2')}
        funB3(){console.log('我是实例化对象B的方法3')}
    }



    class C{
        constructor(){}

        // 定义一个入口函数,统一命名为 init()
        init(){
            this.funC1();
            this.funC2();
            this.funC3();
            this.funC4();
            this.funC5();
        }

        funC1(){console.log('我是实例化对象C的方法1')}
        funC2(){console.log('我是实例化对象C的方法2')}
        funC3(){console.log('我是实例化对象C的方法3')}
        funC4(){console.log('我是实例化对象C的方法4')}
        funC5(){console.log('我是实例化对象C的方法5')}
    }


    // 正常情况下
    // 要定3个实例化对象,要调用3次入口函数

    // const objA = new A();
    // objA.init();

    // const objB = new B();
    // objB.init();

    // const objC = new C();
    // objC.init();


    // 组合模式*****************************************

    // 定义组合模式的构造函数

    class Group{
        constructor(){
            // 定义一个空数组,来存储要控制的实例化对象
            this.arr = [];
        }
        // 向数组中添加实例化对象
        add(obj){
            this.arr.push(obj);
        }
        // execute执行
        execute(){
            // 数组中,添加的所有的实例化对象的入口函数init()
            // item,就是添加的实例化对象
            this.arr.forEach(function(item){
                item.init();
            })
        }
    }


    // 1,要通过构造函数,生成响应的实例化对象
    const objA = new A();
    const objB = new B();
    const objC = new C();

    // 2,将实例化对象,添加到构造函数中

    const objGroup = new Group();
    objGroup.add(objA);
    objGroup.add(objB);
    objGroup.add(objC);

    objGroup.execute();


    // 总结
    // 1,基本思路和步骤
    //     通过一个构造函数,来控制所有的实例化对象,其中的入口函数
    // 2,定义一个构造函数
    //     构造器中,定义一个空数组
    //     方法1,向空数组中,添加要控制实例化对象
    //     方法2,循环遍历数组,执行其中添加的实例化对象的入口函数init()
    // 3,代码确实是更加的复杂了,但是我们提高了程序的执行效率和可维护性
    //     可以通过一个方法,调用所有的入口函数
    //     让操作更加的方便灵活
    // 代码的复杂程度---交换---执行程序时更高的效率

</script>