JavaScript设计模式组合设计模式案例

目录
  • 前言
  • 组合设计模式的业务场景
  • 组合设计模式小案例

前言

组合设计模式是用于将多个部分通过组合的方式行成一个整体，就比如我们去吃饭，点了一份米饭和一份鱼香肉丝，这些东西可以看成一个部分，通过组合的方式可以组成一个新的产品，鱼香肉丝盖饭，这就是组合设计模式

组合设计模式的业务场景

表单用于收集用户数据，比如登录，注册，或者一些信息填报，由于这些表单都是类似的，如果我们一个一个去做，里面充满了很多重复的东西，增加了工作量，我们可以使用组合设计模式

组合设计模式小案例

一个餐馆的运转需要一些雇佣一些人手，但是这些雇佣的人手都有一个共同点,我们需要对其支付一定的薪酬作为劳动的回报，其次他们还需担负某些任务职责，可能需要向某人汇报餐馆情况，也有可能会拥有下属等等,我们来实现一下

声明一个员工类，我们对于新招聘员工需要提供三个参数，员工姓名，员工薪资和员工所任职岗位，还可进行获取员工姓名，对员工的薪资进行获取和修改以及获取员工当前任职职位和对员工进行调岗的操作

        class Staff {
        //员工名  员工薪资  员工岗位
            constructor(name, salary, position) {
                this.name = name;
                this.salary = salary;
                this.position = position;
            }
            // 获取员工名字
            getName() {
                return this.name;
            }
            //修改员工薪资
            setSalary(salary) {
                this.salary = salary;
            }
            // 获取员工薪资
            getSalary() {
                return this.salary;
            }
            // 设置员工岗位
            setPosition(position) {
                this.position = position;
            }
            // 获取员工岗位
            getPosition() {
                return this.position;
            }
        }

在声明一个店铺类，店铺类是对新招聘员工进行添加到该店铺人员中，以及对于该店铺员工的职位信息进行查看和对当前用工成本进行统计

        class StoreMembers {
            constructor() {
               //店铺人员总职员
                this.employees = [];
            }
            // 往店铺总职员添加员工
            addEmployee(employee) {
                this.employees.push(employee);
            }
            // 获取店铺职员总开销
            getNetSalaries() {
                let netSalary = 0;
                netSalary = this.employees.reduce((total, currt) => total.getSalary() + currt.getSalary())
                return netSalary;
            }
            // 获取店铺职员信息名单
            getPositionList() {
                return (this.employees.map(res => ({ name: res.getName(), position: res.getPosition(), salary: res.getSalary() })))
            }
        }

我们对新招聘员工进行添加到店铺总职员中并且获取到该店铺对于职员的总开销以及获取店铺总职员信息名单

 // 创建俩个员工类实例
        const xh = new Staff("小红", 12000, '服务员');
        const xm = new Staff("小明", 10000, '收银员');
       // 创建店铺类
       const storeMembers = new StoreMembers();
       //往店铺中添加新的职员
       storeMembers.addEmployee(xh);
       storeMembers.addEmployee(xm);
       //获取店铺职员的总薪资
       console.log("职员薪资总额：", storeMembers.getNetSalaries());
       //获取店铺职员总职位信息
      console.log("职员总职位信息：", storeMembers.getPositionList());

组合设计模式让相互关联的数据产生了结构性，无论是直观的去看还是去修改当前数据的关系，都只需要关心当前下层数据的东西，因此降低了数据之间的复杂程度，提高了代码可维护性

