组合模式

// ---- Component 接口 ----
interface FileSystemNode {
  readonly name: string;
  getSize(): number;
  display(indent?: number): void;
}

// ---- Leaf: 文件 ----
class File implements FileSystemNode {
  constructor(public readonly name: string, private readonly size: number) {}

  getSize(): number {
    return this.size;
  }

  display(indent: number = 0): void {
    const prefix = '  '.repeat(indent);
    console.log(`${prefix}- ${this.name} [${this.size} KB]`);
  }
}

// ---- Composite: 目录 ----
class Directory implements FileSystemNode {
  private children: FileSystemNode[] = [];

  constructor(public readonly name: string) {}

  add(node: FileSystemNode): this {
    this.children.push(node);
    return this;
  }

  getSize(): number {
    return this.children.reduce((sum, child) => sum + child.getSize(), 0);
  }

  display(indent: number = 0): void {
    const prefix = '  '.repeat(indent);
    console.log(`${prefix}+ ${this.name}/ [${this.getSize()} KB]`);
    this.children.forEach((child) => child.display(indent + 1));
  }
}

// ---- 使用 ----
const root = new Directory('src')
  .add(new File('index.ts', 3))
  .add(new File('App.tsx', 8))
  .add(
    new Directory('components')
      .add(new File('Button.tsx', 5))
      .add(new File('Input.tsx', 4))
  );

root.display();
// + src/ [20 KB]
//   - index.ts [3 KB]
//   - App.tsx [8 KB]
//   + components/ [9 KB]
//     - Button.tsx [5 KB]
//     - Input.tsx [4 KB]

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

interface CompositeComponent<T> {
  readonly data: T;
  readonly children: ReadonlyArray<CompositeComponent<T>>;
  readonly parent: CompositeComponent<T> | null;
  addChild(node: CompositeComponent<T>): void;
  removeChild(node: CompositeComponent<T>): boolean;
  traverse(callback: (node: CompositeComponent<T>, depth: number) => void): void;
  find(predicate: (node: CompositeComponent<T>) => boolean): CompositeComponent<T> | null;
}

type TreeNode<T> = {
  readonly id: string;
  readonly data: T;
  readonly children: TreeNode<T>[];
};

// 递归构建辅助函数
function createTreeNode<T>(id: string, data: T, children: TreeNode<T>[] = []): TreeNode<T> {
  return { id, data, children };
}

// 递归遍历
function traverseTree<T>(node: TreeNode<T>, callback: (node: TreeNode<T>, depth: number) => void, depth = 0): void {
  callback(node, depth);
  node.children.forEach((child) => traverseTree(child, callback, depth + 1));
}

// ---- 使用：组织架构 ----
type DepartmentData = { name: string; headcount: number };
const orgTree: TreeNode<DepartmentData> = createTreeNode('root', { name: '总公司', headcount: 0 }, [
  createTreeNode('eng', { name: '研发部', headcount: 50 }, [
    createTreeNode('fe', { name: '前端组', headcount: 20 }),
    createTreeNode('be', { name: '后端组', headcount: 30 }),
  ]),
  createTreeNode('mkt', { name: '市场部', headcount: 40 }),
  createTreeNode('hr', { name: '人事部', headcount: 27 }),
]);

// 计算总人数
let totalHeadcount = 0;
traverseTree(orgTree, (node) => {
  totalHeadcount += node.data.headcount;
});
console.log(`Total headcount: ${totalHeadcount}`); // Total headcount: 167

// 深度优先迭代器
class DepthFirstIterator<T> implements Iterator<CompositeComponent<T>> {
  private readonly stack: Array<{ node: CompositeComponent<T>; childIndex: number }>;

  constructor(root: CompositeComponent<T>) {
    this.stack = [{ node: root, childIndex: 0 }];
  }

  next(): IteratorResult<CompositeComponent<T>> {
    while (this.stack.length > 0) {
      const top = this.stack[this.stack.length - 1];
      const { node, childIndex } = top;

      // 当前节点子节点未遍历完，压入下一个子节点
      if (childIndex < node.children.length) {
        top.childIndex++;
        this.stack.push({ node: node.children[childIndex], childIndex: 0 });
      } else {
        // 子节点遍历完毕，弹出并返回当前节点
        this.stack.pop();
        return { value: node, done: false };
      }
    }
    return { value: undefined as unknown, done: true };
  }

