js 设计模式 - 单例模式

最新推荐文章于 2024-03-22 09:10:57 发布

俺是编程侠

最新推荐文章于 2024-03-22 09:10:57 发布

阅读量111

点赞数

分类专栏： js设计模式文章标签： javascript

本文链接：https://blog.csdn.net/qq_22091941/article/details/109300414

版权

js设计模式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javascript 设计模式- 单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点

适用场景：例如：线程池、全局缓存、浏览器中的window对象，登陆弹框等等

例子：登陆弹框

代码1：

<body>
  <button id="loginBtn">登陆</button>
  <script>
    var loginLayer = (function() {
      var div = document.createElement('div')
      div.innerHTML = "我是登陆弹框"
      div.style.display = "none"
      document.body.appendChild(div)
      return div
    })()
    document.getElementById("loginBtn").onclick = function() {
      loginLayer.style.display = 'block'
    }
  </script>
</body>

分析：登陆弹框loginLayer预先已经创建好，如果我没有点击登陆按钮，而去做其他操作，那么就白白浪费了这个节点

改进思路：点击登陆按钮时候再进行创建

代码2:

<body>
  <button id="loginBtn">登陆</button>
  <script>
    var createLoginLayer = function() {
      var div = document.createElement('div')
      div.innerHTML = "我是登陆弹框"
      div.style.display = "none"
      document.body.appendChild(div)
      return div
    }
    document.getElementById("loginBtn").onclick = function() {
      var loginLayer = createLoginLayer()
      loginLayer.style.display = 'block'
    }
  </script>
</body>

分析：每点击一个登陆，就生成一个登陆loginLayer，又白白浪费

改进思路：判断是否已经存在loginLayer，如果存在loginLayer，返回loginLayer，不存在则创建loginLayer

代码3:

<body>
  <button id="loginBtn">登陆</button>
  <script>
    var createLoginLayer = (function() {
      var div;
      return function(){
        if(!div) {
          div = document.createElement('div')
          div.innerHTML = "我是登陆弹框"
          div.style.display = "none"
          document.body.appendChild(div)
        }
        return div
      }
    })()
    document.getElementById("loginBtn").onclick = function() {
      var loginLayer = createLoginLayer()
      loginLayer.style.display = 'block'
    }
  </script>
</body>

分析：这已经是单例模式了，但是，如果我想再生成一个iframe，那我不是要重新写一遍createIframe函数

改进思路：把不变的部分分离处理，把变的部分作为参数传入

代码4:

<body>
  <button id="loginBtn">登陆</button>
  <button id="showIframe">显示iframe</button>
  <script>
    var getSingle = function(fn) {
      var result;
      return function(){
        return result || (result = fn.apply(this, arguments))
      }
    }


    var createLoginLayer = function () {
      var div = document.createElement('div')
      div.innerHTML = "我是登陆弹框"
      div.style.display = "none"
      document.body.appendChild(div)
      return div
    }
    var createIframe = function () {
      var iframe = document.createElement('iframe')
      document.body.appendChild(iframe)
      return iframe
    }
    var createSinleLoginLayer = getSingle(createLoginLayer)
    document.getElementById("loginBtn").onclick = function() {
      var loginLayer = createSinleLoginLayer()
      loginLayer.style.display = 'block'
    }



    var createIframe = function () {
      var iframe = document.createElement('iframe')
      document.body.appendChild(iframe)
      return iframe
    }
    var createSinleIframe = getSingle(createIframe)
    document.getElementById("showIframe").onclick = function() {
      var loginLayer = createSinleIframe()
    }
  </script>
</body>

分析：方法getSingle，创建一个单例，可以作为通用的惰性单例

俺是编程侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 设计模式 - 单例模式

javascript 设计模式- 单例模式定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点适用场景：例如：线程池、全局缓存、浏览器中的window对象，登陆弹框等等例子：登陆弹框代码1：<body> <button id="loginBtn">登陆</button> <script> var loginLayer = (function() { var div = document.createEle
复制链接

扫一扫

专栏目录