es6实现单例模式及其应用

时间 2019-11-08

原文原文链接

单例模式的定义是：保证一个类仅有一个一个实例，并提供一个访问它的全局访问点。html

单例模式能在合适的时候建立对象，而且建立惟一的一个。
代码接近于生活，颇有意思。好比一个网站的登陆，点击登陆后弹出一个登陆弹框，即便再次点击，也不会再出现一个相同的弹框。又或者一个音乐播放程序，若是用户打开了一个音乐，又想打开一个音乐，那么以前的播放界面就会自动关闭，切换到当前的播放界面。这些都是单例模式的应用场景。
要实现一个单例模式，一个经典的方式是建立一个类，类中又一个方法能建立该类的实例对象，还有一个标记，记录是否已经创了过了实例对象。若是对象已经存在，就返回第一次实例化对象的引用。es6

单例模式的实现

es5实现方式

var Singleton = function(name) {
    this.name = name;
    //一个标记，用来判断是否已将建立了该类的实例
    this.instance = null;
}
// 提供了一个静态方法，用户能够直接在类上调用
Singleton.getInstance = function(name) {
    // 没有实例化的时候建立一个该类的实例
    if(!this.instance) {
        this.instance = new Singleton(name);
    }
    // 已经实例化了，返回第一次实例化对象的引用
    return this.instance;
}

用户能够经过一个广为人知的接口，对该实例进行访问。
咱们尝试对该对象进行两次实例化，观察两次实例化结果是否指向同一个对象。app

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是惟一实例化的对象
console.log(a === b);

返回结果是：true。说明a、b之间是引用关系。函数

es6实现方式

建立Singleton类。class关键字和静态函数都是es6新增的。网站

class Singleton {
    constructor(name) {
        this.name = name;
        this.instance = null;
    }
    // 构造一个广为人知的接口，供用户对该类进行实例化
    static getInstance(name) {
        if(!this.instance) {
            this.instance = new Singleton(name);
        }
        return this.instance;
    }
}

单例模式应用实例

咱们用一个生活中常见的一个场景来讲明单例模式的应用。
任意一个网站，点击登陆按钮，只会弹出有且仅有一个登陆框，即便后面再点击登陆按钮，也不会再弹出多一个弹框。这就是单例模式的典型应用。接下来咱们实现它。为了注重单例模式的展现，咱们把登陆框简化吧😜

在页面上设置一个按钮ui

<button id="loginBtn">登陆</button>

为这个按钮添加点击事件this

const btn = document.getElementById('loginBtn');
btn.addEventListener('click', function() {
    loginLayer.getInstance();
}, false);

咱们先给一个初始化方法init，在点击按钮以后，在页面上添加一个框框（权当登陆框了）es5

init() {
    var div = document.createElement('div');
    div.classList.add('login-layer');
    div.innerHTML = "我是登陆浮窗";
    document.body.appendChild(div);
}

那么接下来要用单例模式实现，点击按钮出现有且仅有一个浮窗，方法就是在构造函数中建立一个标记，第一次点击时建立一个浮窗，用改变标记的状态，再次点击按钮时，根据标记的状态判断是否要再建立一个浮窗。
上源码：code

class loginLayer {
    constructor() {
        // 判断页面是否已有浮窗的标记
        this.instance = null;
        this.init();
    }
    init() {
        var div = document.createElement('div');
        div.classList.add('login-layer');
        div.innerHTML = "我是登陆浮窗";
        document.body.appendChild(div);
    }
    // 静态方法做为广为人知的接口
    static getInstance() {
        // 根据标记的状态判断是否要再添加浮窗，若是标记不为空就建立一个浮窗
        if(!this.instance) {
            this.instance = new loginLayer();
        }
        return this.instance;
    }
}

固然不要忘记为浮窗添加一个样式，让浮窗显示啦htm

.login-layer {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, .6);
    text-align: center;
    line-height: 200px;
    display: inline-block;
}

最后奉上该实例的源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单例实现登陆弹窗</title>
    <style>
        .login-layer {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, .6);
            text-align: center;
            line-height: 200px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <button id="loginBtn">登陆</button>
    <script>
        const btn = document.getElementById('loginBtn');
        btn.addEventListener('click', function() {
            loginLayer.getInstance();
        }, false);
        
        class loginLayer {
            constructor() {
                this.instance = null;
                this.init();
            }
            init() {
                var div = document.createElement('div');
                div.classList.add('login-layer');
                div.innerHTML = "我是登陆浮窗";
                document.body.appendChild(div);
            }
            static getInstance() {
                if(!this.instance) {
                    this.instance = new loginLayer();
                }
                return this.instance;
            }
        }
    </script>
</body>
</html>