大规模数据处理的模式优化

大规模数据处理的模式优化

数据处理在现代前端应用中越来越常见，尤其是随着单页应用和复杂交互场景的普及。JavaScript作为主要语言，需要高效处理大量数据，而设计模式在这方面提供了系统化的解决方案。从简单的数组操作到复杂的流处理，不同的模式适用于不同规模的数据集和性能要求。

迭代器模式处理大数据集

当数据集过大无法一次性加载时，迭代器模式提供按需访问的能力。这种模式抽象了数据遍历过程，使得客户端代码无需关心底层数据结构。

class BigDataIterator {
  constructor(data, chunkSize = 100) {
    this.data = data;
    this.index = 0;
    this.chunkSize = chunkSize;
  }

  next() {
    if (this.index >= this.data.length) return { done: true };
    
    const chunk = this.data.slice(
      this.index, 
      Math.min(this.index + this.chunkSize, this.data.length)
    );
    this.index += this.chunkSize;
    
    return { value: chunk, done: false };
  }

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

// 使用示例
const massiveDataset = new Array(1e6).fill().map((_, i) => i);
const iterator = new BigDataIterator(massiveDataset);

for (const chunk of iterator) {
  // 处理每个数据块
  console.log(`Processing chunk of ${chunk.length} items`);
}

这种实现方式特别适合需要分批处理数据的场景，如分页加载或大数据可视化。通过控制chunkSize可以平衡内存使用和处理效率。

观察者模式实现实时数据处理

对于持续产生的数据流，观察者模式比轮询更高效。它建立了一对多的依赖关系，当数据变化时自动通知所有观察者。

class DataStream {
  constructor() {
    this.observers = [];
    this.data = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
    return () => {
      this.observers = this.observers.filter(obs => obs !== observer);
    };
  }

  addData(newData) {
    this.data.push(...newData);
    this.notify(newData);
  }

  notify(newData) {
    this.observers.forEach(observer => observer.update(newData));
  }
}

class DataProcessor {
  update(newData) {
    // 实时处理新增数据
    const processed = newData.map(item => item * 2);
    console.log('Processed batch:', processed);
  }
}

// 使用示例
const stream = new DataStream();
const processor = new DataProcessor();
const unsubscribe = stream.subscribe(processor);

// 模拟数据到达
setInterval(() => {
  const newData = Array(100).fill().map(() => Math.random());
  stream.addData(newData);
}, 1000);

// 取消订阅
// unsubscribe();

这种模式在实时监控、股票行情等场景特别有用，避免了不必要的轮询开销。

策略模式优化数据处理算法

不同数据特征需要不同处理算法，策略模式允许运行时动态选择最佳算法。

const processingStrategies = {
  smallDataset: data => data.sort((a, b) => a - b),
  largeDataset: data => {
    // 使用更高效但可能更复杂的大数据排序算法
    return data.sort((a, b) => a - b); // 实际中可能使用分治算法
  },
  streamingData: data => {
    // 流式处理，不保留全部数据
    let sum = 0;
    data.forEach(num => { sum += num });
    return sum / data.length;
  }
};

class DataProcessor {
  constructor(strategy = 'smallDataset') {
    this.setStrategy(strategy);
  }

  setStrategy(strategy) {
    this.strategy = processingStrategies[strategy] || processingStrategies.smallDataset;
  }

  process(data) {
    return this.strategy(data);
  }
}

// 使用示例
const processor = new DataProcessor();
const smallData = [3, 1, 4, 1, 5];
console.log(processor.process(smallData)); // [1, 1, 3, 4, 5]

processor.setStrategy('largeDataset');
const largeData = new Array(1e6).fill().map(() => Math.floor(Math.random() * 1000));
console.log(processor.process(largeData).slice(0, 5)); // 显示前几个排序结果

这种灵活性使得应用可以根据数据规模、时间敏感度等因素选择最佳处理方式。

备忘录模式实现数据处理状态保存

复杂数据处理可能需要回滚或保存中间状态，备忘录模式提供了状态捕获和恢复机制。

class DataProcessor {
  constructor() {
    this.state = null;
    this.history = [];
  }

  process(data) {
    // 保存当前状态到历史记录
    this.saveState(data);
    
    // 模拟复杂处理
    return data.map(item => ({
      original: item,
      processed: item * 2,
      timestamp: Date.now()
    }));
  }

  saveState(data) {
    this.history.push({
      state: JSON.parse(JSON.stringify(data)), // 深拷贝
      timestamp: Date.now()
    });
    
    // 限制历史记录数量
    if (this.history.length > 10) {
      this.history.shift();
    }
  }

  restoreState(index) {
    if (index >= 0 && index < this.history.length) {
      return JSON.parse(JSON.stringify(this.history[index].state));
    }
    return null;
  }
}

// 使用示例
const processor = new DataProcessor();
const dataset = [1, 2, 3, 4, 5];

// 第一次处理
const result1 = processor.process(dataset);
console.log(result1);

// 修改数据后再次处理
dataset.push(6);
const result2 = processor.process(dataset);
console.log(result2);

// 恢复到第一次处理前的状态
const original = processor.restoreState(0);
console.log('Restored:', original); // [1, 2, 3, 4, 5]

这在数据探索、机器学习等需要反复试验的场景特别有价值。

代理模式优化数据访问

代理模式可以控制对大数据对象的访问，实现延迟加载、访问控制或缓存等优化。

class HeavyData {
  constructor() {
    this.data = this.loadData();
  }

  loadData() {
    console.log('Loading expensive data...');
    // 模拟大数据加载
    return new Array(1e6).fill().map((_, i) => ({
      id: i,
      value: Math.random()
    }));
  }

  getItem(id) {
    return this.data.find(item => item.id === id);
  }
}

class DataProxy {
  constructor() {
    this.heavyData = null;
    this.cache = new Map();
  }

  getItem(id) {
    // 先检查缓存
    if (this.cache.has(id)) {
      console.log('Returning from cache');
      return this.cache.get(id);
    }

    // 延迟初始化大数据对象
    if (!this.heavyData) {
      this.heavyData = new HeavyData();
    }

    const item = this.heavyData.getItem(id);
    this.cache.set(id, item);
    return item;
  }
}

// 使用示例
const proxy = new DataProxy();

// 第一次访问会加载大数据
console.log(proxy.getItem(42)); // 加载数据并返回

// 后续访问相同项目从缓存获取
console.log(proxy.getItem(42)); // 从缓存返回

这种模式特别适合数据量大但访问分散的场景，如地图应用中的地理数据。

组合模式处理树形数据

对于层级数据，组合模式可以统一处理单个对象和对象集合。

class DataNode {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  add(child) {
    this.children.push(child);
  }

  process(operation) {
    console.log(`Processing ${this.name}`);
    operation(this);
    
    this.children.forEach(child => {
      child.process(operation);
    });
  }

  // 其他数据处理方法...
}

// 使用示例
const root = new DataNode('Root');
const group1 = new DataNode('Group 1');
const group2 = new DataNode('Group 2');

group1.add(new DataNode('Item 1.1'));
group1.add(new DataNode('Item 1.2'));
group2.add(new DataNode('Item 2.1'));

root.add(group1);
root.add(group2);

// 定义数据处理操作
const dataOperation = node => {
  node.value = node.name.length * Math.random();
};

// 对整个数据树执行操作
root.process(dataOperation);

这种模式在组织结构、文件系统等层级数据场景中特别有用。

装饰器模式增强数据处理功能

装饰器模式可以动态添加数据处理功能，而不修改原有代码。

class BasicDataProcessor {
  process(data) {
    return data;
  }
}

function withLogging(processor) {
  return {
    process(data) {
      console.log('Processing data:', data);
      const result = processor.process(data);
      console.log('Processing complete. Result:', result);
      return result;
    }
  };
}

function withValidation(processor) {
  return {
    process(data) {
      if (!Array.isArray(data)) {
        throw new Error('Data must be an array');
      }
      return processor.process(data);
    }
  };
}

function withPerformanceTracking(processor) {
  return {
    process(data) {
      const start = performance.now();
      const result = processor.process(data);
      const duration = performance.now() - start;
      console.log(`Processing took ${duration.toFixed(2)}ms`);
      return result;
    }
  };
}

// 使用示例
let processor = new BasicDataProcessor();
processor = withLogging(processor);
processor = withValidation(processor);
processor = withPerformanceTracking(processor);

const data = [1, 2, 3, 4, 5];
processor.process(data);

这种组合方式使得数据处理流程可以灵活配置，适合需要多种横切关注点的场景。

工厂模式创建数据处理管道

复杂数据处理通常需要多个步骤，工厂模式可以封装这些管道的创建逻辑。

class DataPipelineFactory {
  static createSimplePipeline() {
    const steps = [
      data => data.filter(x => x !== null),
      data => data.map(x => x * 2),
      data => data.sort((a, b) => a - b)
    ];
    
    return new DataPipeline(steps);
  }

