The tree structure processing of the Composite pattern

Composite Pattern for Tree Structure Processing

The Composite pattern is a structural design pattern that allows objects to be composed into tree structures to represent part-whole hierarchies. This pattern enables clients to treat individual objects and compositions of objects uniformly. In JavaScript, the Composite pattern is particularly suitable for handling recursive scenarios such as UI components and file systems.

Core Concepts of the Composite Pattern

The Composite pattern consists of three key roles:

1. Component: An abstract class or interface that defines the common interface for all objects
2. Leaf: A leaf node that has no child components
3. Composite: A container node that can contain child components

// Abstract component class
class Component {
  constructor(name) {
    this.name = name;
  }
  
  // Common interface
  operation() {
    throw new Error('Must be implemented in subclass');
  }
  
  // Methods for managing child components
  add(component) {
    throw new Error('Leaf nodes cannot add child components');
  }
  
  remove(component) {
    throw new Error('Leaf nodes cannot remove child components');
  }
  
  getChild(index) {
    throw new Error('Leaf nodes have no child components');
  }
}

Leaf Node Implementation

Leaf nodes are the basic elements in the composition and contain no child components:

class Leaf extends Component {
  constructor(name) {
    super(name);
  }
  
  operation() {
    console.log(`Performing operation on leaf node ${this.name}`);
  }
}

Composite Node Implementation

Composite nodes can contain child components and typically implement methods for adding, removing, and accessing child components:

class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  operation() {
    console.log(`Performing operation on composite node ${this.name}`);
    this.children.forEach(child => child.operation());
  }
  
  add(component) {
    this.children.push(component);
  }
  
  remove(component) {
    const index = this.children.indexOf(component);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }
  
  getChild(index) {
    return this.children[index];
  }
}

Practical Applications of the Composite Pattern

File System Example

The Composite pattern is well-suited for representing file system structures, where files and folders can be treated uniformly:

// File (leaf node)
class File extends Component {
  constructor(name, size) {
    super(name);
    this.size = size;
  }
  
  operation() {
    console.log(`File: ${this.name}, Size: ${this.size}KB`);
  }
  
  getSize() {
    return this.size;
  }
}

// Folder (composite node)
class Folder extends Composite {
  constructor(name) {
    super(name);
  }
  
  operation() {
    console.log(`Folder: ${this.name}`);
    super.operation();
  }
  
  getSize() {
    let totalSize = 0;
    this.children.forEach(child => {
      totalSize += child.getSize();
    });
    return totalSize;
  }
}

// Usage example
const root = new Folder('Root Directory');
const documents = new Folder('Documents');
const images = new Folder('Images');

root.add(documents);
root.add(images);

documents.add(new File('Resume.pdf', 1024));
documents.add(new File('Report.docx', 512));

images.add(new File('photo1.jpg', 2048));
images.add(new File('photo2.jpg', 3072));

root.operation();
console.log(`Total size: ${root.getSize()}KB`);

UI Component Tree Example

In front-end development, the Composite pattern is commonly used to build UI component trees:

// UI component base class
class UIComponent {
  constructor(name) {
    this.name = name;
  }
  
  render() {
    throw new Error('Must implement render method');
  }
  
  add(component) {
    throw new Error('Leaf components cannot add child components');
  }
  
  remove(component) {
    throw new Error('Leaf components cannot remove child components');
  }
}

// Leaf component
class Button extends UIComponent {
  render() {
    console.log(`Rendering button: ${this.name}`);
    return `<button>${this.name}</button>`;
  }
}

class Input extends UIComponent {
  render() {
    console.log(`Rendering input: ${this.name}`);
    return `<input placeholder="${this.name}">`;
  }
}

// Composite component
class Form extends UIComponent {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  render() {
    console.log(`Rendering form: ${this.name}`);
    let html = `<form>`;
    this.children.forEach(child => {
      html += child.render();
    });
    html += `</form>`;
    return html;
  }
  
  add(component) {
    this.children.push(component);
  }
  
  remove(component) {
    const index = this.children.indexOf(component);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }
}

// Usage example
const loginForm = new Form('Login Form');
loginForm.add(new Input('Username'));
loginForm.add(new Input('Password'));
loginForm.add(new Button('Login'));

console.log(loginForm.render());

Transparency and Safety in the Composite Pattern

The Composite pattern has two implementation approaches: transparent mode and safe mode. In transparent mode, the Component defines all methods (including those for managing child components), and Leaf nodes must implement these methods but may throw exceptions. In safe mode, methods for managing child components are only placed in the Composite class, but clients need to know the specific type of the component.

JavaScript typically uses transparent mode because dynamically typed languages can handle this situation more flexibly:

// Transparent mode example
class TransparentComponent {
  constructor(name) {
    this.name = name;
  }
  
  operation() {
    console.log(`Operation on component ${this.name}`);
  }
  
  // In transparent mode, all components have these methods
  add(component) {
    throw new Error('Unsupported operation');
  }
  
  remove(component) {
    throw new Error('Unsupported operation');
  }
  
  getChild(index) {
    throw new Error('Unsupported operation');
  }
}

