美文网首页
单例模式

单例模式

作者: Tiny_z | 来源:发表于2017-01-05 22:59 被阅读4次

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

例子1 用代理的方式实现单例模式

下面的代码的功能是在页面中创建一个div

  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);
        };
  
        // 代理类
        var ProxyCreateDiv = (function(){
            var instance;
            return function(html){
                if(!instance){
                    instance = new CreateDiv(html);
                }
                return instance;
            }
        })();

        var a = new ProxyCreateDiv('div1');
        var b = new ProxyCreateDiv('div2');

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

惰性单例

  var createLogin = (function(){
            var div;
            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 = createLogin();
            loginLayer.style.display = 'block';
        }

上面的代码还存在一些问题,例如违反了单一职责,如果我们下次需要创建的不是div,而是script或者iframe什么的,只能把createLogin重新复制一份出来
下面我们把管理单例的逻辑抽离出来,这些逻辑被单独封装在getSingle函数内部,创建对象的方法fn被当成参数动态传入getSingle函数

  var getSingle = function(fn){
            var result;
            return function(){
                return result || (result = fn.apply(this,arguments));
            }
        };

        var createLogin = (function(){
            div = document.createElement('div');
            div.innerHTML = '登录框';
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        })();

        var createSingleLogin = getSingle(createLogin);

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

//如果需要创建一个iframe 也是很方便的
        var createSingleIframe = getSingle(function(){
            var iframe = document.createElement('iframe');
            document.body.appendChild(iframe);
            return iframe;
        });

        document.getElementById('iframeBtn').onclick = function(){
            var iframeLayer = createSingleIframe();
            iframeLayer.src = 'http://www.xxx.com';
        }

getSingle可以实现很多函数的单例效果

相关文章

  • 【设计模式】单例模式

    单例模式 常用单例模式: 懒汉单例模式: 静态内部类单例模式: Android Application 中使用单例模式:

  • Android设计模式总结

    单例模式:饿汉单例模式://饿汉单例模式 懒汉单例模式: Double CheckLock(DCL)实现单例 Bu...

  • 2018-04-08php实战设计模式

    一、单例模式 单例模式是最经典的设计模式之一,到底什么是单例?单例模式适用场景是什么?单例模式如何设计?php中单...

  • 设计模式之单例模式详解

    设计模式之单例模式详解 单例模式写法大全,也许有你不知道的写法 导航 引言 什么是单例? 单例模式作用 单例模式的...

  • Telegram开源项目之单例模式

    NotificationCenter的单例模式 NotificationCenter的单例模式分析 这种单例模式是...

  • 单例模式Java篇

    单例设计模式- 饿汉式 单例设计模式 - 懒汉式 单例设计模式 - 懒汉式 - 多线程并发 单例设计模式 - 懒汉...

  • IOS单例模式的底层原理

    单例介绍 本文源码下载地址 1.什么是单例 说到单例首先要提到单例模式,因为单例模式是单例存在的目的 单例模式是一...

  • 单例

    iOS单例模式iOS之单例模式初探iOS单例详解

  • 单例模式

    单例模式1 单例模式2

  • java的单例模式

    饿汉单例模式 懒汉单例模式

网友评论

      本文标题:单例模式

      本文链接:https://www.haomeiwen.com/subject/xkftbttx.html