  static createComplexPipeline() {
    const steps = [
      data => data.filter(x => x !== null && x !== undefined),
      data => {
        const avg = data.reduce((sum, x) => sum + x, 0) / data.length;
        return data.map(x => (x - avg) / avg);
      },
      data => data.filter(x => Math.abs(x) < 2)
    ];
    
    return new DataPipeline(steps);
  }
}

class DataPipeline {
  constructor(steps) {
    this.steps = steps;
  }

  execute(data) {
    return this.steps.reduce((result, step) => step(result), data);
  }
}

// 使用示例
const simplePipeline = DataPipelineFactory.createSimplePipeline();
const complexPipeline = DataPipelineFactory.createComplexPipeline();

const testData = [1, 2, null, 3, 4, undefined, 5];
console.log(simplePipeline.execute(testData)); // [2, 4, 6, 8, 10]
console.log(complexPipeline.execute(testData)); // 标准化后的数据

这种模式在ETL(抽取、转换、加载)流程中特别常见，可以预定义各种处理流程。

责任链模式实现数据处理中间件

对于需要多个处理阶段的数据流，责任链模式提供了灵活的管道机制。

class ProcessingStep {
  constructor(nextStep = null) {
    this.next = nextStep;
  }

  setNext(nextStep) {
    this.next = nextStep;
    return nextStep;
  }

  process(data) {
    const processed = this.doProcessing(data);
    if (this.next) {
      return this.next.process(processed);
    }
    return processed;
  }

  doProcessing(data) {
    throw new Error('Subclasses must implement doProcessing');
  }
}

class ValidationStep extends ProcessingStep {
  doProcessing(data) {
    if (!Array.isArray(data)) {
      throw new Error('Invalid data format');
    }
    return data;
  }
}

class FilterStep extends ProcessingStep {
  doProcessing(data) {
    return data.filter(x => x !== null && x !== undefined);
  }
}

class TransformationStep extends ProcessingStep {
  doProcessing(data) {
    return data.map(x => x * 2);
  }
}

// 使用示例
const pipeline = new ValidationStep();
pipeline
  .setNext(new FilterStep())
  .setNext(new TransformationStep());

const result = pipeline.process([1, null, 2, undefined, 3]);
console.log(result); // [2, 4, 6]

这种模式在中间件架构中很常见，如Express.js的中间件系统就是责任链模式的实现。

命令模式封装数据处理操作

将数据处理操作封装为命令对象，可以实现撤销、重做和操作队列等功能。

class DataCommand {
  constructor(receiver) {
    this.receiver = receiver;
    this.history = [];
  }

  execute(data) {
    throw new Error('Subclasses must implement execute');
  }

