在JavaScript中尝试组合模式

发表于 | 更新于: | 分类于
字数统计: 1,030 字 | 阅读时长 ≈ 4 分钟

组合模式就是用小的子对象来构建更大的对象, 将对象组合成树形结构, 以表示 “部分-整体” 的层次结构. 位于底层最小的对象, 我们在这里称为叶对象, 由叶对象组成的组合对象我们称为分支对象, 位于最顶层的根对象在这里我们也称为分支对象. 不过它们只是结构上呈现出父子关系. 组合模式最大的好处可以一致性地对待分支对象和叶对象, 这也就要求了它们有着相同的接口.
在咬文嚼字说策略中, 我们对员工进行考核, 划分了甲乙丙三个等级. 现在, 公司决定结合等级以资鼓励.
以下所有代码参见compositeMode.

开销的占比

现有考核人员:

考核项目\考核人等级月薪
person_1甲6k
person_2乙9k
person_3乙4k
person_4乙5k
person_5丙6k
person_6丙5k
person_7丙6k
person_8丙4k
person_9甲8k
1
2
3
4
5
6
7
8
9
10
11
12
const persons = [
    {scale:'甲', salary: 6000, company: 'JavaScript'},
    {scale:'乙', salary: 9000, company: 'JavaScript'},
    {scale:'乙', salary: 4000, company: 'JavaScript'},
    {scale:'乙', salary: 5000, company: 'JavaScript'},
    {scale:'丙', salary: 6000, company: 'JavaScript'},
    {scale:'丙', salary: 5000, company: 'JavaScript'},
    {scale:'丙', salary: 6000, company: 'JavaScript'},
    {scale:'丙', salary: 4000, company: 'JavaScript'},
    {scale:'丙', salary: 9000, company: 'JavaScript'},
    {scale:'甲', salary: 6000, company: 'JavaScript'},
]

等级与月薪相关, 分别为3倍月薪、2倍月薪、1倍月薪.

等级甲乙丙
月薪倍率321
1
2
3
4
5
const scaleMap = {
  '甲': 3,
  '乙': 2,
  '丙': 1
}

到底需要拿出多少钱奖励呢? 甲乙丙三组人分别占比多少呢? 针对这样的需求, 我们尝试着用组合模式计算一下.

叶对象与分支对象

上面也提到了, 组合模式中有两类对象. 一个是分支对象, 一个是叶对象. 分支对象是叶对象的集合, 保存着叶对象的引用, 可以操作叶对象(比如添加, 执行). 而叶对象只要暴露接口即可.
现在我们从简单的开始, 造一个生产叶对象的函数.

1
2
3
4
5
6
7
8
const leaf = params => {
    return {
        ...params,
        expense() {
            return scaleMap[params.scale]*params.salary
        }
    }
};

分支对象就稍微麻烦些了, 因为需要管理叶对象.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const branch = params => {
    return {
        ...params,
        members: [],
        add(item) {
            this.members.push(item)
        },
        expense() {
            return this.members.reduce((sum, item) => {
                return sum + item.expense()
            }, 0)
        }
    }
};

expense() 的方法不论是在分支对象还是叶对象上, 或者说不清楚是分支对象还是叶对象, 我们都可以得到相应的结果. 在分支对象里, 保存着叶对象的引用, 我们可以对叶对象进行任何操作.

从JSON数据到树形结构

组合模式就是这么简单, 剩下的就是如何 JSON 数据转换成层次分明的结构了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const convertData = array => {
    const branchList = [];
    const branchObjs = [];
    array.forEach(item => {
        let leafObj = leaf(item);
        if (!branchList.includes(item.scale)){
            let params = {
                scale: item.scale
            }
            let branchObj = branch(params)
            branchObjs.push(branchObj)
            branchList.push(item.scale)
        }
    branchObjs.filter(obj => obj.scale == item.scale)[0].add(leafObj);
    })
    return branchObjs;
}
console.log('branchObjs', convertData(persons))
const scaleA = convertData(persons)[0];
const scaleB = convertData(persons)[1];
const scaleC = convertData(persons)[2];
console.log('甲', scaleA.expense())
console.log('乙', scaleB.expense())
console.log('丙', scaleC.expense())

最终结果展示

compositeMode

如果我们想知道公司的总支出, 也可以把 scaleA, scaleB, scaleC 组合在一起作为公司的一子集.

1
2
3
4
5
const company = branch();
company.add(scaleA);
company.add(scaleB);
company.add(scaleC);
company.expense()

companyExpense

不难发现, 我们可以随意组装对象而不会影响到其它节点, 任何一个集合或个体都能够单独运行. 我们也可以根据需要去组合更复杂的结构. 但是, 如果通过组合模式创建了太多的对象, 那么这些对象可能会让系统负担不起.

小结

  1. 组合模式对象形式上至少有两种, 分支对象和叶对象.

  2. 分支对象和叶对象拥有相同的接口, 且对一组叶对象操作具有同步一致性.

  3. 组合模式是 HAS-A (聚合)关系, 不是 IS-A.

------------- The End -------------
显示评论