  [Symbol.iterator]() { return this; }
}

// 广度优先迭代器
class BreadthFirstIterator<T> implements Iterator<CompositeComponent<T>> {
  private readonly queue: Array<CompositeComponent<T>> = [];
  constructor(root: CompositeComponent<T>) { this.queue.push(root); }

  next(): IteratorResult<CompositeComponent<T>> {
    const node = this.queue.shift();
    if (!node) return { value: undefined as unknown, done: true };
    node.children.forEach((child) => this.queue.push(child));
    return { value: node, done: false };
  }

  [Symbol.iterator]() { return this; }
}

// 为组合节点附加迭代器支持
class IterableComposite<T> implements CompositeComponent<T> {
  readonly data: T;
  readonly children: CompositeComponent<T>[] = [];
  readonly parent: CompositeComponent<T> | null = null;
  constructor(data: T, parent: CompositeComponent<T> | null = null) { this.data = data; this.parent = parent; }
  addChild(node: CompositeComponent<T>): void { this.children.push(node); }
  removeChild(node: CompositeComponent<T>): boolean {
    const idx = this.children.indexOf(node);
    if (idx >= 0) { this.children.splice(idx, 1); return true; }
    return false;
  }
  traverse(callback: (node: CompositeComponent<T>, depth: number) => void): void {
    const walk = (node: CompositeComponent<T>, depth: number) => {
      callback(node, depth);
      node.children.forEach((child) => walk(child, depth + 1));
    };
    walk(this, 0);
  }
  find(predicate: (node: CompositeComponent<T>) => boolean): CompositeComponent<T> | null {
    let found: CompositeComponent<T> | null = null;
    this.traverse((node) => { if (!found && predicate(node)) found = node; });
    return found;
  }

  // 获取 BFS 迭代器
  bfs(): Iterator<CompositeComponent<T>> {
    return new BreadthFirstIterator(this);
  }
}

// 使用 discriminated union 实现类型安全的组合
type NodeType = 'leaf' | 'composite';

interface BaseNode {
  readonly type: NodeType;
  readonly name: string;
  execute(): void;
}

interface LeafNode extends BaseNode {
  readonly type: 'leaf';
}

interface CompositeNode extends BaseNode {
  readonly type: 'composite';
  readonly children: Node[];
}

type Node = LeafNode | CompositeNode;

// 类型守卫
function isComposite(node: Node): node is CompositeNode {
  return node.type === 'composite';
}

// 工厂函数
function createLeaf(name: string, execute: () => void): LeafNode {
  return { type: 'leaf', name, execute };
}

function createComposite(name: string, children: Node[]): CompositeNode {
  return { type: 'composite', name, execute: () => children.forEach((c) => c.execute()), children };
}

function processNode(node: Node): void {
  node.execute();
  if (isComposite(node)) {
    node.children.forEach(processNode);
  }
}

interface OrgComponent {
  readonly name: string;
  getHeadcount(): number;
  getBudget(): number;
  print(indent?: number): void;
}

class Employee implements OrgComponent {
  constructor(
    public readonly name: string,
    private readonly title: string,
    private readonly salary: number
  ) {}

  getHeadcount(): number { return 1; }
  getBudget(): number { return this.salary; }
  print(indent: number = 0): void {
    console.log(`${'  '.repeat(indent)}- ${this.name} (${this.title})`);
  }
}

// ---- Composite: 部门 ----
class Department implements OrgComponent {
  private members: OrgComponent[] = [];
  constructor(public readonly name: string) {}

  add(member: OrgComponent): this {
    this.members.push(member);
    return this;
  }
  getHeadcount(): number {
    return this.members.reduce((sum, m) => sum + m.getHeadcount(), 0);
  }
  getBudget(): number {
    return this.members.reduce((sum, m) => sum + m.getBudget(), 0);
  }
  print(indent: number = 0): void {
    console.log(`${'  '.repeat(indent)}+ ${this.name} [${this.getHeadcount()}人]`);
    this.members.forEach((m) => m.print(indent + 1));
  }
}

