2022-03-20-☀️☀️单例模式

2022-03-20  本文已影响0人  沐深

介绍

单例模式(Singleton Pattern)是最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。

这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象。
意图:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

主要解决:一个全局使用的类频繁地创建与销毁。

何时使用:当您想控制实例数目,节省系统资源的时候。

如何解决:判断系统是否已经有这个单例,如果有则返回,如果没有则创建。

关键代码:构造函数是私有的。

应用实例:

使用场景:

1、要求生产唯一序列号。
2、WEB 中的计数器,不用每次刷新都在数据库里加一次,用单例先缓存起来。
3、创建的一个对象需要消耗的资源过多,比如 I/O 与数据库的连接等。
注意事项:getInstance() 方法中需要使用同步锁 synchronized (Singleton.class) 防止多线程同时进入造成 instance 被多次实例化

前端单例模式实例

Vuex

Vuex基本原理,在vue上挂一个store属性,所以这个store属性一定要单一,而且不能被覆盖掉。



Vuex 是vue 状态管理工具,如果在一个项目里有多个store,一定乱套了,所以Vuex一定是单例模式的。

Vuex单例模式实现方式

let Vue // bind on install
export function install (_Vue) {
  if (Vue && _Vue === Vue) {
    if (__DEV__) {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

install的时候,把真Vue 赋值给 假Vue, 再次install的时候,就会提醒'[vuex] already installed. Vue.use(Vuex) should be called only once.'

弹出框

前端点击弹出一个dialog是非常普遍的需求。

我们在弹出一个dialog时,要保证window中没有相同dialog,比如点击一个按钮,弹出一个登录框,我们不可能需要两个登录框。


        <html>
            <body>
              <button id="loginBtn">登录</button>
            </body>

        <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>
        </html>

刚开始我们不需要单例模式,只需要设置关闭按钮,这样打开关闭,但是会有频繁的dom操作。

        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';
        };

div创建后为什么没有被销毁?

这是因为当执行var loginLayer = createLoginLayer();时,loginLayer返回了一个匿名函数的引用,它可以访问到createLoginLayer()被调用时产生的环境,而局部变量div一直处在这个环境里。既然局部变量所在的环境还能被外界访问,这个局部变量就有了不被销毁的理由。在这里产生了一个闭包结构,局部变量的生命看起来被延续了

《JavaScript设计模式与开发实践》

上一篇下一篇

猜你喜欢

热点阅读