// Transparent mode leaf node
class TransparentLeaf extends TransparentComponent {
  // No need to override add/remove/getChild; inherits the exception-throwing implementation
}

// Transparent mode composite node
class TransparentComposite extends TransparentComponent {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  add(component) {
    this.children.push(component);
  }
  
  remove(component) {
    const index = this.children.indexOf(component);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }
  
  getChild(index) {
    return this.children[index];
  }
  
  operation() {
    console.log(`Operation on composite component ${this.name}`);
    this.children.forEach(child => child.operation());
  }
}

Advantages and Disadvantages of the Composite Pattern

Advantages

1. Enables uniform treatment of simple and complex elements
2. Client code can handle individual objects and composite objects uniformly
3. Complies with the Open/Closed Principle, making it easy to add new types of components
4. Can build complex tree structures

Disadvantages

1. The design may be overly generalized, making it difficult to restrict components in the composition
2. In transparent mode, leaf nodes must implement irrelevant methods
3. For components with significant differences, designing a common interface may be challenging

Combining the Composite Pattern with the Iterator Pattern

The Composite pattern is often combined with the Iterator pattern to traverse complex tree structures:

// Depth-first iterator
class DepthFirstIterator {
  constructor(component) {
    this.stack = [component];
  }
  
  next() {
    if (this.stack.length === 0) {
      return { done: true };
    }
    
    const current = this.stack.pop();
    
    if (current instanceof Composite) {
      // Push in reverse order to ensure left-to-right traversal
      for (let i = current.children.length - 1; i >= 0; i--) {
        this.stack.push(current.children[i]);
      }
    }
    
    return { value: current, done: false };
  }
}

// Usage example
const tree = new Composite('root');
const branch1 = new Composite('branch1');
const branch2 = new Composite('branch2');

branch1.add(new Leaf('leaf1'));
branch1.add(new Leaf('leaf2'));
branch2.add(new Leaf('leaf3'));

tree.add(branch1);
tree.add(branch2);

const iterator = new DepthFirstIterator(tree);
let result = iterator.next();

while (!result.done) {
  console.log(result.value.name);
  result = iterator.next();
}

Application of the Composite Pattern in Virtual DOM

The virtual DOM in modern front-end frameworks is essentially an application of the Composite pattern:

// Simplified virtual DOM implementation
class VNode {
  constructor(type, props, children) {
    this.type = type;
    this.props = props || {};
    this.children = children || [];
  }
  
  render() {
    if (typeof this.type === 'string') {
      // Native DOM element
      const el = document.createElement(this.type);
      
      // Set attributes
      for (const [key, value] of Object.entries(this.props)) {
        el.setAttribute(key, value);
      }
      
      // Render child nodes
      this.children.forEach(child => {
        if (typeof child === 'string') {
          el.appendChild(document.createTextNode(child));
        } else {
          el.appendChild(child.render());
        }
      });
      
      return el;
    } else if (typeof this.type === 'function') {
      // Component
      const instance = new this.type(this.props);
      const childVNode = instance.render();
      return childVNode.render();
    }
  }
}

// Usage example
class MyComponent {
  constructor(props) {
    this.props = props;
  }
  
  render() {
    return new VNode('div', { class: 'container' }, [
      new VNode('h1', null, ['Hello, ', this.props.name]),
      new VNode('p', null, ['This is a component.'])
    ]);
  }
}

const app = new VNode(MyComponent, { name: 'World' });
document.body.appendChild(app.render());

Combining the Composite Pattern with the Visitor Pattern

The Composite pattern is often combined with the Visitor pattern to perform operations on complex structures without modifying the classes:

// Visitor interface
class Visitor {
  visitComponent(component) {
    throw new Error('Must implement visitComponent method');
  }
  
  visitLeaf(leaf) {
    throw new Error('Must implement visitLeaf method');
  }
}

// Extended component base class
class VisitableComponent {
  constructor(name) {
    this.name = name;
  }
  
  accept(visitor) {
    throw new Error('Must be implemented in subclass');
  }
}

// Visitable leaf node
class VisitableLeaf extends VisitableComponent {
  accept(visitor) {
    visitor.visitLeaf(this);
  }
}

// Visitable composite node
class VisitableComposite extends VisitableComponent {
  constructor(name) {
    super(name);
    this.children = [];
  }
  
  accept(visitor) {
    visitor.visitComponent(this);
    this.children.forEach(child => child.accept(visitor));
  }
  
  add(component) {
    this.children.push(component);
  }
}

// Concrete visitor: Name printer
class NamePrinter extends Visitor {
  visitComponent(component) {
    console.log(`Visiting composite component: ${component.name}`);
  }
  
  visitLeaf(leaf) {
    console.log(`Visiting leaf component: ${leaf.name}`);
  }
}

// Usage example
const root = new VisitableComposite('root');
const branch = new VisitableComposite('branch');
const leaf1 = new VisitableLeaf('leaf1');
const leaf2 = new VisitableLeaf('leaf2');

root.add(branch);
branch.add(leaf1);
branch.add(leaf2);

const visitor = new NamePrinter();
root.accept(visitor);