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

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

前言

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

组合设计模式的业务场景

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

组合设计模式小案例

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

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

classStaff{

//员工名员工薪资员工岗位

constructor(name,salary,position){

=name;

this.salary=salary;

this.position=position;

//获取员工名字

getName(){

return;

//修改员工薪资

setSalary(salary){

this.salary=salary;

//获取员工薪资

getSalary(){

returnthis.salary;

//设置员工岗位

setPosition(position){

this.position=position;

//获取员工岗位

getPosition(){

returnthis.position;

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

classStoreMembers{

constructor(){

//店铺人员总职员

this.employees=[];

//往店铺总职员添加员工

addEmployee(employee){

this.employees.push(employee);

//获取店铺职员总开销

getNetSalaries(){

letnetSalary=0;

netSalary=this.employees.reduce((total,currt)=total.getSalary()+currt.getSalary())

returnnetSalary;

//获取店铺职员信息名单

getPositionList(){

return(this.employees.map(res=({name:res.getName(),position:res.getPosition(),salary:res.getSalary()})))

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

//创建俩个员工类实例

constxh=newStaff("小红",12000,'服务员');

constxm=newStaff("小明",10000,'收银员');

//创建店铺类

conststoreMembers=newStoreMembers();

//往店铺中添加新的职员

storeMembers.addEmployee(xh);

storeMembers.addEmployee(xm);

//获取店铺职员的总薪资

console.log("职员薪资总额：",storeMembers.getNetSalaries());

//获取店铺职员总职位信息

console.log("职员总职位信息：",storeMembers.getPosit