美文网首页
设计模式

设计模式

作者: my木子 | 来源:发表于2021-06-23 09:58 被阅读0次

    设计模式

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

    单例模式

    • 保证一个类仅有一个实例,并提供一个访问它的全局访问点
    • 实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
    • 适用场景:创建一个弹窗,无论后面再创建多少次都是第一次创建的那个弹窗。
    // 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事件,那么可以通过中介者来转发处理这些事件,实现各个事件间的解耦,仅仅维护中介者对象即可。

    装饰者模式

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

    相关文章

      网友评论

          本文标题:设计模式

          本文链接:https://www.haomeiwen.com/subject/nfiodltx.html