前端开发常用设计模式及示例

前端开发常用的设计模式有很多，列举一些常见的设计模式及其示例：

1. 模块模式(Module Pattern)

• 示例：使用IIFE(Immediately Invoked Function Expression)来创建一个模块，例如：

var myModule = (function() {
  var privateVariable = '私有变量';

  function privateMethod() {
    console.log('这是一个私有方法');
  }

  return {
    publicMethod: function() {
      console.log('这是一个公共方法');
    }
  };
})();

myModule.publicMethod(); // 这是一个公共方法

2. 观察者模式(Observer Pattern)

• 示例：实现一个事件监听器，例如：

function EventObserver() {
  this.observers = [];
}

EventObserver.prototype = {
  subscribe: function(fn) {
    this.observers.push(fn);
    console.log(`您已成功订阅 ${fn.name}`);
  },
  unsubscribe: function(fn) {
    this.observers = this.observers.filter(function(item) {
      if (item !== fn) {
        return item;
      }
    });
    console.log(`您已取消订阅 ${fn.name}`);
  },
  fire: function() {
    this.observers.forEach(function(item) {
      item.call();
    });
  }
};

const clickHandler = function() {
  console.log('单击事件触发了');
};

const mouseOverHandler = function() {
  console.log('鼠标移过事件触发了');
};

const eventObserver = new EventObserver();

eventObserver.subscribe(clickHandler);
eventObserver.subscribe(mouseOverHandler);

eventObserver.fire();

// 输出：
// 您已成功订阅 clickHandler
// 您已成功订阅 mouseOverHandler
// 单击事件触发了
// 鼠标移过事件触发了

3. 工厂模式(Factory Pattern)

• 示例：创建一个工厂来实例化对象，例如：

function Car(options) {
  this.color = options.color || '红色';
  this.year = options.year || '2019';
}

function CarFactory() {}

CarFactory.prototype.createCar = function(options) {
  return new Car(options);
};

const carFactory = new CarFactory();
const myCar = carFactory.createCar({ color: '蓝色', year: '2022' });

console.log(myCar.color); // 蓝色

4. 单例模式(Singleton Pattern)

• 示例：创建一个单例来保存应用程序的配置信息，例如：

const ConfigSingleton = (function() {
  var instance;

  function createInstance() {
    var config = {
      apiBaseUrl: 'https://example.com/api',
      timeout: 5000
    };
    return config;
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const config1 = ConfigSingleton.getInstance();
const config2 = ConfigSingleton.getInstance();

console.log(config1 === config2); // true

以上是一些常见的设计模式及其示例，还有其他常用的设计模式如适配器模式、装饰者模式等。