Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

☀️☀️单例模式

发布于：Mar 20, 2022

次浏览

介绍

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

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

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

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

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

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

应用实例：

  • 1、一个班级只有一个班主任。

  • 2、Windows 是多进程多线程的，在操作一个文件的时候，就不可避免地出现多个进程或线程同时操作一个文件的现象，所以所有文件的处理必须通过唯一的实例来进行。

  • 3、一些设备管理器常常设计为单例模式，比如一个电脑有两台打印机，在输出的时候就要处理不能两台打印机打印同一个文件。
    优点：

  • 1、在内存里只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如管理学院首页页面缓存）。

  • 2、避免对资源的多重占用（比如写文件操作）。
    缺点：没有接口，不能继承，与单一职责原则冲突，一个类应该只关心内部逻辑，而不关心外面怎么样来实例化。

使用场景：

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

前端单例模式实例

Vuex

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

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

Vuex单例模式实现方式

1
2
3
4
5
6
7
8
9
10
11
12
13
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，比如点击一个按钮，弹出一个登录框，我们不可能需要两个登录框。

  • 创建弹框，显示弹框：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <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操作。

  • 惰性单例模式：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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设计模式与开发实践》

更新于：May 27, 2024

编程范式

评论