JavaScript設(shè)計模式組合設(shè)計模式案例
前言
組合設(shè)計模式是用于將多個部分通過組合的方式行成一個整體,就比如我們?nèi)コ燥?,點了一份米飯和一份魚香肉絲,這些東西可以看成一個部分,通過組合的方式可以組成一個新的產(chǎn)品,魚香肉絲蓋飯,這就是組合設(shè)計模式
組合設(shè)計模式的業(yè)務(wù)場景
表單用于收集用戶數(shù)據(jù),比如登錄,注冊,或者一些信息填報,由于這些表單都是類似的,如果我們一個一個去做,里面充滿了很多重復(fù)的東西,增加了工作量,我們可以使用組合設(shè)計模式
組合設(shè)計模式小案例
一個餐館的運(yùn)轉(zhuǎn)需要一些雇傭一些人手,但是這些雇傭的人手都有一個共同點,我們需要對其支付一定的薪酬作為勞動的回報,其次他們還需擔(dān)負(fù)某些任務(wù)職責(zé),可能需要向某人匯報餐館情況,也有可能會擁有下屬等等,我們來實現(xiàn)一下
聲明一個員工類,我們對于新招聘員工需要提供三個參數(shù),員工姓名,員工薪資和員工所任職崗位,還可進(jìn)行獲取員工姓名,對員工的薪資進(jìn)行獲取和修改以及獲取員工當(dāng)前任職職位和對員工進(jìn)行調(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; } // 設(shè)置員工崗位 setPosition(position) { this.position = position; } // 獲取員工崗位 getPosition() { return this.position; } }
在聲明一個店鋪類,店鋪類是對新招聘員工進(jìn)行添加到該店鋪人員中,以及對于該店鋪員工的職位信息進(jìn)行查看和對當(dāng)前用工成本進(jìn)行統(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() }))) } }
我們對新招聘員工進(jìn)行添加到店鋪總職員中并且獲取到該店鋪對于職員的總開銷以及獲取店鋪總職員信息名單
// 創(chuàng)建倆個員工類實例 const xh = new Staff("小紅", 12000, '服務(wù)員'); 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());
組合設(shè)計模式讓相互關(guān)聯(lián)的數(shù)據(jù)產(chǎn)生了結(jié)構(gòu)性,無論是直觀的去看還是去修改當(dāng)前數(shù)據(jù)的關(guān)系,都只需要關(guān)心當(dāng)前下層數(shù)據(jù)的東西,因此降低了數(shù)據(jù)之間的復(fù)雜程度,提高了代碼可維護(hù)性
到此這篇關(guān)于JavaScript設(shè)計模式組合設(shè)計模式案例的文章就介紹到這了,更多相關(guān)JavaScript 組合模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript組合設(shè)計模式--改進(jìn)引入案例分析
- javascript設(shè)計模式 – 組合模式原理與應(yīng)用實例分析
- javascript 設(shè)計模式之組合模式原理與應(yīng)用詳解
- 《javascript設(shè)計模式》學(xué)習(xí)筆記七:Javascript面向?qū)ο蟪绦蛟O(shè)計組合模式詳解
- JavaScript設(shè)計模式開發(fā)中組合模式的使用教程
- 設(shè)計模式中的組合模式在JavaScript程序構(gòu)建中的使用
- 深入理解JavaScript系列(40):設(shè)計模式之組合模式詳解
- JavaScript 設(shè)計模式之組合模式解析
相關(guān)文章
javascript設(shè)置和獲取cookie的方法實例詳解
這篇文章主要介紹了javascript設(shè)置和獲取cookie的方法,結(jié)合實例形式較為詳細(xì)的分析總結(jié)了JavaScript操作cookie簡單實現(xiàn)數(shù)據(jù)存儲與讀取的相關(guān)技巧,需要的朋友可以參考下2016-01-01DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)
dva 有一個管理 effects 執(zhí)行的 hook,并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài),感興趣的朋友一起看看吧2017-08-08javascript與PHP動態(tài)往類中添加方法對比
這篇文章主要介紹了JAVASCRIPT與PHP動態(tài)往類中添加方法對比的相關(guān)資料,需要的朋友可以參考下2018-03-03js canvas實現(xiàn)適用于移動端的百分比儀表盤dashboard
這篇文章主要為大家詳細(xì)介紹了js canvas實現(xiàn)適用于移動端的百分比儀表盤dashboard,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】
這篇文章主要介紹了CKEditor 4.4.1 添加代碼高亮顯示插件功能,涉及ckeditor使用官方推薦Code Snippet插件的相關(guān)操作布局與使用注意事項,需要的朋友可以參考下2019-06-063種js實現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實現(xiàn)string的substring方法,需要的朋友可以參考下2015-11-11