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 组合模式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
