码迷,mamicode.com
首页 > 编程语言 > 详细

[JavaScript设计模式] 什么是单例模式

时间:2020-01-12 20:20:12      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:逻辑   child   log   single   修改   需要   介绍   null   获取   

概念

保证一个类仅有一个实例,并提供一个全局访问点

为什么要用单例模式

想象一下某些web应用,当点击登录按钮时,会弹出一个登录框,无论你点击多少次这个登录按钮,登录框都只会出现一个,不会出现多个登录框。同时不会频繁的进行删除和添加,而是同一个登录框进行隐藏和显示,因为删除和添加十分耗费性能,所以单例可以达到最大化的效能利用。登录框这个例子就是单例模式最典型的应用,符合业务的需求,又能够提高性能

单例模式的实现

简单的单例模式

一个简单的单例模式,无非就是用一个变量指示要创建的实例是否已经创建过了,如果已经创建过了,则在下一次使用实例时,直接返回复用,如果没有创建过,则创建并保存到变量中。
技术图片

const SingleTon = function(name){
    this.name = name;
}
SingleTon.prototype.getName = function (){
    return this.name;
}
SingleTon.instance = null;
SingleTon.getInstance = function(name){
    if(!this.instance){
        this.instance = new SingleTon(name);
    }
    return this.instance;
}
const aaa = SingleTon.getInstance("aaa");
const bbb = SingleTon.getInstance("bbb");
aaa.getName() === bbb.getName();    // true

但是这时候的这个单例类是“不透明”的,因为我们通常习惯使用new XXX()的方式来实例化一个类,而不是通过使用者不知道的XXX.getInstance()的方式来获取单例对象。
所以我们应该使用透明的单例类

透明的单例类

先介绍下IIFE

IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的 JavaScript 函数 --- MDN

eg.
技术图片

    const foo = (function(){
        return "I am foo"
    })()
    console.log(foo); // "I am foo"

之所以使用IIFE,就是限制JS的变量作用域,在ES5中,没有块级作用域,只有函数作用域一种,所以提供一种模拟块级作用域的方法就是IIFE。我们的透明单例模式就是使用IIFE来模拟。
技术图片

  const CreateDiv = (function(){
        let instance = null;
        const CreateDiv = function(html){
            if(instance){
                return instance;
            }
            this.html = html;
            instance = this;
            return instance;
        }

        CreateDiv.prototype.init = function(){
            const div = document.createElement("div");
            div.innerHTML = this.html;
            document.body.appendChild(div);
        }
        return CreateDiv;
    })();
    
    const aaa = new CreateDiv("aaa");
    const bbb = new CreateDiv("bbb");
    aaa.init(); 
    bbb.init();

使用IIFE来避免变量污染,把在IIFE中创建的类return出去,供外部通过new XXX()的形式调用。缺点是增加了程序的复杂度,不利于阅读。
在构造函数CreateDiv中:

 const CreateDiv = function(html){
            if(instance){
                return instance;
            }
            this.html = html;
            instance = this;
            return instance;
   }

实际上做了两件事,

  1. 保证类只有一个实例
  2. 构造实例
    这样就不符合单一职责原则,这个构造函数就变得不纯粹了。如果哪天我不想使用单例了,我要在页面创建普通的实例,创建多个不一样的div,还需要去修改CreateDiv构造函数,去掉控制单一实例的那一段,但页面中使用此单例的代码可能就用不了,故会带来不必要的麻烦。所以我们应该使用单例代理。

使用代理的单例类

上面的问题我们可以用单例代理来解决,通过引入一个代理类,代理普通CreateDiv类,使之变为单例类。
技术图片

const CreateDiv = function (html) {
    this.html = html;
}
CreateDiv.prototype.init = function () {
    const div = document.createElement("div");
    div.innerHTML = this.html;
    document.body.appendChild(div);
}
const ProxyCreateDiv = (function () {
    let instance = null;
    return function (html) {
        if (!instance) {
            instance = new CreateDiv(html);
        }
        return instance;
    }
})();
const aaa = new ProxyCreateDiv("aaa");
const bbb = new ProxyCreateDiv("bbb");
aaa.init(); // aaa
bbb.init(); // aaa

我们把负责单例类管理的逻辑放到了单独的ProxyCreateDiv类中,CreateDiv类还是一个普通的创建实例的类,这样保证了单一职责原则,组合起来就能达到单一职责原则。

以上就是单例类的创建模式,还有一类单例模式的应用,就是文章开头说的登录框,点击登录按钮,登录框会弹出,而无论点击多少次,登录框都只会弹出一个,这个登录框就是单例的,稍后我会新写一篇文章分享这种单例模式的应用,敬请关注。

[JavaScript设计模式] 什么是单例模式

标签:逻辑   child   log   single   修改   需要   介绍   null   获取   

原文地址:https://www.cnblogs.com/hansonfang/p/12177396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!