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

介绍

单例模式(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设计模式与开发实践》

评论