ES3、ES5、ES6 中的四种常见设计模式实现

简单工厂模式

简单工厂模式提供了一个创建对象的接口，让子类决定实例化哪一个类。

ES3 实现：

// 定义一个工厂函数
function CarFactory() {}

// 定义一个创建汽车的工厂方法
CarFactory.prototype.createCar = function(type) {
  if (type === 'sedan') {
    return new Sedan();
  } else if (type === 'suv') {
    return new SUV();
  } else if (type === 'truck') {
    return new Truck();
  }
};

// 定义一个轿车类
function Sedan() {}

// 定义一个 SUV 类
function SUV() {}

// 定义一个卡车类
function Truck() {}

// 创建一个工厂实例
const carFactory = new CarFactory();

// 使用工厂创建不同类型的汽车
const sedan = carFactory.createCar('sedan');
const suv = carFactory.createCar('suv');
const truck = carFactory.createCar('truck');

ES5 实现：

// 定义一个工厂函数
const CarFactory = function() {};

// 定义一个创建汽车的工厂方法
CarFactory.prototype.createCar = function(type) {
  if (type === 'sedan') {
    return new Sedan();
  } else if (type === 'suv') {
    return new SUV();
  } else if (type === 'truck') {
    return new Truck();
  }
};

// 定义一个轿车类
const Sedan = function() {};

// 定义一个 SUV 类
const SUV = function() {};

// 定义一个卡车类
const Truck = function() {};

// 创建一个工厂实例
const carFactory = new CarFactory();

// 使用工厂创建不同类型的汽车
const sedan = carFactory.createCar('sedan');
const suv = carFactory.createCar('suv');
const truck = carFactory.createCar('truck');

ES6 实现：

// 定义一个工厂类
class CarFactory {
  createCar(type) {
    if (type === 'sedan') {
      return new Sedan();
    } else if (type === 'suv') {
      return new SUV();
    } else if (type === 'truck') {
      return new Truck();
    }
  }
}

// 定义一个轿车类
class Sedan {}

// 定义一个 SUV 类
class SUV {}

// 定义一个卡车类
class Truck {}

// 创建一个工厂实例
const carFactory = new CarFactory();

// 使用工厂创建不同类型的汽车
const sedan = carFactory.createCar('sedan');
const suv = carFactory.createCar('suv');
const truck = carFactory.createCar('truck');

单例模式

单例模式确保一个类只有一个实例，并提供一个全局访问点。

ES3 实现：

// 定义一个单例类
function Singleton() {
  // 私有变量，存储单例实例
  var instance = null;

  // 私有方法，获取单例实例
  function getInstance() {
    if (!instance) {
      instance = new Singleton();
    }
    return instance;
  }

  // 返回单例实例
  return getInstance();
}

// 使用单例模式
const singleton = Singleton();

ES5 实现：

// 定义一个单例类
var Singleton = (function() {
  // 私有变量，存储单例实例
  var instance = null;

  // 私有方法，获取单例实例
  function getInstance() {
    if (!instance) {
      instance = new Singleton();
    }
    return instance;
  }

  // 返回单例实例
  return getInstance();
})();

// 使用单例模式
const singleton = Singleton();

ES6 实现：

// 定义一个单例类
class Singleton {
  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

// 使用单例模式
const singleton = Singleton.getInstance();

观察者模式

观察者模式定义了一种一对多的依赖关系，以便当一个对象的状态发生变化时，所有依赖它的对象都会得到通知并自动更新。

ES3 实现：

// 定义一个主题类
function Subject() {
  // 存储观察者列表
  this.observers = [];

  // 添加观察者
  this.addObserver = function(observer) {
    this.observers.push(observer);
  };

  // 移除观察者
  this.removeObserver = function(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  };

  // 通知观察者
  this.notifyObservers = function() {
    for (const observer of this.observers) {
      observer.update(this);
    }
  };
}

// 定义一个观察者类
function Observer() {
  // 更新方法，在主题状态发生变化时调用
  this.update = function(subject) {
    console.log(`Observer ${this.id} notified of change in subject ${subject.id}`);
  };
}

// 创建一个主题实例
const subject = new Subject();

// 创建两个观察者实例
const observer1 = new Observer();
const observer2 = new Observer();

// 将观察者添加到主题
subject.addObserver(observer1);
subject.addObserver(observer2);

// 主题状态发生变化，通知观察者
subject.notifyObservers();

ES5 实现：

// 定义一个主题类
var Subject = function() {
  // 存储观察者列表
  this.observers = [];

  // 添加观察者
  this.addObserver = function(observer) {
    this.observers.push(observer);
  };

  // 移除观察者
  this.removeObserver = function(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  };

  // 通知观察者
  this.notifyObservers = function() {
    for (var i = 0; i < this.observers.length; i++) {
      this.observers[i].update(this);
    }
  };
};

// 定义一个观察者类
var Observer = function() {
  // 更新方法，在主题状态发生变化时调用
  this.update = function(subject) {
    console.log(`Observer ${this.id} notified of change in subject ${subject.id}`);
  };
};

// 创建一个主题实例
var subject = new Subject();

// 创建两个观察者实例
var observer1 = new Observer();
var observer2 = new Observer();

// 将观察者添加到主题
subject.addObserver(observer1);
subject.addObserver(observer2);

// 主题状态发生变化，通知观察者
subject.notifyObservers();

ES6 实现：

// 定义一个主题类
class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers() {
    for (const observer of this.observers) {
      observer.update(this);
    }
  }
}

// 定义一个观察者类
class Observer {
  constructor(id) {
    this.id = id;
  }

  update(subject) {
    console.log(`Observer ${this.id} notified of change in subject ${subject.id}`);
  }
}

// 创建一个主题实例
const subject = new Subject();

// 创建两个观察者实例
const observer1 = new Observer(1);
const observer2 = new Observer(2);

// 将观察者添加到主题
subject.addObserver(observer1);
subject.addObserver(observer2);

// 主题状态发生变化，通知观察者
subject.notifyObservers();

发布订阅模式