JavaScript设计模式组合设计模式案例
作者： 前端若水
这篇文章主要介绍了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 组合模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！