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

 更新时间:2022年06月23日 11:08:21   作者:​ 前端若水   ​  
这篇文章主要介绍了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 组合模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js程序中美元符号$是什么

    js程序中美元符号$是什么

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的
    2008-06-06
  • uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)

    uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)

    uni-app有两种方式进行路由跳转,下面这篇文章主要给大家介绍了关于uniapp常用路由跳转的几种方式(navigateTo、redirectTo...),文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Openlayers绘制地图标注

    Openlayers绘制地图标注

    这篇文章主要为大家详细介绍了Openlayers绘制地图标注,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS使用canvas绘制旋转风车动画

    JS使用canvas绘制旋转风车动画

    这篇文章主要为大家详细介绍了JS使用canvas绘制旋转风车动画,有加速减速启动停止功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • ElementPlus Tag标签用法小结

    ElementPlus Tag标签用法小结

    这篇文章主要介绍了ElementPlus Tag标签用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 使用Layui搭建后台管理界面的操作方法

    使用Layui搭建后台管理界面的操作方法

    今天小编就为大家分享一篇使用Layui搭建后台管理界面的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript 函数参数限制说明

    javascript 函数参数限制说明

    我依稀记得哪本书上有说过,实参数限制是32个? 现在想想估计是我记错了..他也许说的是32位.
    2010-11-11
  • javascript oop开发滑动(slide)菜单控件

    javascript oop开发滑动(slide)菜单控件

    这里因为是演示所以让HTML CSS尽量的简化,另外使用jquery的 fn.slideUp fn.slideDown 实现起来会更容易不过我作为一个专业的开发者多了解些原生的JS对技术的提高还是很有帮助。
    2010-08-08
  • 微信小程序  TLS 版本必须大于等于1.2问题解决

    微信小程序 TLS 版本必须大于等于1.2问题解决

    这篇文章主要介绍了微信小程序 TLS 版本必须大于等于1.2问题解决的相关资料,需要的朋友可以参考下
    2017-02-02
  • JS简单实用的倒计时效果实现代码

    JS简单实用的倒计时效果实现代码

    没有事研究了下倒计时的效果,因此自己练习了一下,需要的朋友可以参考下
    2012-08-08

最新评论