JavaScript 三大设计模式是指单例模式、观察者模式和策略模式。

单例模式：单例模式是一种只允许实例化一次的对象创建模式。在 JavaScript 中，可以使用闭包来实现单例模式。以下是一个例子：

var Singleton = (function() {
  var instance;

  function createInstance() {
    var object = new Object("I am the instance");
    return object;
  }

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

var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // 输出 true

在上面的例子中，Singleton 是一个闭包，其中的 createInstance 函数用于创建实例。通过 getInstance 方法获取实例时，会先检查 instance 是否已经存在，如果不存在，则调用 createInstance 方法创建实例，并返回该实例。这样就保证了只能创建一个实例。

观察者模式：观察者模式是一种对象间的一对多依赖关系，当一个对象的状态发生改变时，其依赖的所有对象都会收到通知。在 JavaScript 中，可以使用自定义事件来实现观察者模式。以下是一个例子：

function Subject() {
  this.observers = [];

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

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

  this.notifyObservers = function() {
    this.observers.forEach(function(observer) {
      observer.update();
    });
  };
}

function Observer(name) {
  this.name = name;

  this.update = function() {
    console.log(this.name + " received the notification");
  };
}

var subject = new Subject();
var observer1 = new Observer("Observer 1");
var observer2 = new Observer("Observer 2");

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers();

在上面的例子中，Subject 是被观察的对象，Observer 是观察者对象。Subject 中的 addObserver 方法用于添加观察者，removeObserver 方法用于移除观察者，notifyObservers 方法用于通知所有观察者。当调用 subject.notifyObservers() 方法时，观察者 observer1 和 observer2 都会收到通知，并执行自己的 update 方法。

策略模式：策略模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，而不影响客户端的使用。在 JavaScript 中，可以使用函数来实现策略模式。以下是一个例子：

function StrategyA() {
  this.execute = function() {
    console.log("Strategy A");
  };
}

function StrategyB() {
  this.execute = function() {
    console.log("Strategy B");
  };
}

function Context(strategy) {
  this.strategy = strategy;

  this.executeStrategy = function() {
    this.strategy.execute();
  };
}

var strategyA = new StrategyA();
var strategyB = new StrategyB();

var context = new Context(strategyA);
context.executeStrategy(); // 输出 "Strategy A"

context = new Context(strategyB);
context.executeStrategy(); // 输出 "Strategy B"

在上面的例子中，StrategyA 和 StrategyB 是不同的策略，它们都实现了相同的 execute 方法。Context 是使用策略的对象，它通过构造函数接收一个具体的策略对象，并在 executeStrategy 方法中调用策略对象的 execute 方法。这样，可以根据需要在运行时切换不同的策略。

以上是 JavaScript 中的三大设计模式的例子，它们分别是单例模式、观察者模式和策略模式。这些设计模式可以帮助开发者编写可维护、可扩展的代码，并提高代码的复用性和可读性。

前端框架

在前端框架中，常用的设计模式包括：

MVC（Model-View-Controller）模式：将应用程序分为模型（数据层）、视图（展示层）和控制器（逻辑层），实现数据与界面的分离和交互。
MVVM（Model-View-ViewModel）模式：类似于MVC，但将控制器改为视图模型，通过数据绑定实现视图与数据的双向绑定。
单例模式：确保一个类只有一个实例，并提供一个全局访问点。
观察者模式：定义对象之间的一对多依赖关系，当一个对象发生改变时，其所有依赖对象都会收到通知并自动更新。
原型模式：通过克隆已有对象来创建新对象，避免了创建过多的相似对象。
适配器模式：将一个类的接口转换成客户端所期望的另一个接口，以解决接口不兼容的问题。
策略模式：定义一系列算法，并将其封装起来，使其可以互相替换，以实现动态选择算法。
装饰者模式：动态地给对象添加额外的职责，同时又不改变其结构。
组合模式：将对象组合成树形结构，以表示“整体-部分”的层次结构，使得客户端可以统一对待单个对象和组合对象。
享元模式：通过共享对象来减少内存使用和提高性能，特别适用于大量相似对象的场景。

这些设计模式可以帮助开发者更好地组织和管理前端代码，提高代码的可维护性、可扩展性和重用性。

JavaScript 和前端框架中的设计模式 ｜ 青训营

JavaScript 三大设计模式是指单例模式、观察者模式和策略模式。

前端框架

JavaScript 和前端框架中的设计模式｜青训营