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

更新時間：2022年06月23日 11:08:21 作者：? 前端若水? ?

這篇文章主要介紹了JavaScript設計模式組合設計模式案例，組合設計模式是用于將多個部分通過組合的方式行成一個整體，更多相關內(nèi)容需要的小伙伴可以參考一下

前言

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

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

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

組合設計模式小案例

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

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

        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;
            }
        }

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

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

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

 // 創(chuàng)建倆個員工類實例
        const xh = new Staff("小紅", 12000, '服務員');
        const xm = new Staff("小明", 10000, '收銀員');
       // 創(chuàng)建店鋪類
       const storeMembers = new StoreMembers();
       //往店鋪中添加新的職員
       storeMembers.addEmployee(xh);
       storeMembers.addEmployee(xm);
       //獲取店鋪職員的總薪資
       console.log("職員薪資總額：", storeMembers.getNetSalaries());
       //獲取店鋪職員總職位信息
      console.log("職員總職位信息：", storeMembers.getPositionList());

組合設計模式讓相互關聯(lián)的數(shù)據(jù)產(chǎn)生了結(jié)構性，無論是直觀的去看還是去修改當前數(shù)據(jù)的關系，都只需要關心當前下層數(shù)據(jù)的東西，因此降低了數(shù)據(jù)之間的復雜程度，提高了代碼可維護性

到此這篇關于JavaScript設計模式組合設計模式案例的文章就介紹到這了,更多相關JavaScript 組合模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: