单例模式

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

例子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可以实现很多函数的单例效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 单例模式(SingletonPattern)一般被认为是最简单、最易理解的设计模式,也因为它的简洁易懂,是项目中最...
    成热了阅读 9,869评论 4 34
  • 单体模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一变量进行访问。 单体模式的优点是...
    JSUED阅读 3,547评论 0 0
  • 1 单例模式的动机 对于一个软件系统的某些类而言,我们无须创建多个实例。举个大家都熟知的例子——Windows任务...
    justCode_阅读 5,327评论 2 9
  • 前言 本文主要参考 那些年,我们一起写过的“单例模式”。 何为单例模式? 顾名思义,单例模式就是保证一个类仅有一个...
    tandeneck阅读 7,247评论 1 8
  • 关于自控的理解 自控是人类特有的能力 自控可以帮助你达到更好的状态 需要意识到自己在做决定 当两个自我发生分歧的时...
    格锅阅读 1,513评论 0 0

友情链接更多精彩内容