关于前端:4-设计模式之单例模式

29次阅读

共计 1142 个字符，预计需要花费 3 分钟才能阅读完成。

单例模式（Singleton），保障一个类只有一个实例，并提供一个拜访它的全局拜访点。

一说到只有一个实例，并能全局拜访，我觉着前端同学能想到的类库就太多太多了，在前几年咱们还没有像当初这样履行模块化开发的时候，咱们用到的 JQuery、moment、lodash 等等类库，全副都能满足下面的特点。

但其实咱们在平时的利用当中，大多数状况下只能感触到单个实例的益处，也没太多感触到单个实例的害处。然而咱们能够举一个很艰深的例子，咱们平时都会通过玩游戏来消遣工夫，在 Dota 中有这么一个道具叫「刷新球」，它的作用是重置所有物品和技能的冷却工夫，那如果我玩一个英雄，他的某个技能很厉害，那我是不是出 6 个「刷新球」，爆炸了 … 但其实很毁坏游戏体验，所以 Dota 中有一个机制就是不论出多少个刷新球，他们共享一个冷却 CD，那怎么实现这样的成果呢？

单例模式就能够闪亮退场了：

// 刷新球类
class Refresher {constructor() {
        this.cooldown = 180;
        this.lastCD = 0;
        this.timer = null;
          this.instance=null;
    }
  
      // static 静态方法调用间接在类上进行，不能在类的实例上调用。静态方法通常用于创立实用程序函数。static getInstance() {if(!this.instance) {this.instance = new Refresher();
        }
          return this.instance;
    }

    use() {if (this.lastCD) {console.log('技能还没冷却好！');
            return;
        }

        this.lastCD = this.cooldown;
        this.timer = setInterval(() => {
            this.lastCD--;
            if (!this.lastCD) {clearInterval(this.timer);
            }
        }, 1000);
    }

    getCD() {return this.lastCD;}
}

var refresher = Refresher.getInstance();
var refresher2 = Refresher.getInstance();

refresher.use();

refresher.getCD(); // 174
refresher2.getCD(); // 174

refresher.use(); // 技能还没冷却好！refresher2.use(); // 技能还没冷却好！

由上可见「单例模式」的作用。在日常工作中，单例模式的应用多被状态管理工具代替了。如果没有状态管理工具，咱们也能够借助「单例模式」来实现 购物车性能。