常用设计模式总结 + 实例

工厂模式   

工厂函数通常是指一个函数，它用来创建和返回其他函数或对象的实例。

人话： 当new Class 或 Function 时，根据传入的参数，而返回不同的值，这就是工厂模式。 （所以可以说，这是我们开发中，无意中用了最多的模式）

// 工厂模式示例：创建不同类型的图表组件

// 创建柱状图组件
class BarChart {
  // ...
}

// 创建折线图组件
class LineChart {
  // ...
}

// 图表工厂类
class ChartFactory {
  createChart(type) {
    switch (type) {
      case 'bar':
        return new BarChart();
      case 'line':
        return new LineChart();
      // 可以添加更多的图表类型...
      default:
        throw new Error('Unsupported chart type');
    }
  }
}

const chartFactory = new ChartFactory();
const barChart = chartFactory.createChart('bar');
const lineChart = chartFactory.createChart('line');

单例模式

// 单例模式示例：全局应用配置
class AppConfig {
  constructor() {
    this.config = {
      apiEndpoint: 'https://api.example.com',
      apiKey: 'your-api-key',
      // 其他配置项...
    };
  }

  getConfig() {
    return this.config;
  }
}

const appConfig = new AppConfig();
export default appConfig;

--------------------------------------
import appConfig from './appConfig.js';

function fetchData() {
  const config = appConfig.getConfig();
  const apiEndpoint = config.apiEndpoint;
  const apiKey = config.apiKey;
  // 使用配置进行数据获取...
}

发布订阅者模式

总结：一个发布订阅者模式，通常有三个对象， 一个是事件管理对象，一个是订阅者对象，一个是发布者对象。

订阅者会调用事件管理对象的订阅方法，传递一个回调函数。

发布者会调用事件管理对象的发布方法，触发这个回调函数，并给回调函数传递实参value。

// 创建一个事件管理器对象
class EventEmitter {
  constructor() {
    this.events = {};
  }

  // 订阅事件
  subscribe(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  // 发布事件
  emit(event, data) {
    const listeners = this.events[event];
    if (listeners) {
      listeners.forEach(listener => {
        listener(data);
      });
    }
  }

  // 取消订阅事件
  unsubscribe(event, listener) {
    const listeners = this.events[event];
    if (listeners) {
      this.events[event] = listeners.filter(l => l !== listener);
    }
  }
}

// 创建一个事件管理器实例
const eventManager = new EventEmitter();

----------------------------------------------
// 订阅事件          这一块通常会单独在一个对象里调用 
function handleEvent1(data) {
  console.log(`Event 1 handled with data: ${data}`);
}

function handleEvent2(data) {
  console.log(`Event 2 handled with data: ${data}`);
}

eventManager.subscribe('event1', handleEvent1);
eventManager.subscribe('event2', handleEvent2);
---------------------------------------------------

--------------------------------------------------
// 发布事件           这一块通常会单独在一个对象里调用 
eventManager.emit('event1', 'Some data for event 1');
eventManager.emit('event2', 'Data for event 2');

// 取消订阅事件
eventManager.unsubscribe('event1', handleEvent1);

// 再次发布事件，但事件1不会再触发
eventManager.emit('event1', 'Another data for event 1');
-------------------------------------------------------