到此这篇关于JavaScript设计模式组合设计模式案例的文章就介绍到这了,更多相关JavaScript 组合模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript设计模式开发中组合模式的使用教程

    我们平时开发过程中,一定会遇到这种情况:同时处理简单对象和由简单对象组成的复杂对象,这些简单对象和复杂对象会组合成树形结构,在客户端对其处理的时候要保持一致性.比如电商网站中的产品订单,每一张产品订单可能有多个子订单组合,比如操作系统的文件夹,每个文件夹有多个子文件夹或文件,我们作为用户对其进行复制,删除等操作时,不管是文件夹还是文件,对我们操作者来说是一样的.在这种场景下,就非常适合使用组合模式来实现. 基本知识 组合模式:将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式

  • 设计模式中的组合模式在JavaScript程序构建中的使用

    设计模式中的组合模式在JavaScript程序构建中的使用

    定义 组合,顾名思义是指用包含多个部件的对象创建单一实体. 这个单一实体将用作所有这些部件的访问点,虽然这大大简化了操作,但也可能具有相当的欺骗性,因为没有哪种隐性方式明确表明该组合包含多少部件. 组合模式的目标是解耦客户程序与复杂元素内部架构,使得客户程序对待所有子元素都一视同仁. 每个子节点都可以使复杂的存在,对于父节点来说,不需要知道子节点的复杂性或者实现子节点的复杂性,只需要关注子节点的特定方法,便可以使用子节点.简化了父和子之间的关系. 对于子节点来说也是一样的,过多的接口暴露有时候也

  • JavaScript组合设计模式--改进引入案例分析

    本文实例讲述了JavaScript组合设计模式--改进引入案例.分享给大家供大家参考,具体如下: 对于组合设计模式: (1)组合模式中把对象分为两种(组合对象,和叶子对象)  (2)组合对象和叶子对象实现:同一批操作  (3)对组合对象执行的操作可以向下传递到叶子节点进行操作  (4)这样就会弱化类与类之间的耦合  (5)他常用的手法是把对象组合成属性结构的对象 根据组合模式的这些特性我们改写代码如下: 由于用到了接口检验所以我们先引入接口文件代码 //定义一个静态方法来实现接口与实现类的直接检

  • 《javascript设计模式》学习笔记七：Javascript面向对象程序设计组合模式详解

    本文实例讲述了Javascript面向对象程序设计组合模式.分享给大家供大家参考,具体如下: 概述 关于组合模式的定义:组合模式(Composite Pattern)有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦.来自百度百科:http://baike.baidu.com/view/3591789.htm 其实从面向对象之五之后,与javascript本身关系不是很大,更

  • 深入理解JavaScript系列（40）：设计模式之组合模式详解

    介绍 组合模式(Composite)将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 常见的场景有asp.net里的控件机制(即control里可以包含子control,可以递归操作.添加.删除子control),类似的还有DOM的机制,一个DOM节点可以包含子节点,不管是父节点还是子节点都有添加.删除.遍历子节点的通用功能.所以说组合模式的关键是要有一个抽象类,它既可以表示子元素,又可以表示父元素. 正文 举个例子,有家餐厅提

  • javascript 设计模式之组合模式原理与应用详解

    本文实例讲述了javascript 设计模式之组合模式原理与应用.分享给大家供大家参考,具体如下: 组合模式说明 组合模式用于简单化,一致化对单组件和复合组件的使用:其实它就是一棵树: 这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自己的子树枝以及子叶节点: 在面向对象编程中,叶子以及复杂对象(树枝节点)都继承一个接口或抽象类分别实现: 这个抽象定义一般三个部分组成,组件的基本信息,Add方法,Remove方法: 叶子节点只包含本

  • JavaScript 设计模式之组合模式解析

    怎么说呢?!就像是动物(组合对象)一样,当它生下后代(叶对象)时,它的后代就有了某种功能(比如:挖洞,听力好等等):也像是一棵树,它有一个根(组合对象)然后是从这个棵树向外冒出的其他枝杆(组合对象)以及从这些枝杆又向外长的叶子(叶对象).换句话说,就是当祖先已经有了,那么只要从这个祖先衍生出来的其他孩子(包括这个祖先下的其他组合对象)已经就具备了某种功能,看上去貌似又有些像是继承."组合模式"在组合对象的层次体系中有两种类型的对象:叶对象和组合对象.组合模式擅长于对大批对象进行操作.

  • javascript设计模式 – 组合模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 组合模式原理与应用.分享给大家供大家参考,具体如下: 介绍:组合模式又叫部分整体模式,用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 定义:组合多个对象形成树形结构以表示具有整体一部分关系的层次机构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性,组合模式又可以成为整体一部分模式. 它是一种对象结构型模式. 场景:我们对公司的人员架构进行一下打印,假设所有管理岗和开发岗的区

  • JavaScript设计模式组合设计模式案例

    目录 前言 组合设计模式的业务场景 组合设计模式小案例 前言 组合设计模式是用于将多个部分通过组合的方式行成一个整体,就比如我们去吃饭,点了一份米饭和一份鱼香肉丝,这些东西可以看成一个部分,通过组合的方式可以组成一个新的产品,鱼香肉丝盖饭,这就是组合设计模式 组合设计模式的业务场景 表单用于收集用户数据,比如登录,注册,或者一些信息填报,由于这些表单都是类似的,如果我们一个一个去做,里面充满了很多重复的东西,增加了工作量,我们可以使用组合设计模式 组合设计模式小案例 一个餐馆的运转需要一些雇佣一

  • JavaScript设计模式策略模式案例分享

    前言 策略设计模式就是指一个问题匹配多个解决方法,不一定要用到哪一个,而且有可能随时增加多个方案 比如我们去买书,书店都会搞一些优惠活动,满100减20,满200减50,八折优惠这些,但是优惠活动源源不止这些,后期会陆续添加优惠活动,比如双11活动打七折,等到双11活动过去之后打七折活动还需要取消 我们先不用策略设计模式进行实现计算折扣后价格,我们声明一个方法,里面接受俩个参数,这俩个参数一个是价格一个是折扣种类,然后在方法里面使用if语句判断折扣种类计算价格,如果没有折扣就是原价,最后把计算过

  • Java设计模式:组合模式

    Java设计模式:组合模式

    目录 概述 结构 组合模式案例 分析 总结 在本讲,我们来学习一下结构型模式里面的第六个设计模式,即组合模式. 概述 在学习组合模式之前,我们先来看下面这张图. 对于以上这张图大家应该很熟悉,我们可以将其看作是一个文件系统,其实说到底它就是Windows系统里面的一个目录结构,只不过对于Windows中的文件系统而言,它里面包含有C盘.D盘.E盘等等盘符,而这里我们只是以它里面的某一个盘符里面的目录结构为例来进行了一个描述. 对于这样的结构我们称之为树形结构.为啥叫树形结构呢?你看一下上图中的左

  • IOS设计模式之组合设计模式

    IOS设计模式之组合设计模式

    Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类. 组合模式,Composite Pattern,是一个非常巧妙的模式.几乎所有的面向对象系统都应用到了组合模式. 通过本文将让你学会软件开发中的"何为树形结构"."何为组合模式"."组合模式可以解决的问题"等相关知识. 内容大纲: 1.树形结构 2.组合模式 3.编写文件

  • python3 简单实现组合设计模式

    组合模式是把一个类别归为一个整体,并且组织多个整体之间的关系,使用通过树形结构来描述所有整体. 一般的编写方式为一个类别对象下添加多个该对象的元素,该对象又为其它对象下的元素.简单来说就是一个学校有一个总部,总部下有有师资部.招生部:总部有分校,分校也有. 在我个人看来,设计模式的使用并不局限于书本描述的具体问题的解决,是需要丰富的业务经验才能更好的灵活应用,本人能力有限,在此也是给出一个简单的示例用来说明,额外的灵活运营需要看个人的编写方式. 首先新建一个学校的基类: #根 class roo

  • JavaScript中的设计模式 单例模式

    目录 1.什么是设计模式 2.设计模式五大设计原则(SOLID) 3.为什么需要设计模式? 4.单例模式 前言: 设计模式在我们编程中是十分重要的! 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用.设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案.这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的. 最近在学习设计模式,铁铁们一起来卷嘛? 1.什么是设计模式 在软件设计过程中,针对特定问题的简洁而优雅的解决

  • Java设计模式——工厂设计模式详解

    工厂模式:主要用来实例化有共同接口的类,工厂模式可以动态决定应该实例化那一个类. 工厂模式的形态 工厂模式主要用一下几种形态: 1:简单工厂(Simple Factory). 2:工厂方法(Factory Method). 3:抽象工厂(Abstract Factory). 简单工厂(Simple Factory) 又叫静态工厂,是工厂模式三中状态中结构最为简单的.主要有一个静态方法,用来接受参数,并根据参数来决定返回实现同一接口的不同类的实例.我们来看一个具体的例子: 假设一家工厂,几生产洗衣

  • JavaScript之事件循环案例讲解

    js中的事件循环 因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点 事件驱动 从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队

随机推荐