前端中常见的设计模式

单例

单例模式通常是使用闭包来实现，通过闭包中保存一个变量的引用，new 的时候判断它是否已经有了，如果有直接返回否则再创建； 代码:

var createDom = (function () {
  var dom = null;

  if (dom) {
    return dom;
  }
  return function () {
    dom = document.createElement("div");
    document.body.appendChild(dom);
    return dom;
  };
})();
class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    return Singleton.instance;
  }

  static instance = null;
}

策略模式

策略模式的定义是:定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
例子: 计算奖金、缓动动画、表单校验
优点: 完美遵循开放—封闭原则(对扩展开放,对修改关闭)
代码:

var S = function( salary ){ return salary * 4;};
var A = function( salary ){ return salary * 3;};
var B = function( salary ){ 4 return salary * 2;};
var calculateBonus = function( func, salary ){ return func( salary )};

calculateBonus( S, 10000 ); // 输出:40000

发布-订阅(观察者模式)

https://juejin.cn/post/7055441354054172709#comment
如果非要说区别，那么就是发布-订阅比观察者多一个EventChannel作为中介管理发布、订阅方法；而观察者是观察者和对象自己管理

在 JavaScript 开发中，我们一般用事件模型 来替代传统的发布—订阅模式。
addEventListener 就是发布-订阅,发布-订阅其实就是注册回调函数。
原理:发布者添加一个缓存列表，用于存放回调函数以便通知订阅者,最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。
订阅: 一般命名是on/listen/tap 等 发布: 一般命名是emit/trigger/call/apply 等 优点: 时间上和对象之间的解耦
缺点: 创建订阅者消耗一定的时间和内存(订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。)

装饰者模式

给对象加功能之前通常用继承来做，但继承并不灵活而且超类和子类之间存在强耦合性。 装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责(AOP)。
用AOP装饰函数: 之前往往基于原型去追加方法，return的方法中再进行apply调用原方法，现在用装饰器符很方便。 React高阶函数其实也是装饰者模式。

装饰者模式优点：松耦合、面向切面编程。

参考资料

JavaScript设计模式与开发实践.pdf