Considerations of patterns in sustainable programming

Considerations of Patterns in Sustainable Programming

The sustainability of programming patterns is not only about short-term functional implementation but also involves long-term maintenance, scalability, and team collaboration efficiency. In the JavaScript ecosystem, the choice of design patterns directly impacts the lifecycle cost of a project. Through the rational application of patterns, technical debt can be significantly reduced, and the code's ability to adapt to changing requirements can be enhanced.

Singleton Pattern and Resource Management

The singleton pattern excels in managing global resources, but overuse can lead to implicit coupling. Modern JavaScript implementations need to pay special attention to the characteristics of the module system:

// Modern singleton implementation (ES6 module)
const logger = {
  logs: [],
  log(message) {
    this.logs.push(message);
    console.log(`[LOG] ${message}`);
  },
  flush() {
    this.logs = [];
  }
};

// Freeze the object to prevent accidental modifications
Object.freeze(logger);

export default logger;

This implementation is easier to test compared to traditional closure-based solutions while leveraging the module system's inherent singleton nature. Key sustainability considerations include:

1. Explicit dependency declaration is preferable to implicit global access.
2. Lifecycle management methods (e.g., flush in the example).
3. Immutability protection to prevent runtime tampering.

Factory Pattern and Object Creation

Sustainable factory patterns need to balance flexibility and type safety. Combining with TypeScript can significantly improve maintainability:

interface Widget {
  render(): HTMLElement;
}

class ButtonWidget implements Widget {
  render() {
    const btn = document.createElement('button');
    btn.className = 'primary-btn';
    return btn;
  }
}

class InputWidget implements Widget {
  render() {
    const input = document.createElement('input');
    input.type = 'text';
    return input;
  }
}

function createWidget(config: { type: 'button' | 'input' }): Widget {
  switch(config.type) {
    case 'button': return new ButtonWidget();
    case 'input': return new InputWidget();
    default: 
      // The type system ensures this path is never reached
      throw new Error(`Unknown widget type`);
  }
}

This implementation defines contracts through interfaces and uses the type system for static validation, avoiding runtime type errors common in traditional factory patterns. Extensions only require adding new implementation classes without modifying factory logic, adhering to the open-closed principle.

Observer Pattern and Event Systems

Sustainable event system design must consider memory management and debugging support:

class EventEmitter {
  constructor() {
    this.listeners = new Map();
    this.eventHistory = new WeakMap();
  }

  on(event, callback) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    const wrapper = (...args) => {
      try {
        callback(...args);
      } catch (err) {
        console.error(`Event ${event} handler error:`, err);
      }
    };
    this.listeners.get(event).add(wrapper);
    return () => this.off(event, wrapper);
  }

  off(event, callback) {
    const handlers = this.listeners.get(event);
    if (handlers) handlers.delete(callback);
  }

  emit(event, ...args) {
    const handlers = this.listeners.get(event);
    if (handlers) {
      handlers.forEach(handler => handler(...args));
    }
    this.recordEvent(event, args);
  }

  recordEvent(event, args) {
    const history = this.eventHistory.get(event) || [];
    history.push({ timestamp: Date.now(), args });
    this.eventHistory.set(event, history.slice(-100)); // Keep the last 100 entries
  }
}

Key sustainability improvements:

1. Automatic error handling prevents single listener crashes from affecting the entire system.
2. WeakMap stores historical records to avoid memory leaks.
3. Returns an unsubscribe function to simplify lifecycle management.
4. Event history records aid debugging.

Strategy Pattern and Algorithm Selection

Maintainable strategy pattern implementations need to focus on strategy discovery and registration mechanisms:

// Strategy registry pattern
const compressionStrategies = {
  gzip: {
    compress: (data) => { /* gzip implementation */ },
    decompress: (data) => { /* gunzip implementation */ }
  },
  lz4: {
    compress: (data) => { /* lz4 implementation */ },
    decompress: (data) => { /* lz4 decompression */ }
  }
};

function getCompressionStrategy(format) {
  const strategy = compressionStrategies[format];
  if (!strategy) {
    const available = Object.keys(compressionStrategies).join(', ');
    throw new Error(`Unsupported format: ${format}. Available: ${available}`);
  }
  return strategy;
}

// Usage example
async function processData(data, format) {
  const { compress } = getCompressionStrategy(format);
  return {
    compressed: await compress(data),
    meta: { format, timestamp: Date.now() }
  };
}

This centralized registry design offers the following advantages over traditional strategy interface implementations:

1. Automatic discovery of available strategies through the registry.
2. Unified error handling and strategy enumeration.
3. Facilitates runtime documentation generation.
4. Supports hot updates to strategy configurations.

Decorator Pattern and Functional Extension

The ES decorator proposal provides a new paradigm for pattern implementation, but sustainable design must consider compositional safety:

function validateSchema(schema) {
  return (target, name, descriptor) => {
    const original = descriptor.value;
    descriptor.value = function(...args) {
      const [data] = args;
      const { error } = schema.validate(data);
      if (error) throw new ValidationError(error.details);
      return original.apply(this, args);
    };
    return descriptor;
  };
}

function logDuration(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = async function(...args) {
    const start = Date.now();
    try {
      return await original.apply(this, args);
    } finally {
      console.log(`${name} executed in ${Date.now() - start}ms`);
    }
  };
}

class DataService {
  @validateSchema(userSchema)
  @logDuration
  async createUser(userData) {
    // Business logic
  }
}

Considerations for decorator composition:

1. Execution order is bottom-up (logDuration executes first).
2. Ensure decorators do not accidentally override properties.
3. Preserve metadata of the original method (e.g., length property).
4. Avoid side effects in decorators.

Module Pattern and State Isolation

Modern module patterns need to address state isolation requirements in micro-frontend architectures:

// Module sandbox implementation
function createModuleSandbox(namespace, initState) {
  const state = { ...initState };
  const eventBus = new EventEmitter();
  const exposed = {
    getState: (key) => key ? state[key] : { ...state },
    setState: (updater) => {
      const newState = typeof updater === 'function' 
        ? updater(state) 
        : { ...state, ...updater };
      Object.assign(state, newState);
      eventBus.emit('state-change', newState);
    },
    onStateChange: (listener) => eventBus.on('state-change', listener)
  };

  return Object.freeze({
    ...exposed,
    // Prevent direct modification outside the sandbox
    __proto__: null
  });
}

// Usage example
const userModule = createModuleSandbox('user', { 
  id: null, 
  name: 'Guest' 
});

// Other modules can only interact through exposed APIs
userModule.setState({ id: 123 });

Key design points for the sandbox pattern:

1. Achieve true state isolation through closures.
2. Freeze public APIs to prevent prototype pollution.
3. Change notification mechanisms.
4. Deep copy initial state to avoid reference sharing.

Proxy Pattern and Operation Interception

Sustainable proxy implementations must consider performance overhead and debugging support:

function createTracedProxy(target, { prefix = '' } = {}) {
  const handler = {
    get(target, prop, receiver) {
      console.debug(`${prefix}GET ${String(prop)}`);
      const value = Reflect.get(target, prop, receiver);
      return typeof value === 'object' && value !== null
        ? createTracedProxy(value, { prefix: `${prefix}${String(prop)}.` })
        : value;
    },
    set(target, prop, value, receiver) {
      console.debug(`${prefix}SET ${String(prop)} =`, value);
      return Reflect.set(target, prop, value, receiver);
    },
    apply(target, thisArg, args) {
      console.debug(`${prefix}CALL with`, args);
      const result = Reflect.apply(target, thisArg, args);
      console.debug(`${prefix}RETURN`, result);
      return result;
    }
  };

  return new Proxy(target, handler);
}

// Usage example
const api = createTracedProxy({
  fetchData: async (id) => {
    const res = await fetch(`/data/${id}`);
    return res.json();
  }
});

await api.fetchData(123); 
// Output: 
// GET fetchData
// CALL with [123]
// RETURN Promise

Sustainability considerations for the proxy pattern:

1. Recursive proxying of nested objects.
2. Use Reflect to maintain default behavior.
3. Configurable logging prefixes.
4. Avoid performance issues caused by excessive proxying.

Composite Pattern and UI Tree Structures

Component models in frontend frameworks are essentially evolutions of the composite pattern. Sustainable implementations must focus on:

function createTreeWalker(root, visitors) {
  const stack = [];
  let currentNode = root;

  while (currentNode || stack.length) {
    if (currentNode) {
      // Pre-order traversal
      if (visitors.onEnter) {
        visitors.onEnter(currentNode);
      }

      stack.push({
        node: currentNode,
        childIndex: 0
      });

      currentNode = currentNode.children?.[0];
    } else {
      const frame = stack[stack.length - 1];
      if (frame.childIndex < frame.node.children?.length - 1) {
        frame.childIndex++;
        currentNode = frame.node.children[frame.childIndex];
      } else {
        // Post-order traversal
        if (visitors.onExit) {
          visitors.onExit(frame.node);
        }
        stack.pop();
      }
    }
  }
}

