设计模式.md

责任链模式

避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象连接成一条链，并且沿着这条链传递请求，直到有对象处理它为止。

伪代码：

const Chain = function (fn) {
  this.fn = fn;
  this.next = null

  this.setNext = function (next) {
    this.next = next
    return this
  };

  this.run = function (...arg) {
    // 执行某些业务的判断条件，不满足某些条件时交由下一个处理
    const res = this.fn()
    // 例如
    if(res === 'runNext') {
      return this.next && this.next.run(...arg)
    }
  };
};

const applyDevice = function () {};
const chainApplyDevice = new Chain(applyDevice);

const selectAddress = function () {};
const chainSelectAddress = new Chain(selectAddress);

const selectChecker = function () {};
const chainSelectChecker = new Chain(selectChecker);

// 运用责任链模式实现上边功能
chainApplyDevice.setNext(chainSelectAddress).setNext(chainSelectChecker);
chainApplyDevice.run();

当你负责的模块，基本满足以下情况时

• 负责的是一个完整流程，或只负责流程中的某个环节
• 各环节可复用
• 各环节有一定的执行顺序
• 各环节可重组

装饰器模式

React 中的高阶组件 HOC

代理模式

代理模式是为其它对象提供一种代理以控制这个对象的访问，具体执行的功能还是这个对象本身，就比如说，我们发邮件，通过代理模式，那么代理者可以控制，决定发还是不发，但具体发的执行功能，是外部对象所决定，而不是代理者决定。

// 本体
var domImage = (function () {
  var imgEle = document.createElement("img");
  document.body.appendChild(imgEle);
  return {
    setSrc: function (src) {
      imgEle.src = src;
    },
  };
})();

// 代理
var proxyImage = (function () {
  var img = new Image();
  img.onload = function () {
    domImage.setSrc(this.src); // 图片加载完设置真实图片src
  };
  return {
    setSrc: function (src) {
      domImage.setSrc("./loading.gif"); // 预先设置图片src为loading图
      img.src = src;
    },
  };
})();

// 外部调用
proxyImage.setSrc("./product.png");