  undo() {
    if (this.history.length > 0) {
      return this.history.pop();
    }
    return null;
  }
}

class FilterCommand extends DataCommand {
  execute(data, predicate) {
    const original = [...data];
    const filtered = data.filter(predicate);
    this.history.push(original);
    this.receiver.data = filtered;
    return filtered;
  }
}

class SortCommand extends DataCommand {
  execute(data, compareFn) {
    const original = [...data];
    const sorted = [...data].sort(compareFn);
    this.history.push(original);
    this.receiver.data = sorted;
    return sorted;
  }
}

// 使用示例
class DataStore {
  constructor() {
    this.data = [];
  }
}

const store = new DataStore();
store.data = [3, 1, 4, 1, 5, 9, 2, 6];

const filterCmd = new FilterCommand(store);
const sortedCmd = new SortCommand(store);

// 执行过滤
const filtered = filterCmd.execute(store.data, x => x > 3);
console.log(filtered); // [4, 5, 9, 6]

// 执行排序
const sorted = sortedCmd.execute(store.data, (a, b) => a - b);
console.log(sorted); // [4, 5, 6, 9]

// 撤销排序
const undone = sortedCmd.undo();
console.log(undone); // [4, 5, 9, 6]
console.log(store.data); // [4, 5, 9, 6]

// 撤销过滤
const original = filterCmd.undo();
console.log(original); // [3, 1, 4, 1, 5, 9, 2, 6]
console.log(store.data); // [3, 1, 4, 1, 5, 9, 2, 6]

这种模式在需要支持撤销/重做功能的编辑器类应用中特别有价值。

享元模式优化重复数据处理

当数据中存在大量重复内容时，享元模式可以通过共享减少内存使用。

class DataFlyweightFactory {
  constructor() {
    this.flyweights = {};
  }

  getFlyweight(key) {
    if (!this.flyweights[key]) {
      this.flyweights[key] = new DataFlyweight(key);
    }
    return this.flyweights[key];
  }

  getCount() {
    return Object.keys(this.flyweights).length;
  }
}

class DataFlyweight {
  constructor(intrinsicState) {
    this.intrinsicState = intrinsicState;
  }

  process(extrinsicState) {
    console.log(`Processing with intrinsic: ${this.intrinsicState}, extrinsic: ${extrinsicState}`);
    return `${this.intrinsicState}_${extrinsicState}`;
  }
}

// 使用示例
const factory = new DataFlyweightFactory();

const data = ['type1', 'type2', 'type1', 'type1', 'type2', 'type3'];
const processed = data.map((type, idx) => {
  const flyweight = factory.getFlyweight(type);
  return flyweight.process(idx);
});

console.log(processed);
console.log(`Total flyweights: ${factory.getCount()}`); // 3而不是6

这种模式在文本编辑器、游戏等存在大量重复对象的场景中可以显著降低内存占用。

状态模式处理数据转换流程

当数据处理需要依赖复杂状态转换时，状态模式可以简化条件逻辑。

class DataProcessor {
  constructor() {
    this.setState(new InitialState());
  }

  setState(state) {
    this.currentState = state;
    this.currentState.processor = this;
  }

  process(data) {
    return this.currentState.handle(data);
  }
}

class ProcessingState {
  constructor() {
    this.processor = null;
  }

  handle(data) {
    throw new Error('Subclasses must implement handle');
  }
}

class InitialState extends ProcessingState {
  handle(data) {
    console.log('Initial processing');
    // 简单验证
    if (!Array.isArray(data)) {
      throw new Error('Invalid data');
    }
    
    // 转换到过滤状态
    this.processor.setState(new FilterState());
    return this.processor.process(data);
  }
}

class FilterState extends ProcessingState {
  handle(data) {
    console.log('Filtering data');
    const filtered = data.filter(x => x !== null);
    
    // 转换到转换状态
    this.processor.setState(new TransformState());
    return this.processor.process(filtered);
  }
}

class TransformState extends ProcessingState {
  handle(data) {
    console.log('Transforming data');
    const transformed = data.map(x => x * 2);
    
    // 转换到完成状态
    this.processor.setState(new FinalState());
    return this.processor.process(transformed);
  }
}

class FinalState extends ProcessingState {
  handle(data) {
    console.log('Final result');
    return data;
  }
}

// 使用示例
const processor = new DataProcessor();
const result = processor.process([1, null, 2, 3]);
console.log(result); // [2, 4, 6]

这种模式在复杂的数据转换流程中特别有用，如工作流系统或编译器。

模板方法模式定义数据处理骨架

模板方法模式