前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript设计模式之组合模式

JavaScript设计模式之组合模式

作者头像
一粒小麦
发布2019-11-07 21:21:02
3890
发布2019-11-07 21:21:02
举报
文章被收录于专栏:一Li小麦一Li小麦

一个公司,可能分为很多个事业部,然后事业部又分为不同的部门。每个部门可能又分为不同的方向,每个方向又由不同的项目组组成。在程序设计中,也有一些和“事物是由相似的子事物构成”类似的思想。组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的。

回顾在《命令模式》中讲到的宏命令实现视频上传流程管理。

    const uploadVideo = {

        upload() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('upload');

                    resolve('finished')

                }, 3000);

            });

        },


        decode() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('decode');

                    resolve('finished')

                }, 3000);

            });

        },


        approve() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('approve');

                    resolve('finished')

                }, 3000);

            });

        },


        publish() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('publish');

                    resolve('finished');

                }, 3000);

            });

        }

    }


    const makeCommand = (receiver, action) => {

        return {

            excute: receiver[action]

        };

    }


    const setCommand = (command) => command.excute();

    const uploadCommand = makeCommand(uploadVideo, 'upload');

    const decodeCommand = makeCommand(uploadVideo, 'decode');

    const approveCommand = makeCommand(uploadVideo, 'approve');

    const publishCommand = makeCommand(uploadVideo, 'publish');


    const commandList = [uploadCommand ,decodeCommand,approveCommand,publishCommand];


    // 宏命令

    class MacroCommand {

        constructor(cmdList){

            this.cmdList=cmdList;

        }

        // 压栈

        add(cmd){

            this.cmdList.push(cmd);

        }

        // 出栈

        del(){

            this.cmdList.pop();

        }

        // 运行宏命令

        async excute(i){

            if(i<this.cmdList.length){

                let ret=await setCommand(this.cmdList[i]);

                if(ret=='finished'){

                    return this.excute(i+1);

                } 

            }

            return true;

        }

    }


    const mc=new  MacroCommand(commandList);

    mc.excute(0)

宏命令都包括了一组子命令队列cmdList和自己的excute执行方法。mc表现的很像一个命令,甚至也可以作为命令使用。在结构上,称之为组合对象,诸如上传、转码审核等,都是它的叶对象。在mc.excute()方法中,并不会实际执行子命令。它只负责遍历迭代。而把真正执行的事情委托给了 makeCommand,让它去"代理"自己执行子命令的excute方法。本身并不负责任何业务逻辑。

组合模式的优势

首先,组合模式层次清晰地表述了命令之间的树形结构关系,以电饭煲煮饭为例:

组合模式提供了一种遍历树形结构的方案,通过调用组合对象的execute方法,程序会递归调用组合对象下面的叶对象的execute方法,所以我们的只要点击一个按钮只需要一次操作,便能依次完成多件事情。组合模式可以非常方便地描述对象部分整体层次结构。

其次,编程者可以充分利用对象多态的优点。一视同仁地处理不同的宏命令。而不需去关心业务上的东西。

"自然选择,前进四!" —— 章北海

《三体》中海军出身的章北海,在冬眠几个世纪后,能够以海军术语指导最新技术星际飞船"自然选择号"行动,并不是一件多么难以想象的事情——只要有组合命令。

请求在树的传递过程

在一个组合模式的命令体系中,请求总是递归进行的。从顶层节点开始遍历。

客户只要请求顶层的组合对象(比如"前进四"),请求就会沿着树的左叉遍历传递。

为了说明这个问题,我们继续来复杂化视频上传的问题,假如视频的审核需要做更多的区分,包括"运营方(operator)审核"和"广电总局(SARFT)审核"。那么审核(approve)既是一个叶对象,也是一个宏命令。

    // 审核流程

    const approve={

        operator() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('operator approved');

                    resolve('finished')

                }, 1000);

            });

        },


        sarft(){

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('SARFT approved');

                    resolve('finished')

                }, 2000);

            });

        }

    }


    // 普通上传

    const uploadVideo = {

        upload() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('upload');

                    resolve('finished')

                }, 1000);

            });

        },


        decode() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('decode');

                    resolve('finished')

                }, 1000);

            });

        },


        approve,


        publish() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log('publish');

                    resolve('finished');

                }, 1000);

            });

        }

    }



    const makeCommand = (receiver, action) => {

        if(receiver[action]){

            return {

                excute: receiver[action]

            };

        }else{

            return receiver;

        }   

    }


    class MacroCommand {

        constructor(cmdList){

            this.cmdList=cmdList;

        }

        // 运行宏命令

        async excute(i){

            i=i?i:0;

            if(i<this.cmdList.length){

                let ret=await setCommand(this.cmdList[i]);

                if(ret=='finished'){

                  await this.excute(i+1);

                } 

            }

            return 'finished';

        }

    }


    const setCommand = async (command) => await command.excute(0);


    const operatorCommand =makeCommand(uploadVideo.approve,'operator');

    const sarftCommand = makeCommand(uploadVideo.approve, 'sarft');

    const approveCmdList=[operatorCommand,sarftCommand];

    const approveCommand= makeCommand(new MacroCommand(approveCmdList));


    const uploadCommand = makeCommand(uploadVideo, 'upload');

    const decodeCommand = makeCommand(uploadVideo, 'decode');

    const publishCommand = makeCommand(uploadVideo, 'publish');

    const commandList = [uploadCommand ,decodeCommand,approveCommand,publishCommand];



    const mc=new  MacroCommand(commandList);

    mc.excute(0)

