Composite mode

Composite is a structural pattern. It is an abstract way to manage tree structures in a unified manner.

Intent: To group objects into a tree structure to represent a partial-whole hierarchy. Composite allows users to use single objects and Composite objects consistently.

For example,

If you don’t understand the above description, it doesn’t matter. Design patterns need to be used in daily work. Examples will help you understand better.

Company organization relationship tree

The organizational relationship of the company may be divided into departments and people, among which people belong to departments, some people have subordinates, and some people have no subordinates. If we uniformly abstract departments and people as organizational nodes, we can easily count the number of people and financial data in a certain department, regardless of whether the current node is a department or a person.

Operating system folders and files

Folders and files of the operating system is a typical tree structure, in order to facilitate the recursive folder files quantity or total size, we had better design will be abstract as a file folder and file, so that each node has the same method to add, delete, search a child elements, and don’t need to care about the current node is a folder or file.

Build platform components and containers

The relationship between a container and a component is very small. Users often think of a container as a component, but when building platform implementations, containers and components are slightly different in that containers can nest child elements, while components cannot. If so up platform components can be divided into the container and component, can lead to API split into two sets, does not favor the component developer maintenance and users to understand, good design is a unified as a component, the component and container component is a kind of special container no child elements, such components and containers will be allowed to have the same API, unified understanding and operation.

Intention to explain

Intent: To group objects into a tree structure to represent a partial-whole hierarchy. Composite allows users to use single objects and Composite objects consistently.

Better understanding, combination refers to multiple objects although there are certain differences, but the common combination into a tree structure, the object must exist between “part – the overall” relationship, portfolio model requires us to abstract an object Component model as a unified operation, leaf nodes and leaves implements the function of all, Even leaf nodes with no child elements still have methods like getChildren for transparency, but always return NULL.


Component is the composite object declaration interface, which typically implements all interfaces for all common classes and provides an interface to manage its children.

A Leaf is a Leaf node with no children and a Composite is a node with children.

It can be seen that the combination mode is a unified abstraction of all nodes in the tree structure. We do not need to care about the differences between leaf nodes and non-leaf nodes, but can shield these differences through the abstraction of the combination mode and deal with them in a unified way.

The code example

The following example is written in typescript.

// Unified abstraction

class Component {

  // Add child elements

  public add() {}

  // Get the name

  public getName() {}

  // Get the child element

  public getChildren() {}


// Non-leaf node

class Composite extends Component {

  public add(component: Component) {



  public getName() {



  public getChildren() {

    return this.children



// Leaves

class Leaf extends Component {

  public add(component: Component) {

    throw Error('Leaf node cannot add element')


  public getName() {



  public getChildren() {

    return null



Copy the code

Finally, we turn all operations on nodes into Component objects, regardless of whether the object is Composite or Leaf.


Composite patterns provide a layer of abstraction that actually increases business complexity in complex systems. If the Composite is too different from Leaf, the cost of understanding the unified abstraction is high.

At the same time, Leaf has to implement some empty functions that only exist in Composite, such as Add delete. Even if these methods are meaningless to them, unified invalid or error handling may be required to make the business layer really not aware of their differences, otherwise add may fail. This essentially exposes node differences to the business layer.


Composite pattern is a unified abstraction scheme for the specific scenario of tree structure, which is of great significance to reduce the complexity of the system. At the same time, we should not forget that excessive abstraction is harmful, and we should balance it.

Here’s a simple explanation:

Always focus on the Component. The tree differences are smoothed out.

The discussion address is: Intensive reading design Pattern-Composite Pattern · Issue #284 · DT-fe /weekly

If you’d like to participate in the discussion, pleaseClick here to, with a new theme every week, released on weekends or Mondays. Front end Intensive Reading – Helps you filter the right content.

Pay attention to the front end of intensive reading wechat public account

Copyright Notice: Freely reproduced – Non-commercial – Non-derivative – Remain signed (Creative Commons 3.0 License)