设计模式

[runzhq]

1、单例模式

要点：只有一个实例，并且可以全局访问。 解决的问题：一个全局使用的类频繁地创建与销毁。 如何解决：判断是否已经有类的实例，如果有则返回，如果没有则创建。 优点： 1、在内存里只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如管理首页页面缓存）。 2、避免对资源的多重占用（比如写文件操作）。 缺点：不能继承，与单一职责原则冲突，一个类应该只关心内部逻辑，而不关心外面怎么样来实例化。 使用场景： 1.全局缓存。2.弹窗

const singleton = function(name) {
    this.name = name
    this.instance = null
}

singleton.prototype.getName = function() {
    console.log(this.name)
}

singleton.getInstance = function(name) {
    if (!this.instance) { // 关键语句
        this.instance = new singleton(name)
    }
    return this.instance
}

// test
const a = singleton.getInstance('a') // 通过 getInstance 来获取实例
const b = singleton.getInstance('b')
a.getName();//a
b.getName();//a
console.log(a === b)//true

JS 中的全局对象符合单例模式两个条件（一个实例+全局访问）。很多时候我们把全局对象当成单例模式来使用。 一个典型的应用就是：弹窗的设计

const createLoginLayer = function() {
    const myDiv = document.createElement('div')
    myDiv.innerHTML = '登入浮框'
    // myDiv.style.display = 'none'
    document.body.appendChild(myDiv);
    return myDiv
}

//使单例模式和创建弹框代码解耦
const getSingle = function(fn) {
  let result = null;
  return function() {
      if(!result){
          result = fn.apply(this, arguments);
      }
    return result;
  }
}

const createSingleLoginLayer = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {
    createSingleLoginLayer()
}