JavaScript設計模式組合設計模式案例

第JavaScript設計模式組合設計模式案例目錄前言組合設計模式的業(yè)務場景組合設計模式小案例

前言

組合設計模式是用于將多個部分通過組合的方式行成一個整體，就比如我們去吃飯，點了一份米飯和一份魚香肉絲，這些東西可以看成一個部分，通過組合的方式可以組成一個新的產品，魚香肉絲蓋飯，這就是組合設計模式

組合設計模式的業(yè)務場景

表單用于收集用戶數據，比如登錄，注冊，或者一些信息填報，由于這些表單都是類似的，如果我們一個一個去做，里面充滿了很多重復的東西，增加了工作量，我們可以使用組合設計模式

組合設計模式小案例

一個餐館的運轉需要一些雇傭一些人手，但是這些雇傭的人手都有一個共同點,我們需要對其支付一定的薪酬作為勞動的回報，其次他們還需擔負某些任務職責，可能需要向某人匯報餐館情況，也有可能會擁有下屬等等,我們來實現一下

聲明一個員工類，我們對于新招聘員工需要提供三個參數，員工姓名，員工薪資和員工所任職崗位，還可進行獲取員工姓名，對員工的薪資進行獲取和修改以及獲取員工當前任職職位和對員工進行調崗的操作

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;

在聲明一個店鋪類，店鋪類是對新招聘員工進行添加到該店鋪人員中，以及對于該店鋪員工的職位信息進行查看和對當前用工成本進行統(tǒng)計

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()})))

我們對新招聘員工進行添加到店鋪總職員中并且獲取到該店鋪對于職員的總開銷以及獲取店鋪總職員信息名單

//創(chuàng)建倆個員工類實例

constxh=newStaff("小紅",12000,'服務員');

constxm=newStaff("小明",10000,'收銀員');

//創(chuàng)建店鋪類

conststoreMembers=newStoreMembers();

//往店鋪中添加新的職員

storeMembers.addEmployee(xh);

storeMembers.addEmployee(xm);

//獲取店鋪職員的總薪資

console.log("職員薪資總額：",storeMembers.getNetSalaries());

//獲取店鋪職員總職位信息

console.log("職員總職位信息：",storeMembers.getPosit