执行顺序为 上传-解码-运营商审核-广电总局审核:

简化流程

但是生成命令的方法还是有些麻烦。该过程暴露了太多细节。考虑定义一个生成命令的方法,彻底撕离业务逻辑:

    class MacroCommand {

        constructor(cmdList){

            this.cmdList=this.makeCmdList(cmdList);

        }


        makeCommand(receiver, action){

            if(receiver[action]){

                return {

                    excute: receiver[action]

                };

            }else{

                return receiver;

            }   

        }


        makeCmdList(obj){

            return Object.keys(obj).map((key,index)=>{

                let ret=null;

                switch (typeof obj[key]) {

                    case 'function':

                        ret=this.makeCommand(obj,key);

                        break;

                    case 'object':

                        ret =new MacroCommand(obj[key])

                    default:

                        break;

                }

                return ret;  

            });

        }


        async setCommand(command){

            return await command.excute(0)

        }


        // 运行宏命令

        async excute(i){

            i=i?i:0;

            if(i<this.cmdList.length){

                let ret=await this.setCommand(this.cmdList[i]);

                if(ret=='finished'){

                  await this.excute(i+1);

                } 

            }

            return 'finished';

        }

    }


    const mc=new  MacroCommand(uploadVideo);

    mc.excute()
    delete uploadVideo.publish;

    uploadVideo.aaa=()=>{

        return new Promise((resolve, reject) => {

            setTimeout(() => {

                console.log('aaa');

                resolve('finished');

            }, 1000);

        });

    }

    const mc=new  MacroCommand(uploadVideo);

    mc.excute()


    //upload -> decode -> operator approved -> SARFT approved -> aaa

这样,我在定义了方法结构的同时,就定义了执行顺序。

从这个例子中可以看到,基本对象可以被组合成更复杂的组合对象,组合对象又可以被组合,这样不断递归下去,这棵树的结构可以支持任意多的复杂度。在树最终被构造完成之后,让整颗树最终运转起来的步骤非常简单,只需要调用最上层对象的execute方法。每当对最上层的对象进行一次请求时,实际上是在对整个树进行深度优先的搜索,而创建组合对象的程序员并不关心这些内在的细节,往这棵树里面添加一些新的节点对象是非常容易的事情。

注意事项

在使用组合模式的时候,还有以下几个值得我们注意的地方。

  1. 组合模式不是父子关系(ISA),是一种HASA(聚合)的关系。组合对象包含一组叶对象,但Leaf并不是Composite的子类。组合对象只是把请求委托给它所包含的所有叶对象,它们能够合作的关键是拥有相同的接口。为了方便描述,本章有时候把上下级对象称为父子节点,但大家要知道,它们并非真正意义上的父子关系。
  2. 对叶对象操作的一致性:组合模式除了要求组合对象和叶对象拥有相同的接口之外,还有一个必要条件,就是对一组叶对象的操作必须具有一致性
  3. 双向映射关系发放过节费的通知步骤是从公司到各个部门,再到各个小组,最后到每个员工的邮箱里。这本身是一个组合模式的好例子,但要考虑的一种情况是,也许某些员工属于多个组织架构。比如某位架构师既隶属于开发组,又隶属于架构组,对象之间的关系并不是严格意义上的层次结构,在这种情况下,是不适合使用组合模式的,该架构师很可能会收到两份过节费。这种复合情况下我们必须给父节点和子节点建立双向映射关系,一个简单的方法是给小组和员工对象都增加集合来保存对方的引用。但是这种相互间的引用相当复杂,而且对象之间产生了过多的耦合性,修改或者删除一个对象都变得困难,此时我们可以引入中介者模式来管理这些对象。
  4. .用职责链模式提高组合模式性能:在组合模式中,如果树的结构比较复杂,节点数量很多,在遍历树的过程中,性能方面也许表现得不够理想。有时候我们确实可以借助一些技巧,在实际操作中避免遍历整棵树,有一种现成的方案是借助职责链。职责链模式一般需要我们手动去设置链条,但在组合模式中,父对象和子对象之间实际上形成了天然的职责链。让请求顺着链条从父对象往子对象传递,或者是反过来从子对象往父对象传递,直到遇到可以处理该请求的对象为止,这也是职责链模式的经典运用场景之一。

适用场景

表示对象的部分整体层次结构。组合模式可以方便地构造一棵树来表示对象的部分整体结构。特别是我们在开发期间不确定这棵树到底存在多少层次的时候。在树的构造最终完成之后,只需要通过请求树的最顶层对象,便能对整棵树做统一的操作。在组合模式中增加和删除树的节点非常方便,并且符合开放封闭原则。

户希望统一对待树中的所有对象。组合模式使客户可以忽略组合对象和叶对象的区别,客户在面对这棵树的时候,不用关心当前正在处理的对象是组合对象还是叶对象,也就不用写一堆if、else语句来分别处理它们。组合对象和叶对象会各自做自己正确的事情,这是组合模式最重要的能力。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-11-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 一Li小麦 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 组合模式的优势
  • 请求在树的传递过程
  • 简化流程
  • 注意事项
  • 适用场景
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档