JavaScript 中的单例模式防止用户重复点击导致存储空间的资源浪费

1.在日常的开发场景中，我们经常会使用开发用户点击触发元素的出现。

稍微用代码举个例子如下：

    html:
    <button id="btn">点击登录</button>
    
    js:
    function createElement(){
      var div = document.createElement("div")
      div.innerHTML = "出现弹框测试框"
      div.style.display = "none"
      document.body.appendChild(div)
      return div
    }
    document.getElementById("btn").onclick = function(){
      var div = createElement()
      div.style.display = "block"
    }

如果每次点击都这样显示元素的化，用户点击了n次,就相当于在用户本地浏览器产生了n个，不仅对用户的空间资源造成一定的浪费。同样每次点击重新渲染DOM树产生DOM元素都会影响程序的整体性能和速度。

那么我们在思考，能不能在用户点击第一次渲染的情况下，能不能在用户的浏览器产生DOM元素的缓存，在用户下一次点击时，能复用缓存中的DOM元素。

代码如下：

var createLogin = function(){
      var div = document.createElement("div")
      div.innerHTML = "出现弹框测试框"
      div.style.display = "none"
      document.body.appendChild(div)
      return div
    }
    var getSingle = function(fn){
      //使用闭包，将变量暴漏出去，让Element一直保留内存空间中。
      var Element
      return function(){
        //相当于做if判断,判断Element是否有初始值。
        //有初始值的话沿用内存里的东西，没有的话执行createLogin函数。
        return Element || (Element = fn.apply(this,arguments))//本来 Element = fn 就可以，以防如果fn是携带参数的函数。apply函数能携带参数且不执行fn函数
      }
    }
    var getLogin = getSingle(createLogin)
    document.getElementById("btn").onclick = function(){
      var div = getLogin()//这句话就是调用上述的fn函数
      div.style.display = "block"
    }