本文通过JavaScript代码实例详解组合设计模式。文章以餐馆员工管理为场景，演示如何构建Staff员工类与StoreMembers店铺类，实现薪资统计、职位查询及人员添加功能。通过组合对象形成树形结构，降低数据关联复杂度，提升代码可维护性与扩展性，适合希望理解组合模式在业务场景中应用的开发者参考。
前言
组合设计模式的核心在于将多个独立部分通过组合方式构建为一个整体。以餐饮场景为例，米饭与鱼香肉丝作为独立部分，通过组合可形成“鱼香肉丝盖饭”这一新产品，这正是组合设计模式的直观体现。
组合设计模式的业务场景
在表单开发中，登录、注册或信息填报等场景因结构相似，若逐一开发将产生大量重复代码并增加工作量。利用组合设计模式，可将这些相似表单视为整体的一部分，从而简化开发流程。
组合设计模式小案例
假设一家餐馆需雇佣多名员工，尽管职责各异，但所有员工均需领取薪酬，并承担特定任务。部分员工需向上级汇报工作，部分员工可能拥有下属。接下来将实现这一管理逻辑。
首先声明一个员工类（Staff）。新招聘的员工需提供姓名、薪资和岗位三个参数。该类需支持获取员工姓名、获取与修改薪资、获取当前职位以及进行调岗操作。
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;
}
}
接着声明一个店铺类（StoreMembers）。该类负责将新招聘的员工添加到店铺人员列表中，同时支持查看店铺内员工的职位信息，并统计当前的总用工成本。
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 组合模式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！