// Usage example
const domTree = {
  type: 'div',
  children: [
    { type: 'h1', children: [{ type: 'text', content: 'Title' }] },
    { type: 'p', children: [
      { type: 'text', content: 'Paragraph' },
      { type: 'strong', children: [{ type: 'text', content: 'bold' }] }
    ]}
  ]
};

createTreeWalker(domTree, {
  onEnter(node) {
    console.log('Enter:', node.type);
  },
  onExit(node) {
    console.log('Exit:', node.type);
  }
});

Special considerations for the composite pattern in frontend development:

1. Support for multiple traversal methods (DFS/BFS).
2. Handling edge cases like text nodes.
3. Integration with virtual DOM mechanisms.
4. Performance-sensitive batch operation support.

State Pattern and Complex State Machines

Sustainable state machine implementations require decoupling state logic from transition rules:

class StateMachine {
  constructor(states, initialState) {
    this.states = new Map();
    this.current = null;
    
    Object.entries(states).forEach(([name, definition]) => {
      this.states.set(name, {
        ...definition,
        name,
        transitions: new Map(Object.entries(definition.transitions || {}))
      });
    });

    this.transitionTo(initialState);
  }

  transitionTo(stateName) {
    const newState = this.states.get(stateName);
    if (!newState) throw new Error(`Unknown state: ${stateName}`);

    if (this.current) {
      if (this.current.transitions.has(stateName)) {
        console.log(`Transition: ${this.current.name} -> ${stateName}`);
      } else {
        throw new Error(`Invalid transition: ${this.current.name} -> ${stateName}`);
      }
    }

    this.current = newState;
    this.current.onEnter?.();
  }

  dispatch(action, payload) {
    if (!this.current.actions?.[action]) {
      throw new Error(`Invalid action ${action} in state ${this.current.name}`);
    }
    return this.current.actions[action](payload);
  }
}

// Usage example
const playerFSM = new StateMachine({
  idle: {
    onEnter: () => console.log('Player ready'),
    transitions: { walk: 'walking', jump: 'jumping' },
    actions: {
      greet: () => console.log('Hello!')
    }
  },
  walking: {
    transitions: { stop: 'idle', jump: 'jumping' },
    onEnter: () => console.log('Start walking'),
    onExit: () => console.log('Stop walking')
  },
  jumping: {
    transitions: { land: 'idle' },
    onEnter: () => {
      console.log('Jumping!');
      setTimeout(() => playerFSM.transitionTo('idle'), 1000);
    }
  }
}, 'idle');

Evolution directions for the state pattern:

1. Separation of state definition and machine implementation.
2. Typed states and actions.
3. Visual state diagram generation.
4. Time-driven automatic transitions.

Middleware Pattern and Processing Pipelines

Sustainable middleware systems must balance flexibility and execution efficiency:

function createPipeline(initialHandler) {
  const middlewares = [];
  let pipeline = initialHandler;

  return {
    use(middleware) {
      middlewares.push(middleware);
      // Rebuild the pipeline
      pipeline = middlewares.reduceRight(
        (next, middleware) => middleware(next),
        initialHandler
      );
    },
    async execute(input) {
      const context = { 
        input,
        timestamp: Date.now(),
        metrics: {}
      };
      
      try {
        const result = await pipeline(context);
        return { ...context, result };
      } catch (error) {
        return { ...context, error };
      }
    },
    getMiddlewareCount() {
      return middlewares.length;
    }
  };
}

// Usage example
const requestPipeline = createPipeline(async (ctx) => {
  return `Processed: ${ctx.input}`;
});

requestPipeline.use(async (next) => async (ctx) => {
  ctx.metrics.start = performance.now();
  const result = await next(ctx);
  ctx.metrics.duration = performance.now() - ctx.metrics.start;
  return result;
});

requestPipeline.use(async (next) => async (ctx) => {
  if (ctx.input.length > 100) {
    throw new Error('Input too long');
  }
  return next(ctx);
});

// Execution
requestPipeline.execute('Test input')
  .then(console.log);

Key design aspects of middleware systems:

1. Explicit context object passing.
2. Error bubbling mechanisms.
3. Performance metric collection.
4. Hot-swappable middleware support.
5. Predictable execution order.