SinglePattern/SinglePattern.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Single Pattern</title>
</head>
<body>
  <button id="btn">点我登录</button>
  <script>
    class Login {
      createLayout() {
        console.log('invoked')
        let theDiv = document.createElement('div');
        theDiv.innerHTML = '我是浮窗'
        document.body.appendChild(theDiv)
        theDiv.style.display = 'none'
        return theDiv
      }
    }
    class Single {
      getSingle(fn) {
        let result;
        return function () {
          return result || (result = fn.apply(this, arguments))
        }
      }
    }

    let theBtn = document.getElementById('btn')
    let single = new Single()
    let login = new Login()
    // 由于闭包， createLoginLayer 对 result 的引用， 所以当single.getSingle 函数执行完之后，内存中并不会销毁 result
    // 之后点击按钮是，根据 createLoginLayer 函数的作用域链中已经存在result，所以直接返回result
    let createLoginLayer = single.getSingle(login.createLayout)
    theBtn.onclick= function() {
      let layout = createLoginLayer()
      layout.style.display = 'block'
    }
  </script>
</body>
</html>