前端面试常问：设计模式（1）

前端设计模式是一种解决常见前端问题的模板，通常用于提高代码的可读性、可维护性和可扩展性。本文将介绍一些常见的前端设计模式。

1.单例模式

单例模式是一种保证类只被实例化一次的模式。在前端开发中，单例模式通常用于管理全局状态或资源，如 Redux 中的 store。以下是一个使用 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

2.观察者模式

观察者模式是一种在对象之间定义一对多依赖关系的模式。当一个对象状态发生改变时，它的所有依赖对象都会收到通知并自动更新。在前端开发中，观察者模式通常用于实现数据绑定，如 Vue.js 中的双向数据绑定。以下是一个使用 JavaScript 实现的观察者模式示例：

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

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

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

Subject.prototype.notifyObservers = function() {
  for (var i = 0; i < this.observers.length; i++) {
    this.observers[i].update();
  }
};

function Observer() {
  this.update = function() {
    console.log("Observer updated");
  };
}

var subject = new Subject();
var observer1 = new Observer();
var observer2 = new Observer();

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

subject.notifyObservers(); // "Observer updated" x2

3.工厂模式

工厂模式是一种通过创建工厂来创建对象的模式。在前端开发中，工厂模式通常用于创建复杂对象，如组件。以下是一个使用 JavaScript 实现的工厂模式示例：

function Button(text) {
  this.text = text;
}

function Input(placeholder) {
  this.placeholder = placeholder;
}

function createUI(type, props) {
  switch (type) {
    case "button":
      return new Button(props.text);
    case "input":
      return new Input(props.placeholder);
  }
}

var button = createUI("button", { text: "Click me!" });
var input = createUI("input", { placeholder: "Enter your name" });

console.log(button instanceof Button); // true
console.log(input instanceof Input); // true