// ---- 使用 ----
const company = new Department('总公司');
const eng = new Department('研发部');
const mkt = new Department('市场部');
eng.add(new Employee('李雷', '前端工程师', 20000)).add(new Employee('韩梅梅', '后端工程师', 25000));
mkt.add(new Employee('Tom', '市场专员', 15000));
company.add(eng).add(mkt);

company.print();
console.log(`Total headcount: ${company.getHeadcount()}`);
console.log(`Total budget: ${company.getBudget()}`);

import React, { ReactNode, Children, isValidElement } from 'react';

// 组合模式在 React 中的体现
// 1. 容器组件（Composite）：接受 children，负责布局和状态分发
// 2. 叶子组件（Leaf）：纯展示，不接受 children

// 容器组件：统一遍历与操作子组件
function CompositeContainer({
  children,
  onChildRender,
}: {
  children: ReactNode;
  onChildRender?: (child: ReactNode) => ReactNode;
}) {
  // 遍历所有子元素，允许统一包装或增强
  const processed = Children.map(children, (child, index) =>
    onChildRender ? onChildRender(child) : <section key={index}>{child}</section>
  );
  return <div className="container">{processed}</div>;
}

// 叶子组件：纯展示，不接受 children
function LeafItem({ label }: { label: string }) {
  return <div className="leaf-item">{label}</div>;
}

// 组合使用
function App() {
  return (
    <CompositeContainer>
      <LeafItem label="Root" />
      <CompositeContainer>
        <LeafItem label="Sub-A" />
        <LeafItem label="Sub-B" />
      </CompositeContainer>
    </CompositeContainer>
  );
}

// 简化的 VNode 类型
interface VNode {
  tag: string | null;       // null 表示文本节点
  data: Record<string, any> | null;
  children: VNode[] | null;
  text: string | null;
  elm: Element | null;      // 真实 DOM 引用
}

// 创建文本节点（Leaf）
function createTextVNode(text: string): VNode {
  return { tag: null, data: null, children: null, text, elm: null };
}

// 创建元素节点（Composite）
function createElementVNode(tag: string, data: Record<string, any> | null, children: VNode[]): VNode {
  return { tag, data, children, text: null, elm: null };
}

// 渲染 VNode 为真实 DOM（递归处理子节点）
function renderVNode(vnode: VNode): Element | Text {
  if (vnode.text !== null) {
    return document.createTextNode(vnode.text);
  }
  const el = document.createElement(vnode.tag!);
  vnode.children?.forEach((child) => el.appendChild(renderVNode(child)));
  vnode.elm = el;
  return el;
}

// ---- 使用 ----
const vnode = createElementVNode('ul', null, [
  createElementVNode('li', null, [createTextVNode('Item 1')]),
  createElementVNode('li', null, [createTextVNode('Item 2')]),
]);

// document.body.appendChild(renderVNode(vnode));

interface MenuNode {
  readonly label: string;
  readonly enabled: boolean;
  execute(): void;
  display(indent?: number): void;
}

class MenuItem implements MenuNode {
  constructor(
    public readonly label: string,
    public readonly enabled: boolean = true,
    private readonly action?: () => void,
    private readonly shortcut?: string
  ) {}

  execute(): void {
    if (this.enabled) this.action?.();
  }
  display(indent: number = 0): void {
    console.log(`${'  '.repeat(indent)}- ${this.label}${this.shortcut ? ` (${this.shortcut})` : ''}`);
  }
}

// ---- Composite: 菜单组 ----
class MenuGroup implements MenuNode {
  private items: MenuNode[] = [];
  constructor(public readonly label: string, public readonly enabled: boolean = true) {}

  add(item: MenuNode): this {
    this.items.push(item);
    return this;
  }
  execute(): void { this.items.forEach((item) => item.execute()); }
  display(indent: number = 0): void {
    console.log(`${'  '.repeat(indent)}+ ${this.label}`);
    this.items.forEach((item) => item.display(indent + 1));
  }
}

