设计模式

设计模式

• 在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案，也就是某个特定场景下对某种问题的解决方案。

单例模式

• 保证一个类仅有一个实例，并提供一个访问它的全局访问点。
• 实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。
• 适用场景：创建一个弹窗，无论后面再创建多少次都是第一次创建的那个弹窗。

// html 
  <button id="show">显示窗口</button>
  <button id="hide">隐藏窗口</button>

// css
    .box {
      background: #888;
      width: 400px;
      height: 200px;
      line-height: 200px;
      overflow: hidden;
      margin-top: 20px;
      color: #fff;
      text-align: center;
    }

// js
    const show = document.querySelector('#show');
    const hide = document.querySelector('#hide');
    const createWindow = (() => {
      let div;
      return (text) => {
        if (!div) {
          console.log('重新创建');
          div = document.createElement('div');
          div.innerHTML = text || '新建窗口';
          div.className = 'box';
          div.style.display = 'none';
          document.body.appendChild(div);
        }

        return div;
      }
    })();

    show.addEventListener('click', () => {
      let box = createWindow(`新建窗口的时间戳：${Date.now()}`);
      box.style.display = 'block';
    }, false);

    //隐藏
    hide.addEventListener('click', () => {
      document.querySelector('.box').style.display = 'none';
    }, false);

策略模式

• 定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。策略模式的目的就是将算法的使用和实现分离开来。
• 组成
  第一个部分是一组策略类（可变），策略类封装了具体的算法，并负责具体的计算过程。
  第二个部分是环境类Context（不变），Context 接受客户的请求，随后将请求委托给某一个策略类。

    /*策略类*/
    var levelInfo = {
      "A": function (money) {
        return money * 1.2;
      },
      "B": function (money) {
        return money * 1;
      },
      "C": function (money) {
        return money * 0.8;
      }
    };
    /*环境类*/
    var wages = function (level, money) {
      return levelInfo[level](money);
    };
    console.log(wages('A', 20000)); // 24000

代理模式

• 为一个对象提供一个代用品或占位符，以便控制对它的访问。
• 某一个花销很大的操作，可以通过虚拟代理的方式延迟到这种需要它的时候才去创建（例：使用虚拟代理实现图片懒加载）

    let imgFunc = (function () {
      let imgNode = document.createElement('img');
      document.body.appendChild(imgNode);
      return {
        setSrc: function (src) {
          imgNode.src = src;
        }
      }
    })();
    let proxyImage = (function () {
      let img = new Image();
      img.onload = function () {
        imgFunc.setSrc(this.src);  // 图片加载完成后替换 loading 图占位
      }
      return {
        setSrc: function (src) {
          imgFunc.setSrc('./loading.gif');  // loading 图占位
          img.src = src;
        }
      }
    })();
    proxyImage.setSrc('./splash.png');

中介者模式

• 创建一个中介者对象，其他所有的相关对象都通过该中介者对象来通信，而不是相互引用，当其中的一个对象发生改变时，只需要通知中介者对象即可。通过中介者模式可以解除对象与对象之间的紧耦合关系。
• 适用场景：例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。

装饰者模式

• 在不改变对象自身的基础上，在程序运行期间给对象动态地添加方法。
• 适用场景：原有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。