javascript设计模式学习笔记之单例模式

xiaolinbang 发布于2019-08-23 15:54 / 1102人阅读

摘要：单例模式单例模式就是保证一个类仅有一个实例并提供一个访问它的全局访问点其最大的特点就是永远只返回一个实例实例通过来获取类的唯一对象其缺点也明显增加了类的不透明性透明的单例模式最终会被返回使用代理实现单例模式将负责管理单例的逻辑移到了代理类中

单例模式

单例模式就是保证一个类仅有一个实例, 并提供一个访问它的全局访问点.

其最大的特点就是永远只返回一个实例

    var Singleton = function (name) {
        this.name = name;
        // instance 实例
        this.instance = null;
    };

    Singleton.prototype.getName = function () {
        console.log(this.name);
    };
    
    // 通过queryInstance 来获取 Singleton 类的唯一对象
    Singleton.queryInstance = function (name) {
        if (!this.instance) {
            this.instance = new Singleton(name)
        }
        return this.instance;
    }

    var a = Singleton.queryInstance("a");
    var b = Singleton.queryInstance("b");
    
    console.log(a);  // {name: "a", instance: null}
    console.log(b);  // {name: "a", instance: null}
    console.log(a === b);  // true

其缺点也明显, 增加了类的不透明性

透明的单例模式

    var CreateDiv = (function () {
        var instance;
        
        // CreateDiv 最终会被返回
        var CreateDiv = function (html) {
            if (instance) {
                return instance;
            }
            this.html = html;

            this.init();

            return instance = this;
        };
        
        
        CreateDiv.prototype.init = function () {
            var div = document.createElement("div");
            div.innerHTML = this.html;
            document.body.appendChild(div);
        };

        return CreateDiv;
    })();

    var a = new CreateDiv("a");
    var b = new CreateDiv("b");

    console.log(a);
    console.log(b);
    console.log(a === b);

使用代理实现单例模式

    var CreateDiv = function (html) {
        this.html = html;
        this.init();
    }
    CreateDiv.prototype.init = function () {
        var div = document.createElement("div");
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }
    // 将负责管理单例的逻辑移到了代理类中.
    // 这样CreateDiv 就变成了一个普通的类
    var ProxySingletonCreateDiv = (function () {
        var instance;
        return function (html) {
            if (!instance) {
                instance = new CreateDiv(html);
            }
            return instance;
        }
    })();

    var a = new ProxySingletonCreateDiv("a");
    var b = new ProxySingletonCreateDiv("b");

惰性单例

在需要的时候才创建对象实例

    // 这个函数就是创建一个 通用的惰性单例模式
    var getSingle = function (fn) {
        var result;
        return function () {
            return result || (result = fn.apply(this, arguments))
        }
    };

    // 以下的都是实例对象的 职责. 将两种区分开来
    var createLoginLayer = function () {
        var div = document.createElement("div");

        div.innerHTML = "我是登录浮框";

        div.style.display = "none";

        document.body.appendChild(div);

        return div;
    };

    var createSingleLoginLayer = getSingle(createLoginLayer);

    document.getElementById("loginBtn").onclick = function () {
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = "block";
    }

GPU云服务器云服务器设计模式学习笔记单例模式单例模式实现单例模式总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102525.html

优才公开课笔记：php设计模式（一） 之单例模式

摘要：最近开展了三次设计模式的公开课，现在来总结一下设计模式在中的应用，这是第一篇创建型模式之单例模式。不过因为不支持多线程所以不需要考虑这个问题了。最近开展了三次设计模式的公开课，现在来总结一下设计模式在PHP中的应用，这是第一篇创建型模式之单例模式。一、设计模式简介首先我们来认识一下什么是设计模式：设计模式是一套被反复使用、容易被他人理解的、可靠的代码设计经验的总结。设计模式不...

guyan0319 2019-06-27 10:45 评论0 收藏0
JavaScript设计模式之单例模式

摘要：原文博客地址单例模式系统中被唯一使用，一个类只有一个实例。中的单例模式利用闭包实现了私有变量两者是否相等弱类型，没有私有方法，使用者还是可以直接一个，也会有方法分割线不是单例最简单的单例模式，就是对象。原文博客地址：https://finget.github.io/2018/11/06/single/ 单例模式系统中被唯一使用，一个类只有一个实例。实现方法一般是先判断实例是否存在，...

lk20150415 2019-08-23 13:46 评论0 收藏0
JavaScript设计模式与开发实践系列之单例模式

摘要：本系列为设计模式与开发实践作者曾探学习总结，如想深入了解，请支持作者原版单例模式实现单例模式单例模式的定义是保证一个类仅有一个实例，并提供一个访问它的全局访问点。本系列为《JavaScript设计模式与开发实践》（作者：曾探）学习总结，如想深入了解，请支持作者原版单例模式实现单例模式单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式是一种常用的模式...

Airy 2019-08-19 17:47 评论0 收藏0
javascript设计模式与开发实践全书深度解析（一）之单例模式

摘要：所以程序在引入文件的时候用了单例模式，一个文件实例化一次，这种做法无疑是好的，但是也容易引起。在我们平时的开发过程中，可以借鉴这两种方式去缓存变量，节点等。这一章作者讲了一个例子，就是在用单例模式生成一个dom节点，还要做到只有访问的时候才创建，后续访问直接用前面创建的。那么实际开发中我们会用到这个模式吗？现在我们基本都是用vue，react，angular开发，不太会直接去操作do...

xioqua 2019-08-26 13:43 评论0 收藏0
每天一个设计模式之单例模式

摘要：博主按每天一个设计模式旨在初步领会设计模式的精髓，目前采用靠这吃饭和纯粹喜欢两种语言实现。单例模式用途如果一个类负责连接数据库的线程池日志记录逻辑等等，此时需要单例模式来保证对象不被重复创建，以达到降低开销的目的。博主按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript（_靠这吃饭_）和python（_纯粹喜欢_）两种语言实现。诚然，每种设计模式都有多种实...

yy736044583 2019-07-31 11:16 评论0 收藏0