// ---- 使用 ----
const menuBar = new MenuGroup('菜单栏');
const fileMenu = new MenuGroup('文件')
  .add(new MenuItem('新建', true, () => console.log('新建'), 'Ctrl+N'))
  .add(new MenuItem('打开', true, () => console.log('打开'), 'Ctrl+O'))
  .add(new MenuItem('保存', true, () => console.log('保存'), 'Ctrl+S'));
const editMenu = new MenuGroup('编辑')
  .add(new MenuItem('Undo', true, () => console.log('undo'), 'Ctrl+Z'))
  .add(new MenuItem('Redo', true, () => console.log('redo'), 'Ctrl+Y'));

menuBar.add(fileMenu).add(editMenu);
menuBar.display();

interface ValidationResult {
  readonly valid: boolean;
  readonly errors: string[];
}

interface Validator extends ValidationResult {
  readonly label: string;
  validate(): ValidationResult;
}

// Leaf: 单个验证规则
class RequiredValidator implements Validator {
  readonly label: string;
  readonly valid: boolean;
  readonly errors: string[];
  constructor(private value: unknown, label = '字段') {
    this.label = label;
    this.valid = this.value !== null && this.value !== undefined && this.value !== '';
    this.errors = this.valid ? [] : [`${label} is required`];
  }
  validate(): ValidationResult { return { valid: this.valid, errors: this.errors }; }
}

// ---- Composite: 表单验证器 ----
class FormValidator implements Validator {
  readonly label = 'form';
  readonly valid: boolean;
  readonly errors: string[];
  private validators: Validator[] = [];

  constructor() {
    this.valid = true;
    this.errors = [];
  }

  add(validator: Validator): this {
    this.validators.push(validator);
    return this;
  }
  validate(): ValidationResult {
    const results = this.validators.map((v) => v.validate());
    const errors = results.flatMap((r) => r.errors);
    return { valid: errors.length === 0, errors };
  }
}

// ---- 使用 ----
const formValidator = new FormValidator();
const nameValidator = new RequiredValidator('李雷', 'Name');
const emailValidator = new RequiredValidator('', 'Email');

formValidator.add(nameValidator).add(emailValidator);

const result = formValidator.validate();
console.log(result);
// { valid: false, errors: ['Email is required'] }

import java.util.ArrayList;
import java.util.List;

// 组件接口：叶子与容器统一处理
interface FileSystemNode {
    void display(String indent);
}

// 叶子节点：文件
class FileNode implements FileSystemNode {
    private final String name;

    public FileNode(String name) {
        this.name = name;
    }

    @Override
    public void display(String indent) {
        System.out.println(indent + "📄 " + name);
    }
}

// 容器节点：目录，可包含文件与子目录
class DirectoryNode implements FileSystemNode {
    private final String name;
    private final List<FileSystemNode> children = new ArrayList<>();

    public DirectoryNode(String name) {
        this.name = name;
    }

    public void add(FileSystemNode node) {
        children.add(node);
    }

    @Override
    public void display(String indent) {
        System.out.println(indent + "📁 " + name);
        for (FileSystemNode child : children) {
            child.display(indent + "  ");
        }
    }
}

// 使用：客户端无需区分叶子还是容器
public class Client {
    public static void main(String[] args) {
        DirectoryNode root = new DirectoryNode("src");
        DirectoryNode main = new DirectoryNode("main");
        main.add(new FileNode("Main.java"));
        root.add(main);
        root.add(new FileNode("pom.xml"));
        root.display("");
    }
}

from abc import ABC, abstractmethod

class FileSystemNode(ABC):
    @abstractmethod
    def display(self, indent: str):
        pass

# 叶子节点
class FileNode(FileSystemNode):
    def __init__(self, name: str):
        self.name = name

    def display(self, indent: str):
        print(f"{indent}📄 {self.name}")

# 容器节点
class DirectoryNode(FileSystemNode):
    def __init__(self, name: str):
        self.name = name
        self.children = []

    def add(self, node: FileSystemNode):
        self.children.append(node)

    def display(self, indent: str):
        print(f"{indent}📁 {self.name}")
        for child in self.children:
            child.display(indent + "  ")

# 使用：客户端无需区分叶子与容器
root = DirectoryNode("src")
main = DirectoryNode("main")
main.add(FileNode("Main.py"))
root.add(main)
root.add(FileNode("setup.py"))
root.display("")