前端 JavaScript 组合模式如何实现

组合模式是一种设计模式，用于将对象组合成树状结构以表示部分-整体层次结构，让客户以一致的方式处理个别对象以及对象组合。在前端JavaScript开发中，组合模式可以用来创建UI组件、管理事件处理程序、构建菜单系统等场景。实现组合模式主要依靠抽象一个通用接口，使得单个对象和组合对象可以被同等对待。例如，可以定义一个组件接口包含add、remove和display方法，单个对象和组合对象都实现这个接口，当调用display时，单个对象直接展示自身，而组合对象则遍历其子对象，并调用它们的display方法。

一、组合模式的基础概念

组合模式涉及三个角色：叶节点（Leaf）、组合节点（Composite）和客户端（Client）。叶节点代表单个对象，组合节点是由叶节点或其他组合节点组成的集合体。客户端操作的是抽象的组件接口而不需要关心当前操作的是单个对象还是一组对象。

二、定义组件接口

首先，我们定义一个组件接口，这个接口包含了所有叶节点和组合节点共有的操作。JavaScript中可以使用ES6的class语法来实现接口：

class Component {
    constructor(name) {
        this.name = name;
    }
    add(component) {
        throw new Error('Unsupported operation');
    }
    remove(component) {
        throw new Error('Unsupported operation');
    }
    display(depth) {
        throw new Error('Unsupported operation');
    }
}

三、实现叶节点类

接下来，实现叶节点类，它表示组合结构中的单个对象。叶节点类将继承组件接口，但是一般不实现add和remove方法。

class Leaf extends Component {
    constructor(name) {
        super(name);
    }
    display(depth) {
        console.log(`${'-'.repeat(depth)} ${this.name}`);
    }
}

四、实现组合节点类

组合节点类代表了含有子节点的较为复杂的对象。组合节点类需要实现组件接口的所有方法，特别是add和remove，因为它需要管理其子组件。

class Composite extends Component {
    constructor(name) {
        super(name);
        this.children = [];
    }
    add(component) {
        this.children.push(component);
    }
    remove(component) {
        let index = this.children.indexOf(component);
        if (index > -1) {
            this.children.splice(index, 1);
        }
    }
    display(depth) {
        console.log(`${'-'.repeat(depth)} ${this.name}`);
        for (let child of this.children) {
            child.display(depth + 2);
        }
    }
}

五、客户端使用组合模式

客户端代码创建了组合结构，并可以同等对待叶节点和组合节点。

const root = new Composite('Root');
const leaf1 = new Leaf('Leaf1');
const comp1 = new Composite('Composite1');
const leaf2 = new Leaf('Leaf2');
const leaf3 = new Leaf('Leaf3');
root.add(leaf1);
root.add(comp1);
comp1.add(leaf2);
comp1.add(leaf3);
root.display(1); // 递归显示整个树结构

六、组合模式的应用场景

构建UI组件: 当开发复杂的UI组件时，这些组件通常包括单一组件和容纳其他组件的容器组件。使用组合模式可以让开发者只关注于组件的创建和功能实现，而不需要考虑它是单一组件还是组合组件。
事件委托管理: 组合模式可以用来管理事件处理程序，将多个事件处理程序组合成一个单一的事件处理程序，这样可以简化复杂的事件管理和委托逻辑。
菜单系统的构建: 多级菜单的构建是组合模式的典型应用之一。每个菜单项可能是一个简单的叶节点，或一个含有其他子菜单项的复杂组合节点。